Google Maps API v3 – Placemarks

Mario Pérez Esteso -

Hello world!

Seguimos con el segundo tutorial de esta serie sobre la API de Google Maps. En esta ocasión toca hablar de los marcadores, o markers, o placemarks, o como queráis llamarlos. ¿Que qué es un marcador? Pues es un elemento que nos indica una posición exacta dentro del mapa.

Todos hemos visto alguna vez un marcador. Es un elemento de uso muy común en Google Maps para marcar algo significante dentro del mapa. En realidad, casi cualquier objetivo que queramos conseguir con Google Maps pasa por la utilización de marcadores.

Partiremos del código resultante del primer tutorial ya que es el código básico para empezar a utilizar la API.

Lo primero que debemos saber es que los marcadores están representados dentro de esta API como google.maps.Marker. El constructor de este objeto sólo acepta un parámetro en el que se indican las opciones del marcador, por lo que, al igual que pasaba con las opciones del mapa, primero tendremos que crear el objeto de éstas para luego pasárselas al constructor del marcador:

var pos = new google.maps.LatLng(37.774807, -3.795573); var marker = new google.maps.Marker({ position: pos, map: map, title:"Esto es un marcador", animation: google.maps.Animation.DROP });

Podemos ver las siguientes opciones:

  • position: Es un objeto LatLng en cual indica la posición en la que se creará el marcador.
  • map: Objeto Map sobre el que se va a mostrar el marcador.
  • title: Texto que se mostrará al dejar el ratón sobre el marcador.
  • animation: Cuando el marcador se añada al mapa lo hará con la animación que aquí se indique. Varias posibles:
  • BOUNCE: El marcador rebotará contra el mapa hasta que se detenga.
  • DROP: El marcador caerá desde la parte de arriba del mapa y terminará la animación con un pequeño rebote.

Además de éstas opciones también disponemos de otras como icon para establecer el icono (tendremos que pasarle la ruta de la imagen), visible para indicar si queremos que se vea o no, draggable para indicar si queremos que se pueda arrastar o no, etc. Toda las opciones las podéis ver en el API Reference. Por supuesto, todas estas opciones las podremos editar más adelante haciendo una llamada a su función "set" correspondiente, es decir, si queremos modificar el title haremos una llamada así:

marker.setTitle("Título nuevo");

Y así con todos las opciones que queramos. También podemos obtener el valor de un atributo mediante su función correspondiente "get".

Un apunte: el marcador se puede crear también sin opciones, por lo que dentro de los corchetes no escribiríamos nada:

var marker = new google.maps.Marker({});

Le podremos ir añadiendo las opciones poco a poco mediante los setters que acabamos de comentar, por lo que mientras no le definamos una posición y un mapa no aparecerá el marcador sobre dicho mapa.

Recapitulemos. En este punto, nuestro código tendría esta pinta:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #mapa_div { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AQUI_TU_KEY&sensor=true"> </script> <script type="text/javascript"> function inicializar_mapa() { var mapOptions = { center: new google.maps.LatLng(37.774807, -3.795573), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapa_div"), mapOptions); var pos = new google.maps.LatLng(37.774807, -3.795573); var marker = new google.maps.Marker({ position: pos, map: map, title:"Esto es un marcador", animation: google.maps.Animation.DROP }); } </script> </head> <body onload="inicializar_mapa()"> <div id="mapa_div" style="width:100%; height:100%"></div> </body> </html>

Si lo ejecutamos, introduciendo nuestra API Key como vimos en el tutorial anterior, veremos que nos genera un marcador en el centro del mapa.

Vemos que el icono del marcador es el que nos proporciona Google Maps por defecto. Ahora imaginaros que, por unas circunstacias o por otras, queremos cambiar el icono del marcador, ¿cómo se hace? Muy sencillo: llamamos a la función setIcon() para cambiárselo. Por ejemplo:

marker.setIcon('https://dl.dropboxusercontent.com/u/20056281/Iconos/male-2.png');

Así, estableceremos el icono del marcador a la imagen que hemos pasado como atributo, en este caso es esta imagen:

Los marcadores también disponen de eventos (como el evento click). Podemos añadir listeners al marcador para que capture los eventos que queramos. En este ejemplo vamos a capturar el evento click sobre el marcador:

google.maps.event.addListener(marker, 'click', funcionClick);

La función addListener recibe 3 parámetros: el primero indica el elemento del mapa que queremos "escuchar", el segundo es el tipo de evento que queremos capturar y el tercero la función que será invocada cuando el evento indicado en el segundo parámetro suceda. En nuestro caso, la función que será invocada será la siguiente:

function funcionClick() { if (marker.getAnimation() != null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } }

Esta función parará la animación del marcador en caso de tener alguna activa y, en caso de no tener ninguna activa, hará que el marcador empiece a rebotar, es decir, si hacemos click y el marcador no está animado, empezará a rebotar y, cuando volvamos a hacer click, dejará de hacerlo y así sucesivamente.

El código que tenemos en este punto es el siguiente:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #mapa_div { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AQUI_TU_KEY&sensor=true"> </script> <script type="text/javascript"> var marker = null; function funcionClick() { if (marker.getAnimation() != null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } } function inicializar_mapa() { var mapOptions = { center: new google.maps.LatLng(37.774807, -3.795573), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapa_div"), mapOptions); var pos = new google.maps.LatLng(37.774807, -3.795573); marker = new google.maps.Marker({ position: pos, map: map, title:"Esto es un marcador", animation: google.maps.Animation.DROP }); marker.setIcon('https://dl.dropboxusercontent.com/u/20056281/Iconos/male-2.png'); google.maps.event.addListener(marker, 'click', funcionClick); } </script> </head> <body onload="inicializar_mapa()"> <div id="mapa_div" style="width:100%; height:100%"></div> </body> </html>

Hasta ahora tenemos lo siguiente: un mapa inicializado sobre la ciudad de Jaén y un marcador en el centro del mapa que rebota cuando hacemos click sobre él y para cuando volvemos a hacer click. En los siguiente tutoriales sobre marcadores veremos como añadir varios marcadores mediante un fichero KML y como generar ventanas de información (InfoWindows).

¡Un saludo y gracias por leer!