DEV Community

Edgar Rios Navarro
Edgar Rios Navarro

Posted on

Enviar geoposición desde el backend con Primefaces y 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);
}
}

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)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs