Eventos de Google Maps

Hacer clic en el marcador para cambiar de zoom

Seguimos usando el mapa de la página anterior: un mapa centrado en Londres, Reino Unido.

Ahora, queremos que se realice el zoom al hacer clic en la marca (adjuntamos un administrador de eventos al marcador para que el mapa se zoomee al hacer clic).

Este es el código agregado:

Ejemplo

// Al hacer clic en el marcador, cambiar al zoom 9
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Usamos el administrador de eventos addListener() para registrar notificaciones de eventos. Los parámetros aceptados por este método son:

• Un objeto
• Un evento que se debe escuchar
• Una función que se llama en un evento específico

Transladar al marcador

Aquí, guardamos los cambios de zoom y transladamos el mapa 3 segundos después:

Ejemplo

google.maps.event.addListener(marker,'click',function() {
  var pos = map.getZoom();
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  window.setTimeout(function() {map.setZoom(pos);},3000);
});

Abrir la ventana de información al hacer clic en la marca

Al hacer clic en la marca se mostrará una ventana de información que contiene texto:

Ejemplo

var infowindow = new google.maps.InfoWindow({
  content: "¡Hola Mundo!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Configurar la marca y abrir la ventana de información para cada marca

La función se ejecuta cuando el usuario hace clic en el mapa.

La función placeMarker() colocará una marca en la posición donde el usuario haga clic y mostrará una ventana de información que contiene la latitud y longitud de esa marca:

Ejemplo

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitud: ' + location.lat() +
    'Longitud: ' + location.lng()
  });
  infowindow.open(map,marker);
}