Eventos de Mapas do Google
- Página Anterior Camada de Maps
- Próxima Página Controle de Maps
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); }
- Página Anterior Camada de Maps
- Próxima Página Controle de Maps