Enviar geoposición desde el backend con Primefaces y Gmaps.

#java #jsf #gmaps

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);
	}
	}

view raw Ejemplo201605Parte1.java hosted with ❤ by GitHub

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>

view raw Ejemplo201605Parte2.xhtml hosted with ❤ by GitHub

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());
	}