Dic 132012
 
Artículo Javascript

(Read this post in english)

El API de Google maps permite añadir anotaciones al mapa en forma de marcadores para identificar puntos sobre el mismo.

En otro artículo de esta serie hemos visto que la manera de crear un marcador personalizado mediante una llamada a google.maps.Marker en donde especificamos en el parámetro “icon” el icono que queremos presentar.

El frontend de Google maps también permite a un usuario validado con una cuenta de Google crear sus propios mapas, en los que puede añadir anotaciones. Para ello se selecciona “Mis Sitios” -> “CREAR MAPA”.

 

A continuación, se le da un nombre al mapa, y opcionalmente una descripción. También podemos decidir si queremos hacer visible el mapa a cualquier usuario, o sólamente a quienes conozcan la url de acceso al mismo:

Por otra parte, también podemos ver que en el mapa aparecen nuevos botones que permiten añadir al mismo marcadores, y señalar trayectos y regiones del mapa.

En el momento de añadir un marcador, debemos darle un título y opcionalmente una descripción, y también tenemos la opción de seleccionar el icono con el que se va a representar:

 

Cómo hacer referencia a los iconos de marcadores de Google maps en el API

Estos mismos iconos que ofrece el frontend de Google maps pueden ser utilizados en el API. Por ejemplo, el icono que representa un avión está en las urls:

  • http://maps.gstatic.com/mapfiles/ms2/micons/plane.png
  • http://maps.gstatic.com/mapfiles/ms2/micons/plane.shadow.png

Si no conocemos la url de un determinado icono, podemos obtenerlo colocando el icono en un mapa personalizado, y obteniendo el código html resultante en un navegador que lo permita, como Firefox.

Para utilizar este icono en un marcador creado mediante código javascript, asignamos a los parámetros “icon” y “shadow” del objeto Marker las url del icono y de la sombra, o bien creamos objetos “MarkerImage” que nos permiten especificar el tamaño, el origen y el punto de anclaje del icono en relación a la posición del marcador. Esto permite, entre otras cosas, utilizar la técnica de “sprites” para optimizar el tiempo de carga de la página.

 Publicado por en 7:32 pm

 Deja un comentario

(requerido)

(requerido)