Google Maps - Événements
Le programme JavaScript de Google Maps peut répondre à divers événements générés par l'utilisateur. Ce chapitre fournit des exemples illustrant comment effectuer la gestion des événements tout en travaillant avec Google Maps.
Ajout d'un écouteur d'événements
Vous pouvez ajouter un écouteur d'événements à l'aide de la méthode addListener(). Il accepte des paramètres tels que le nom de l'objet sur lequel nous voulons ajouter l'écouteur, le nom de l'événement et l'événement du gestionnaire.
Exemple
L'exemple suivant montre comment ajouter un écouteur d'événement à un objet marqueur. Le programme augmente la valeur de zoom de la carte de 5 à chaque fois que nous double-cliquons sur le marqueur.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Il produit la sortie suivante -
Ouverture d'une fenêtre d'informations au clic
Le code suivant ouvre une fenêtre d'informations en cliquant sur le marqueur -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Il produit la sortie suivante -
Suppression de l'auditeur
Vous pouvez supprimer un écouteur existant à l'aide de la méthode removeListener(). Cette méthode accepte l'objet écouteur, nous devons donc affecter l'écouteur à une variable et la passer à cette méthode.
Exemple
Le code suivant montre comment supprimer un écouteur -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Il produit la sortie suivante -