Cada vez son más las aplicaciones que requieren utilizar funciones relacionadas con la geolocalización bien para posicionar un punto o una dirección en un mapa o bien para obtener sus coordenadas, calcular distancias, dibujar caminos, .....
Google dispone de la V3 de su API (Application Interface) que facilita, a través de su librería en javascript, la integración de mapas en páginas web, API que esta bien documentada en su web oficial donde también encontraras una buena batería de ejemplos que pueden ayudarte a entender las funciones básicas.
Me he propuesto aprender más sobre como utilizar la V3 de Google Maps y para ello he desarrollado y documentado estos ejemplos prácticos:
- Cambiar dinámicamente la posición y el tamaño de un mapa manteniendo el centro del mapa cuando se hace alguno de estos cambios.
- Posicionar un marcador en el mapa por coordenadas, dirección y obtener estos datos si lo sitúo en un punto diferente del mapa.
- Dibujar una polilínea (polyline), escribir etiquetas y personalizar los iconos de los marcadores
CAMBIAR DE POSICIÓN (DRAG) Y DE TAMAÑO (RESIZE) UN MAPA
Para esta nueva funcionalidad he comenzado a trabajar con jQuery y en particular con la libreria UI. Para ello lo que hago es simplemento poner el mapa dentro de un overlay de tipo Dialog y la verdad es que se llega a este resultado con pocas líneas de progamación.
POSICIONAR UN MARCADOR EN EL MAPA
Es habitual necesitar las coordenadas de un punto (longitud, latitud, dirección postal) en un mapa bien porque queremos localizarlo el punto en el mapa a partir de su dirección o coordenadas o lo contrario obtener los datos de un punto, coordenadas y direccion, que situó en el mapa.
El primer ejemplo se ocupa de esto, le he dado el nombre de mapas_marcador.php y este es el aspecto que presenta en pantalla:
Parámetros de llamada
En la llamada se le pueden pasar opcionalmente hasta cuatro parámetros en la llamada que nos van a permitir:
Situar el marcador en el mapa. Admite dos posibilidades:
a) lat, lon: darle las coordenadas latitud y longitud
b) dir: darle la dirección (codificada con urlencode)
Si se especifican ambos, la dirección prevalece sobre las coordenadas.
Especificar el zoom y el tipo de mapa:
c) zoom: nivel de zoom (1,19)
d) tipo: tipo de mapa a utilizar (ROADMAP, SATELLITE, HYBRID o TERRAIN)
Ejemplo de llamada:
mapas_marcador.php?lat=41.4235720334046&lon=-0.4985787200928371&zoom=15
mapas_marcador.php?dir=segovia,spain&zoom=15&tipo=ROADMAP
En el mapa
Una vez en el mapa el marcador que señala el punto se puede mover arrastrandolo (drag&drop) o bien haciendo click en otro punto del mapa en cuyo caso el nuevo marcador sustituirá al anterior. En todo momento en las cajas de texto se decodifica la dirección y las coordenadas (latitud y longitud) del punto.
También incorpora el mapa los controles clásicos del Google Maps para hacer zoom, mover el mapa o cambiar el tipo de mapa.
Geo-Localizar direcciones o coordenadas desde el formulario
En la parte superior del mapa tenemos tres campos editables: Dir, Lat y Lon correspondientes a la Dirección, Latitud y Longitud cuyos valores se actualizan dinámicamente al mover el marcador.
También pueden utilizarse para escribir en estos campos unos valores y geolocalizar el marcador correspondiente en el mapa a partir de la Dirección (Botón Geo-Dir) o bien a partir de las coordenadas (Geo-LatLon) escritas previamente en las cajas de texto.
En este caso el nuevo marcador se situa en el centro del mapa sin modificar el nivel de zoom.
Procesar los datos del marcador
El botón Procesar permite llamar a la función mapas_marcador_procesar.php pasándole como parámetro los valores que hay en las cajas de texto (Dir, Lon y Lat) a través de variables de formulario ($_POST) con los nombres (longitud/latitud/direccion .
En este caso simplemente hacemos eco de las mismas ($_POST["longitud"],$_POST["latitud"] y $_POST["direccion"]) para mostrarlas en pantalla.
POLILINEAS, MARCADORES PERSONALIZADOS y ETIQUETAS
En este caso el ejercicio que he resuelto es el siguiente:
Posicionar tres marcadores en un mapa, a partir de sus coordenadas, cuyo zoom se ajusta para que todas quepan en el tamaño de mapa elegido.
Personalizar los marcadores cada uno con un icono diferente.
Unir los marcadores por una polilinea (polyline)
Que todos los marcadores se puedan arrastrar y cambiar de posición.
Situar el marcador central en la posición del mapa donde haga click con el ratón
Al mover cualquiera de los marcadores imprimo en su base la distancia total entre ellos, en el primero, y la distancia con el otro en el segundo y tercer marcador respectivamente.
Y este es el resultado que esta bien comentado para los que quieran analizar como lo he resuelto.
Espero que te sea útil y seguiré añadiendo nuevos ejemplos.
RSS 2.0
10 Mensajes