Eventos de Google Maps
Haga clic en el marcador para hacer zoom
Todavía usamos el mapa de la página anterior: un mapa centrado en Londres, Inglaterra.
Ahora queremos hacer zoom cuando un usuario hace clic en el marcador (Adjuntamos un controlador de eventos a un marcador que hace zoom en el mapa cuando se hace clic).
Aquí está el código agregado:
Ejemplo
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Nos registramos para recibir notificaciones de eventos usando el controlador de eventos addListener(). Ese método toma un objeto, un evento para escuchar y una función para llamar cuando ocurre el evento especificado.
Regresar al marcador
Aquí, guardamos los cambios de zoom y retrocedemos el mapa después de 3 segundos:
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);
});
Abra una ventana de información al hacer clic en el marcador
Haga clic en el marcador para mostrar una ventana de información con texto:
Ejemplo
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Establecer marcadores y abrir la ventana de información para cada marcador
Ejecuta una función cuando el usuario hace clic en el mapa.
La función placeMarker() coloca un marcador donde el usuario ha hecho clic y muestra una ventana de información con las latitudes y longitudes del marcador:
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: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}