Oct 282012
 

En nuestro anterior artículo hemos visto cómo añadir un mapa de Google a una página web. Normalmente, nos interesará destacar en el mapa algunos puntos concretos o áreas a las que hace referencia la página. En Google Maps API V3 esto se consigue mediante marcadores.

En este artículo vamos a explicar la manera de añadir marcadores al mapa, y de procesar eventos procedentes de dichos marcadores (por ejemplo, cuando el usuario hace click sobre el marcador).

Colocar un marcador sobre un punto del mapa

El siguiente ejemplo de código coloca un marcador en un punto del mapa identificado por sus coordenadas (latitud,longitud):

y con ello, obtenemos el siguiente resultado:


Cómo cambiar el símbolo asociado al marcador.

Puede ocurrir que sobre un mismo mapa debamos colocar marcadores de distinto tipo (por ejemplo la ubicación de colegios y hospitales en la zona visualizada). En este caso, es conveniente sustituir el símbolo que aparece por defecto, por otros símbolos que representen el tipo de marcador de que se trata.

El API de Google Maps permite asociar a un marcador una imagen mediante el parámetro ‘icon’.

Si no queremos diseñar nuestros propios iconos a partir de cero, es fácil encontrar en la web sitios que ofrecen colecciones de iconos. Por ejemplo:

http://kml4earth.appspot.com/icons.html

http://mapicons.nicolasmollet.com/

http://findicons.com/

En el siguiente ejemplo creamos varios marcadores con distintas imágenes asociadas:

El símbolo se especifica asignándolo al argumento ‘icon’ como una url (absoluta, o relativa a la ubicación de la página en donde se visualiza el mapa).

En este ejemplo también podemos ver que hemos asignado directamente el objeto ‘map’ al argumento ‘map’, de modo que no es necesario llamar a ‘marker.setMap’ para que se visualice. Con esto, el resultado es el siguiente:


Respondiendo a eventos en un marcador

Los marcadores pueden hacerse interactivos, de modo que cuando se produce un evento (click, hover, …) asociado a uno de ellos, se ejecute una función javascript. Para ello, especificamos un manejador de eventos. Por ejemplo:

En el ejemplo, hemos añadido al marcador la propiedad standard “title”, y también una propiedad “idColegio” definida por nosotros, para poder identificarlo.

A continuación asignamos la función “procesaClick” como manejador del evento ‘click’ en el marcador. Cuando el usuario hace click sobre el marcador, se ejecuta la función procesaClick, que en el ejemplo genera una alerta con el título y el identificador del colegio. En el mapa del apartado anterior se puede hacer click sobre el icono de colegio para ver el resultado.

 Publicado por en 11:07 am

 Deja un comentario

(requerido)

(requerido)