Haga clic en el marcador para magnificar - asociar controladores de eventos para los mapas de Google.
Haga clic en el marcador para acercarse
Seguimos usando el mapa de la página anterior: un mapa centrado en Londres, Inglaterra.
Ahora queremos hacer un zoom cuando un usuario está haciendo clic en el marcador (se adjunta un controlador de eventos a un marcador que aumenta el mapa cuando se hace clic).
Aquí está el código añadido:
Ejemplo
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
}); Inténtalo tú mismo " Registramos las notificaciones de eventos utilizando el addListener() controlador de eventos. Este método tiene un objeto, un evento para escuchar, y una función para llamar cuando se produce el evento especificado.
De espalda sobre Marcador
A continuación, añadimos un controlador de eventos para el mapa de los cambios a la propiedad "centro" y explorar el mapa de nuevo al marcador después de 3 segundos en un evento center_changed:
Ejemplo
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
}); Inténtalo tú mismo " Abrir una ventana de información haciendo clic en el marcador
Haga clic en el marcador para mostrar una ventana de información con un texto:
Ejemplo
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
}); Inténtalo tú mismo " Establecer marcadores y ventana de información abierta para cada marcador
Ejecutar una función cuando el usuario hace clic en el mapa.
El placeMarker() función coloca un marcador, donde ha hecho clic el usuario, y muestra una ventana de información con las latitudes y longitudes del marcador:
Ejemplo
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);
} Inténtalo tú mismo " Google Maps - Referencia de eventos
Google Maps API de referencia .