7
Primefaces 3.4, Apache Tomcat 7 ve Java EE ile çalışıyorum. GoogleMaps API'u okudum ancak bu özelliğin çalışmasını sağlayamıyorum.Primefaces içinde harita ile otomatik tamamlama adresi
Bir PrimeFaces giriş kutum var ve üzerinde bir adres yazdığımda, GoogleMaps kitaplığı tarafından sağlanan diğer adresleri önermek istiyorum.
XHTML'mdeki JavaScript kodunu koyarken hiçbir şey olmuyor. GoogleMaps kütüphanesi de var. Ben (JSF + Primefaces ile de birlikte) GMap3 jQuery Plugin kullanarak bu özelliği hayata geçirdik
<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>