tutoriais mais recente desenvolvimento web
 

Google Maps Eventos


Clique no marcador para aumentar - anexar manipuladores de eventos para os mapas do Google.


Clique no marcador para Zoom

Continuamos a usar o mapa da página anterior: um mapa centrado em Londres, Inglaterra.

Agora queremos aumentar quando um usuário é clicar sobre o marcador (Nós anexar um manipulador de eventos para um marcador que amplia o mapa quando clicado).

Aqui está o código de adição:

Exemplo

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });
Tente você mesmo "

Eu registro para notificações de eventos usando o addListener() manipulador de eventos. Esse método leva um objeto, um evento para escutar, e uma função a ser chamada quando o evento especificado ocorrer.


Pan Voltar ao marcador

Aqui, nós adicionamos um manipulador de eventos para o mapa para que as alterações a propriedade "centro" e deslocar o mapa volta ao marcador depois de 3 segundos em um evento center_changed:

Exemplo

google.maps.event.addListener(map,'center_changed',function() {
  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);
});
Tente você mesmo "

Abra uma InfoWindow ao clicar no marcador

Clique no marcador para mostrar uma janela de informações com algum texto:

Exemplo

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });
Tente você mesmo "

Definir marcadores e aberto InfoWindow para cada marcador

Executar uma função quando o usuário clica no mapa.

O placeMarker() função coloca um marcador em que o usuário clicou, e mostra uma janela de informações com as latitudes e longitudes do marcador:

Exemplo

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
  });

function placeMarker(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);
}
Tente você mesmo "

Google Maps - Eventos de Referência

Google Maps API de referência .