Cliquez sur le marqueur pour agrandir - joindre des gestionnaires d'événements à Google maps.
Cliquez sur le marqueur pour zoomer
Nous utilisons toujours la carte de la page précédente: une carte centrée sur Londres, en Angleterre.
Maintenant, nous voulons faire un zoom lorsqu'un utilisateur est en cliquant sur le marqueur (Nous attachons un gestionnaire d'événements à un marqueur qui zoome la carte lorsque vous cliquez dessus).
Voici le code ajouté:
Exemple
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
}); Essayez - le vous - même » Nous enregistrons pour les notifications d'événement à l' aide du addListener() gestionnaire d'événements. Cette méthode prend un objet, un événement pour écouter, et une fonction à appeler lorsque l'événement spécifié se produit.
Pan Retour à Marker
Ici, nous ajoutons un gestionnaire d'événements à la carte pour les modifications à la propriété «centre» et déplacer la carte vers le marqueur après 3 secondes sur un événement center_changed:
Exemple
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
}); Essayez - le vous - même » Ouvrez un InfoWindow En cliquant sur le marqueur
Cliquez sur le marqueur pour afficher un infowindow avec un texte:
Exemple
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
}); Essayez - le vous - même » Définir des marqueurs et de l'Open InfoWindow pour chaque marqueur
Exécuter une fonction lorsque l'utilisateur clique sur la carte.
Le marqueur de placeMarker() fonction place un marqueur où l'utilisateur a cliqué, et montre un infowindow avec les latitudes et les longitudes du marqueur:
Exemple
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);
} Essayez - le vous - même » Google Maps - Événements de référence
Google Maps API de référence .