Eventos de Mapas do Google

Zoom ao clicar no marcador

Ainda estamos usando o mapa da página anterior: um mapa centrado em Londres, Reino Unido.

Agora, queremos zoomar ao clicar no marcador (vamos adicionar um manipulador de eventos ao marcador para zoomar no mapa ao clicar).

Este é o código adicionado:

Exemplo

// Zoom para 9 ao clicar no marcador
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Usamos o manipulador de eventos addListener() para registrar notificações de eventos. Os parâmetros aceitos por esse método são:

• Um objeto
• Um evento a ser ouvido
• Uma função chamada quando um evento ocorre

Transladar de volta ao marcador

Aqui, salvamos as alterações de zoom e transladamos o mapa 3 segundos após o evento:

Exemplo

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);
});

Abre a janela de informações ao clicar no marcador

Clique no marcador para exibir uma janela de informações contendo o texto:

Exemplo

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

Configurar o marcador e abrir a janela de informações para cada marcador

A função é executada quando o usuário clica no mapa.

A função placeMarker() coloca um marcador no local clicado pelo usuário e exibe uma janela de informações contendo a latitude e longitude do marcador:

Exemplo

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: 'Latitude: ' + location.lat() +
    '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}