Eventos do Google Maps
Clique no marcador para ampliar
Ainda usamos o mapa da página anterior: um mapa centrado em Londres, Inglaterra.
Agora queremos ampliar quando um usuário está clicando no marcador (Anexamos um manipulador de eventos a um marcador que amplia o mapa quando clicado).
Aqui está o código adicionado:
Exemplo
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Registramos para notificações de eventos usando o manipulador de eventos addListener(). Esse método recebe um objeto, um evento para ouvir e uma função para chamar quando o evento especificado ocorrer.
Pan Voltar ao marcador
Aqui, salvamos as alterações de zoom e retrocedemos o mapa após 3 segundos:
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);
});
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);
});
Definir marcadores e abrir a janela de informações para cada marcador
Execute uma função quando o usuário clicar no mapa.
A função placeMarker() coloca um marcador onde 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(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);
}