Continuamos con esta colección de entradas sobre la API de Google Maps. En esta ocasión, para explicar el funcionamiento de los marcadores o puntos de interés.

1. Creación de un marcador simple personalizado en Google Maps

Para crear un marcador que señalice un punto de interés (POI) es necesario utilizar el objeto “google.maps.Marker”. El parámetro “google.maps.MarkerOptions” tiene diversas propiedades que podemos utilizar para modificar el aspecto y comportamiento del marcador. Las dos únicas propiedades obligatorias son: “position” y “map”.

  • Position: esta propiedad define las coordenadas en las que el marcador será ubicado. El argumento a utilizar es idéntico al del objeto google.maps.LatLng.
  • Map: esta propiedad es una referencia al mapa en el que deseamos añadir el marcador.
  • Title: Muestra un texto al pasar el cursor sobre el marcador.
  • Icon: Permite utilizar imágenes personalizadas para los iconos que representan los POI. Es posible utilizar los iconos creados por Google o una imagen propia que referenciaremos con su URL o ubicación en el servidor.

Ejemplo:

var marker = new google.maps.Marker({
			position: new google.maps.LatLng(41.381269, 2.138956),
			map: map,
			title: 'Facultad de Biblioteconomía de la UB',
			icon: 'iconos/green.png'
		});

2. Añadiendo más información al marcador: los InfoWindow

Si necesitamos mostrar más información acerca del marcador que hemos creado, podemos crear un “InfoWindow”, una especie de bocadillo que aparece al pulsar sobre el marcador en cuestión. De la misma manera que el objeto “Marker”, el objeto “InfoWindow” reside en el namespace de “google.maps”, y presenta un único argumento, el objeto “InfoWindowOptions”. Este objeto tiene diferentes propiedades. La más importante de ellas es la propiedad “content”, el valor de la cual será mostrado dentro del bocadillo. El valor de la propiedad “content” puede ser texto plano o código HTML.

Ejemplo:

var infowindow = new google.maps.InfoWindow({
		content:'Facultad de Biblioteconomía y Documentación'
	});

Una vez creado el objeto “InfoWindow”, tenemos que conectarlo con el marcador para que al pulsar sobre él, el bocadillo aparezca. Para ello añadiremos un evento de clic al marcador. El método “google.maps.events.addListener()” nos permite asociar un determinado evento a un objeto dentro del DOM, y a una función que se ejecuta cuando se activa el evento.

Sintaxis:

google.maps.event.addListener(objeto, 'evento', función()

Ejemplo:

google.maps.event.addListener(marker, 'click', function()

El objeto google.maps.Marker puede detectar los siguientes eventos de usuario:

  • ‘click’
  • ‘dblclick’
  • ‘mouseup’
  • ‘mousedown’
  • ‘mouseover’
  • ‘mouseout’

A continuación debemos llamar el método “open” del objeto “InfoWindow”.

infowindow.open(map, marker);

Todo junto:

window.onload = function() {
	var catalunya = new google.maps.LatLng(41.652393,1.691895);
	var mapOptions = {
		center: catalunya,
		zoom: 8,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
map = new google.maps.Map(document.getElementById('mapa'), mapOptions);
 
	var marker = new google.maps.Marker({
			position: new google.maps.LatLng(41.381269, 2.138956),
			map: map,
			title: 'Facultad de Biblioteconomía',
			icon: 'iconos/green.png'
		});
 
	var infowindow = new google.maps.InfoWindow({
		content:'<h1>Facultad de Biblioteconomia i Documentación</h1>
<p>Adreça: Carrer de Melcior de Palau, 140, 08014 Barcelona.</p>
<p>Telèfon: 934 03 57 70.</p>
<img src="imagenes/bid.png" alt="Facultad de Biblioteconomía i Documentación" />' });
google.maps.event.addListener(marker, 'click', function() { 
infowindow.open(map,marker); 
}); 
}

El resultado final se muestra en la siguiente imagen:

Marcador personalizado con información sobre la Facultad de Biblioteconomía y Documentación de la UB

Resultado del ejemplo creado.

En la siguiente entrada explicaré cómo añadir varios marcadores con sus respectivos InfoWindows.