Nideaderedes

Introducción a Google Maps (II)

En esta segunda entrega vamos a ver cómo añadir eventos a nuestra miniaplicación de Google Maps. Puedes ver el ejemplo aquí.

El evento que vamos a añadir va a mostrar justo debajo del mapa la latitud y la longitud del punto central del mapa. Esta información se va a actualizar cada vez que cambie el centro del mapa, es decir cada vez que movamos el mapa.

Para añadir un evento usamos un objeto GEvent y su método addListener:

GEvent.addListener( origen, evento, manejador );

Parámetros:

origen: es el objeto que provoca el evento.
evento: el tipo de evento que ha tenido lugar.
manejador: función que realiza una acción cuando el objeto lanza el evento.

En nuestro caso:

GEvent.addListener(map, "moveend", function() { cambiarCoordenadas(map); });

Es decir: “cuando el objeto map provoque el evento moveend hay que llamar a la función cambiaCoordenadas”. La función cambiaCoordenadas simplemente escribe las coordenadas debajo del mapa.

Aquí está la función load() modificada:

function cambiarCoordenadas(map) {
	var center = map.getCenter();
	var coordenadas = "Latitud: " + center.lat() +
		", Longitud: " + center.lng().toString();
	document.getElementById("coordenadas").innerHTML = coordenadas;
}
function load() {
  if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById("map"));
	GEvent.addListener(map, "moveend", function() { cambiarCoordenadas(map); });
	map.setCenter(new GLatLng(43.2647,-2.93798), 13);
	map.addControl(new GLargeMapControl());
	map.setMapType(G_SATELLITE_TYPE);
  }
}

Y esta es la parte del código HTML:

Entradas relacionadas

1. Introducción a Google Maps (III)
2. Introducción a Google Maps
3. Google Maps Europa ya está en marcha
4. Introducción a Prototype – un toolkit Ajax
5. Código para actualizar el contenido de una capa con Scriptaculous