Este ejemplo muestra como interactuar con información del backend y el frontend. Específicamente, enviar una posición y mostrarla en un mapa (google maps).
Recuperamos la latitud y longitud (posiblemente desde la base de datos) en el controller.
@Controller | |
@Scope(value = "session") | |
public class AdminCheckPointController implements Serializable { | |
private static final long serialVersionUID = 860816470679972123L; | |
static final Logger log = LogManager.getLogger(AdminCheckPointController.class.getName()); | |
@Getter @Setter private String lat = "LATITUD_REFERENCIA"; | |
@Getter @Setter private String lng = "LONGITUD_REFERENCIA"; | |
public void voidGrabarMarker() { | |
String msg = String.format("Posicion Grabada: Latitud=%s, Longitud=%s", this.lat, this.lng); | |
GenerateExpressions.CrearMensaje("INFO", TITULO_APLICACION, msg); | |
} | |
} |
La posición lo almacenamos en variables de javascript. En la página web, también tendremos dos input's para mostrar cómo va cambiando la posición al mover el marker.
<?xml version='1.0' encoding='UTF-8' ?> | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" | |
xmlns:h="http://java.sun.com/jsf/html" | |
xmlns:f="http://java.sun.com/jsf/core" | |
xmlns:ui="http://java.sun.com/jsf/facelets" | |
xmlns:p="http://primefaces.org/ui"> | |
<f:view contentType="text/html"> | |
<h:head> | |
<f:facet name="first"> | |
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" /> | |
</f:facet> | |
<script | |
src="https://maps.googleapis.com/maps/api/js?key=CODIGO_GOOGLE_MAPS" | |
type="text/javascript"></script> | |
<script src="js/administracionruta.js"></script> | |
</h:head> | |
<h:body style="font-family:verdana; font-size:10px;"> | |
<p:layout fullPage="true"> | |
<p:layoutUnit position="center"> | |
<p:layout style="height:100%"> | |
<p:layoutUnit position="center"> | |
<div id="map" style="width:100%;height:250px"></div> | |
<h:form id="frmCoordenadas"> | |
<p:inputText id="oplLat" value="#{adminCheckPointController.lat}" /> | |
<p:inputText id="oplLng" value="#{adminCheckPointController.lng}" /> | |
<p:commandButton value="Enviar" | |
actionListener="#{adminCheckPointController.voidGrabarMarker}" | |
update=":frmMessages:messages"></p:commandButton> | |
</h:form> | |
</p:layoutUnit> | |
</p:layout> | |
</p:layoutUnit> | |
</p:layout> | |
</h:body> | |
<script> | |
latIni = '#{adminCheckPointController.lat}'; | |
lngIni = '#{adminCheckPointController.lng}'; | |
window.onload = initMap; | |
</script> | |
</f:view> | |
</html> |
Creamos el mapa y colocamos el marker. Agregamos los eventos para mostrar la posición actual.
var map; | |
var latIni; | |
var lngIni; | |
var isNew=1; | |
function initMap() { | |
var myLatlng = new google.maps.LatLng(latIni,lngIni); | |
map = new google.maps.Map(document.getElementById('map'),{ | |
center: myLatlng, | |
zoom: 20, | |
disableDefaultUI: true | |
}); | |
map.addListener('click', function(e){ | |
placeMarkerAndPanTo(e.latLng, map); | |
}); | |
} | |
function placeMarkerAndPanTo(latLng, map) { | |
if (isNew==1) { | |
var marker = new google.maps.Marker({ | |
position: latLng, | |
map: map, | |
draggable: true | |
}); | |
map.panTo(latLng); | |
marker.addListener('drag', handleEvent); | |
marker.addListener('dragend', handleEvent); | |
isNew=0; | |
} | |
} | |
function handleEvent(event) { | |
$('#frmCoordenadas\\:oplLat').val(event.latLng.lat()); | |
$('#frmCoordenadas\\:oplLng').val(event.latLng.lng()); | |
} |
Documentación
https://developers.google.com/maps/documentation/javascript/examples/
Top comments (0)