Portada del sitio > Programación > Ejemplos de uso Google Maps V3

Ejemplos de uso Google Maps V3

Septiembre de 2013

Domingo 15 de septiembre de 2013, por Miguel Pérez Subías

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.

Ver demo -//- Ver código fuente

 

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:

Ver demo -//- Ver código fuente

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.

Ver demo -//- Ver código fuente

Espero que te sea útil y seguiré añadiendo nuevos ejemplos.

10 Mensajes

  • Ejemplos de uso Google Maps V3 Le 2 de noviembre de 2013 à 00:18, por cristian caballero

    Me sorprende la documentacion y sus ejemplos Felicitaciones me ha ayudado mucho, sin embargo el ultimo ejemplo por alguna razon no me funciona POLILINEAS, MARCADORES PERSONALIZADOS y ETIQUETAS podrias reenviarme el codigo por favor mil gracias

    • Ejemplos de uso Google Maps V3 Le 2 de noviembre de 2013 à 12:31, por cristian caballero

      Hola Miguel, ya lo resolvi el codigo esta bien el problema estaba en la extencion del archivo debe ser php, otra pregunta que existe una funcion que me traiga mi posicion actual del equipo donde estoy navegando o haciendo la consulta, para trazar una linea entre 2 puntos a - b. gracias y te felicito por este articulo.
      Cristian Caballero - Colombia

  • Ejemplos de uso Google Maps V3 Le 25 de febrero de 2014 à 06:28, por José Díaz

    Excelente Miguel, muchísimas gracias.
    Saludos

  • Ejemplos de uso Google Maps V3 Le 1ro de marzo de 2014 à 04:02, por jairo

    Hola mi querido amigo estoy incursionando en las api de google ya q necesito obtener puntos de latitud y longitud para luego almacenarlos en un BD
    Tu proyecto es justo lo q estaba buscando sin embargo al adaptarlo a mis necesidades me encuentro con q el div donde se publica el mapa no visualiza el contenido ... talvez en la modificacion se me escapo algo o no lo vizualice el problema es q nbo me muestra nada si me pudieras ayudar con esto seria de full ayuda el ejemplo lo tengo subido a mi dominio http://appsistemas.comlu.com/mapas_marcador.php para q tengas una idea de lo q hablo muchas gracias x la atencion prestada...

    • Ejemplos de uso Google Maps V3 Le 28 de abril de 2014 à 03:03, por juank

      amigo lo que hiciste en esa pagina es exactamente lo q nesesito
      me podrias hacerme el fabor de pasarme el codigo fuente ?

  • Ejemplos de uso Google Maps V3 Le 3 de marzo de 2014 à 15:59, por AnzOne

    Muchas gracias me ha servido mucho el último ejemplo.

  • Ejemplos de uso Google Maps V3 Le 6 de marzo de 2014 à 00:54, por Robin

    buen tutorial, me sirvio de mucho

  • Ejemplos de uso Google Maps V3 Le 19 de marzo de 2014 à 15:32, por Miguel Gidi

    Felicitaciones por tus ejemplos. Necesito hacer una ruta y que el icono se vaya moviendo alrededor de la ruta haciendo un tracking y no hayo cómo.

    Saludos.

  • Borrar Polilíneas y Polígonos Le 11 de abril de 2014 à 20:16, por Mario Alberto

    Buen Día.
    le agradeceria si me pudiera ayudar a borrar Polilíneas y Polígonos los creo de esta manera:
    polyLinePath = new google.maps.Polyline(
    path: polyLineCoord,
    strokeColor: col,
    strokeOpacity: 1.0,
    strokeWeight: 5

    de esta manerame borra el ultimo
    polyLinePath.setMap(null);
    pero yo quiero borrar todos los que tenga
    Saludos.

  • Ejemplos de uso Google Maps V3 Le 2 de junio de 2014 à 18:46, por roberto

    Gracias mi estimado amigo.. me falta hacer algunos retoques para agregarlo en un carussel..una ves terminado les mostrare lo que ayudaron ...