java – 使用Primefaces中的谷歌地图库自动完成地址

我有一个PrimeFaces输入框,当我在其上写一个地址时,我想建议GoogleMaps库提供的其他地址.

将JavaScript代码放在我的XHTML上时没有任何反应.我也有GoogleMaps库.

这是我的XHTML：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    function initia(domicilioDesde,domicilioHasta) {

        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var oldDirections = [];
        var currentDirections = null;
        var cordoba = ",Cordoba,Argentina";
        var direccion = domicilioDesde; /* '#{busquedaplayaMB.direccionDesde}'; */
        var start = direccion.concat(cordoba);
        var fin = domicilioHasta; /*'#{busquedaplayaMB.playaselected.domicilio}';*/
        var end = fin.concat(cordoba);
        var request = {
            origin : start,destination : end,travelMode : google.maps.DirectionsTravelMode.DRIVING
        }
        var myOptions = {
            zoom : 13,center : new google.maps.LatLng(#{busquedaplayaMB.latitudCentro},#{busquedaplayaMB.longitudCentro}),mapTypeId : google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

        directionsDisplay = new google.maps.DirectionsRenderer({
            'map' : map,'preserveViewport' : true,'draggable' : true
        });
        directionsDisplay.setPanel(document
                .getElementById("directions_panel"));

        directionsService.route(request,function(response,status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        dlg2.show();
    }

    function undo() {
        currentDirections = null;
        directionsDisplay.setDirections(oldDirections.pop());
        if (!oldDirections.length) {
            setUndoDisabled(true);
        }
    }

    function setUndoDisabled(value) {
        document.getElementById("undo").disabled = value;
    }
</script>

<h:form id="form">
    <p:growl id="messages" showSummary="false" autoUpdate="true"
        globalOnly="true" />

    <div align="left" style="margin: 10px 0 10px 0;">
        <p:panel>
            <h:panelGrid columns="1" width="100%" cellspacing="5"
                cellpadding="5">
                <h:panelGrid columns="2" width="80%">
                    <p:column style="vertical-align:text-center;">
                        <h:panelGrid columns="2">
                            <p:column>
                                <p:watermark for="direccionBusqueda"
                                    value="Dirección de búsqueda" />
                                <p:inputText id="direccionBusqueda"
                                    value="#{busquedaplayaMB.direccionBusqueda}" required="true"
                                    requiredMessage="Campo dirección de búsqueda obligatorio"
                                    style="width:250px;">
                                    <p:ajax event="blur" update="direccionBusquedaMsg" />
                                </p:inputText>
                            </p:column>
                            <p:column>
                                <p:message id="direccionBusquedaMsg" display="icon"
                                    for="direccionBusqueda" />
                            </p:column>
                        </h:panelGrid>
                    </p:column>
                    <p:column>
                        <div align="center">
                            <h:outputLabel value="N° de cuadras: " />
                            <h:outputLabel id="nroCuadras"
                                value="#{busquedaplayaMB.distancia}" />
                            <h:inputHidden id="distancia"
                                value="#{busquedaplayaMB.distancia}" />
                            <p:slider for="distancia" minValue="1" maxValue="50"
                                style="width:100px;" update="nroCuadras" display="nroCuadras" />
                        </div>
                    </p:column>
                </h:panelGrid>

                <h:panelGrid columns="5" cellspacing="5" cellpadding="5"
                    width="100%">
                    <p:column style="vertical-align:text-center;">
                        <p:selectOneMenu value="#{busquedaplayaMB.categoriaParameter}"
                            effect="fade" style="width:160px;height:25px;line-height:17px;">
                            <f:selectItem itemLabel="Todas las categorías"
                                itemValue="#{null}" />
                            <f:selectItems
                                value="#{categoriaVehiculoMB.categoriaVehiculoList}"
                                var="categoria" itemValue="#{categoria}"
                                itemLabel="#{categoria.nombre}" />
                            <f:converter converterId="categoriaVehiculoConverter" />
                        </p:selectOneMenu>
                    </p:column>

                    <p:column style="vertical-align:text-center;">
                        <p:selectOneMenu value="#{busquedaplayaMB.tipoEstadiaParameter}"
                            effect="fade" style="width:160px;height:25px;line-height:17px;">
                            <f:selectItem itemLabel="Todas los tipos estadías"
                                itemValue="#{null}" />
                            <f:selectItems value="#{tipoEstadiaMB.tipoEstadiaList}"
                                var="tipoEstadia" itemValue="#{tipoEstadia}"
                                itemLabel="#{tipoEstadia.nombre}" />
                            <f:converter converterId="tipoEstadiaConverter" />
                        </p:selectOneMenu>
                    </p:column>

                    <p:column style="vertical-align:text-center;">
                        <div align="right">
                            <h:panelGrid columns="2">
                                <p:selectBooleanCheckbox id="check"
                                    value="#{busquedaplayaMB.checkPromociones}" />
                                <p:outputLabel for="check" value="Sólo con promociones" />
                            </h:panelGrid>
                        </div>
                    </p:column>
                    <p:column>
                        <div align="right">
                            <p:commandButton id="btnBuscarAvanzado" update="playas,mapa"
                                value="Buscar" action="#{busquedaplayaMB.busquedaAvanzada}"
                                ajax="false" icon="ui-icon-search" style="width:85px;" />
                        </div>
                    </p:column>
                </h:panelGrid>
            </h:panelGrid>
        </p:panel>
    </div>



    <div>
        <p:panel>
            <f:view contentType="text/html">
                <!--                <h1>Playas encontradas:</h1> -->
                <script src="http://maps.google.com/maps/api/js?sensor=false"
                    type="text/javascript"></script>

                <p:gmap center="#{busquedaplayaMB.coordenadas}" zoom="14"
                    type="ROADMAP" model="#{busquedaplayaMB.advancedModel}"
                    style="width:99,5%; height:350px;">

                    <p:ajax event="overlaySelect"
                        listener="#{busquedaplayaMB.onMarkerSelect}" />

                    <p:gmapInfoWindow>

                        <ui:fragment
                            rendered="#{busquedaplayaMB.marker.data.playa == null}">
                            <div align="center">
                                <ui:fragment rendered="#{busquedaplayaMB.usuario == null}">
                                    <h:outputText style="font-weight:bold;" value="?Usted está aquí!" />
                                </ui:fragment>

                                <ui:fragment rendered="#{busquedaplayaMB.usuario != null}">
                                    <h:panelGrid column="1" style="text-align:center;"
                                        cellspacing="0px" cellpadding="0px">

                                        <p:column>
                                            <h:graphicImage library="fotos_perfil_usuarios"
                                                name="sinfoto.jpg"
                                                styleClass="bordes-foto-perfil-comentario"
                                                rendered="#{busquedaplayaMB.usuario.fotoUsuario == null}" />
                                            <h:graphicImage library="fotos_perfil_usuarios"
                                                name="#{busquedaplayaMB.usuario.nombreUser}.jpg"
                                                styleClass="bordes-foto-perfil-comentario"
                                                rendered="#{busquedaplayaMB.usuario.fotoUsuario != null}" />
                                        </p:column>
                                        <p:column>
                                            <h:outputText style="font-weight:bold;"
                                                value="#{busquedaplayaMB.usuario.nombre} #{busquedaplayaMB.usuario.apellido}" />
                                        </p:column>
                                        <p:column>
                                            <h:link id="linkUsuario" tittle="Ir a mi perfil"
                                                value="Ir a mi perfil" outcome="/cliente/perfilcliente" />
                                        </p:column>

                                    </h:panelGrid>
                                </ui:fragment>

                            </div>
                        </ui:fragment>

                        <ui:fragment
                            rendered="#{busquedaplayaMB.marker.data.playa != null}">
                            <div align="center">
                                <h:panelGrid column="1" style="text-align:center;"
                                    cellspacing="0px" cellpadding="0px">
                                    <p:column>
                                        <h:graphicImage library="fotos_perfil_playas"
                                            name="#{busquedaplayaMB.marker.data.id}_#{busquedaplayaMB.marker.data.nombreFoto}"
                                            styleClass="bordes-foto-perfil-comentario"
                                            rendered="#{busquedaplayaMB.marker.data.nombreFoto != null}" />
                                        <h:graphicImage library="fotos_perfil_playas"
                                            name="sinfoto.jpg"
                                            styleClass="bordes-foto-perfil-comentario"
                                            rendered="#{busquedaplayaMB.marker.data.nombreFoto == null}" />
                                    </p:column>
                                    <h:outputText style="font-weight:bold;"
                                        value="#{busquedaplayaMB.marker.data.playa.nombreComercial}" />

                                    <h:outputText
                                        value="#{busquedaplayaMB.marker.data.playa.domicilio} - #{busquedaplayaMB.marker.data.playa.barrio.nombre}" />

                                    <h:link id="link" tittle="Ir a playa" value="Ver información"
                                        outcome="/viewperfilplaya.html?id=#{busquedaplayaMB.marker.data.playa.id}" />

                                </h:panelGrid>
                            </div>
                        </ui:fragment>
                    </p:gmapInfoWindow>
                </p:gmap>
            </f:view>
        </p:panel>
    </div>

    <div style="margin: 5px;">
        <p:dataTable id="playas" var="playa" paginator="true"
            paginatorPosition="bottom" rows="5"
            emptyMessage="?No existen playas!"
            value="#{busquedaplayaMB.playaResultadoBusqueda}">

            <p:column headerText="Nombre Comercial" styleClass="column-font">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{playa.nombreComercial}" />
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText value="#{playa.nombreComercial}"
                            styleClass="input-font" />
                    </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Barrio" styleClass="column-font">
                <h:outputText value="#{playa.barrio.nombre}" />
            </p:column>

            <p:column headerText="Domicilio" styleClass="column-font">
                <h:outputText value="#{playa.domicilio}" />
            </p:column>

            <p:column headerText="Perfil" style="text-align:center; width:50px;">
                <h:link id="verPerfil" title="Ver perfil"
                    outcome="/viewperfilplaya.html?id=#{playa.id}">
                    <h:graphicImage library="images/icons" name="go.png" />
                </h:link>
            </p:column>
            <p:column headerText="Ruta" style="text-align:center; width:50px;">
                <p:commandLink id="view2" oncomplete="dlgOrigen.show();"
                    title="?Cómo llegar a esta playa?" update=":dlgO" process="@this">
                    <f:setPropertyActionListener value="#{playa}"
                        target="#{busquedaplayaMB.playaselected}" />
                    <h:graphicImage library="images/icons" name="search-map.png"
                        style="height:40px; width:40px" />
                </p:commandLink>
            </p:column>
        </p:dataTable>
    </div>
    <!--    </h:form> -->

    <p:dialog widgetVar="dlg2" width="800" height="400" modal="true"
        id="dialog" draggable="false" closable="true">

        <!--        <h:form id="frmComoLlegar"> -->
        <f:facet name="header">
            <h:outputText value="?Cómo llegar a la playa?" />
        </f:facet>
        <div id="map_canvas" style="float: left; width: 65%; height: 100%"></div>
        <div style="float: right; width: 35%; height: 100%; overflow: auto">
            <div id="directions_panel" style="width: 100%"></div>
        </div>
        <f:facet name="footer" style="text-align=right;">
            <p:commandButton id="undo" value="Volver"
                style="float:right; width:274px; height: 42px" onclick="undo();"></p:commandButton>
        </f:facet>
    </p:dialog>
</h:form>

<p:dialog header="Dirección de origen" id="dlgO" widgetVar="dlgOrigen"
    resizable="false" closable="true">
    <h:form id="frmComoLlegar">

        <h:panelGrid columns="2" cellspacing="10" cellpadding="10">
            <h:outputLabel for="dirOrigen" value="Dirección de origen: " />
            <p:inputText id="dirOrigen" required="true"
                value="#{busquedaplayaMB.direccionDesde}"
                onkeyup="if (event.keyCode == 13) { document.getElementById(':frmComoLlegar:siguiente').click(); return false; }" />
            <p:column />
            <p:column>
                <div align="right">
                    <p:commandButton id="siguiente" value="Siguiente" ajax="true"
                        onclick="initia(jQuery('#frmComoLlegar:dirOrigen').val(),'#{busquedaplayaMB.playaselected}');"
                        update=":dialog" process="@this"
                        action="#{busquedaplayaMB.tomarDomicilioDesde}" />
                </div>
            </p:column>
        </h:panelGrid>
    </h:form>
</p:dialog>