Mapas con marcadores

Esta es una continuación de Mapas Google.

Es muy interesante poder marcar un punto en el mapa. Lo podemos hacer instanciando un nuevo marcador ( marker ) dentro de la función initialize().

Un ejemplo básico.

1). Instanciamos un nuevo marcador.


		// las coordenadas de Barcelona		
		var ubicacion = new google.maps.LatLng(41.3887900, 2.1589900);
		var marcador = new google.maps.Marker({
				position: ubicacion, // las coordenadas de Barcelona		
				map: mapa, // el mapa donde aparece - una instancia de Map
				title: "Barcelona" // aparece al pasar con el ratón por encima 
		});

2). Este código tiene que aparecer dentro de la función initialize(). De esta manera la chincheta será inicializada junto con el mapa.


var mapa;
function initialize() {
		// las coordenadas de Barcelona		
		var ubicacion = new google.maps.LatLng(41.3887900, 2.1589900)
	
		var opcionesDeMapa = {
				zoom: 8,
				center: ubicacion,
				mapTypeId: google.maps.MapTypeId.ROADMAP //SATELITE, HYBRID, ROADMAP, TERRAIN
		};
		// instancia un nuevo objeto Map
		mapa = new google.maps.Map(document.getElementById("mapa"), opcionesDeMapa);										
		// instancia un nuevo marcador ( la chincheta )
		var marker = new google.maps.Marker({
				position: ubicacion,
				map: mapa,
				title: "Barcelona",
		});		
}// acaba la función initialize
		// inicializa el mapa cuando la ventana se haya cargado:
		google.maps.event.addDomListener(window, "load", initialize);

Vea un ejemplo de mapa con marcador.

Cambiar la imagen del marcador

Cambiar la imagen del marcador es muy fácil. Primero hay que definir la nueva imagen, por ejemplo:

var bandera = 'images/bandera.png';

Después hay que añadir esta nueva propiedad del marcador:

icon: bandera;


var bandera = 'images/bandera.png';
var marcador = new google.maps.Marker({
		position: ubicacion,
		map: mapa,
		title: 'Barcelona',
		icon: bandera; 
});

Este código tiene que aparecer, como antes, dentro de la función initialize(). De esta manera la bandera será inicializada junto con el mapa.


var mapa;
function initialize() {
		// las coordenadas de Barcelona		
		var ubicacion = new google.maps.LatLng(41.3887900, 2.1589900)
	
		var opcionesDeMapa = {
				zoom: 8,
				center: ubicacion,
				mapTypeId: google.maps.MapTypeId.ROADMAP //SATELITE, HYBRID, ROADMAP, TERRAIN
		};
		// instancia un nuevo objeto Map
		mapa = new google.maps.Map(document.getElementById("mapa"), opcionesDeMapa);										
		// instancia un nuevo marcador ( la bandera )
		var bandera = "images/bandera.png";
		var marcador = new google.maps.Marker({
				position: ubicacion,
				map: mapa,
				title: "Barcelona",
				icon: bandera
		});"; 
}// acaba la función initialize
		// inicializa el mapa cuando la ventana se haya cargado:
		google.maps.event.addDomListener(window, "load", initialize);

Vea un ejemplo de mapa con marcador personalizado.

Marcadores múltiples

Podemos también marcar varios puntos en el mapa. Para esto habrá que instanciarlos uno por uno. Empezamos construyendo un array de objetos, cada objeto representando una chincheta en el mapa.

Cada objeto del array chinchetas tiene 4 propiedades: title (el titulo que aparecerá al pasar por encima del marcador) pin (la imagen que será utilizada para marcar el punto) lat (la latitud) y lng (la longitud). Google pone a nuestra disposición una amplia variedad de iconos para utilizarlos con Google Maps.


		var chinchetas = [
		{title: 'Barcelona', pin:'red-dot', lat:41.3887900, lng:2.1589900},
		{title: 'Figueres', pin:'green-dot', lat:42.268750, lng:2.957293}, 
		{title: 'Tarragona', pin:'yellow-dot', lat:41.128584, lng:1.226946},
		];

Para marcar los puntos vamos a utilizar un bucle for ( for loop ) que recorre el array de las chinchetas e instancia los marcadores uno por uno:


		var marcador, pin;
		// la carpeta donde se encuentran los iconos de Google
		var url = "http://maps.google.com/mapfiles/ms/micons/";
		for( var i = 0; i < chinchetas.length; i++){
		// el icono utilizado 
		pin = url + chinchetas[i].pin + ".png";
		// nuevo marcador
		marcador = new google.maps.Marker({
				position: new google.maps.LatLng(chinchetas[i].lat, chinchetas[i].lng),
				map: mapa,
				title: chinchetas[i].title,
				icon: pin
		});		
		}

Veamos todo el código junto.


var mapa;
function initialize() {
		// las coordenadas de Barcelona		
		var chinchetas = [
		{title: "Barcelona", pin:"red-dot", lat:41.3887900, lng:2.1589900},
		{title: "Figueres", pin:"green-dot", lat:42.268750, lng:2.957293}, 
		{title: "Tarragona", pin:"yellow-dot", lat:41.128584, lng:1.226946},
		];
		
		var centroMapa = new google.maps.LatLng(41.3887900, 2.1589900);
	
		var opcionesDeMapa = {
				zoom: 8,
				center: centroMapa,
				mapTypeId: google.maps.MapTypeId.ROADMAP //SATELITE, HYBRID, ROADMAP, TERRAIN
		};
		// instancia un nuevo objeto Map
		mapa = new google.maps.Map(document.getElementById("mapa"), opcionesDeMapa);										
		
		var marcador, pin;
		// la carpeta donde se encuentran los iconos de Google
		var url = "http://maps.google.com/mapfiles/ms/micons/";
		for( var i = 0; i < chinchetas.length; i++){
		// el icono utilizado 
		pin = url + chinchetas[i].pin + ".png";
		// nuevo marcador
		marcador = new google.maps.Marker({
				position: new google.maps.LatLng(chinchetas[i].lat, chinchetas[i].lng),
				map: mapa,
				title: chinchetas[i].title,
				icon: pin
		});		
	}
}// acaba la función initialize
		// inicializa el mapa cuando la ventana se haya cargado:
		google.maps.event.addDomListener(window, "load", initialize);

Vea un ejemplo de mapa con varios marcadores.

w3.unpo<code>todo