Temps de lecture : 16 minutes environ.
Série : Tutoriels Google Maps
Série API Javascript de Google Maps
- Pas à Pas – Insérer une carte Google Maps avec l’API Google Maps Javascript
- Pas à Pas – API Google Maps Javascript « InfoWindow », marqueurs personnalisés et clusters
Dans un précédent article, nous avons traité des bases d’utilisation de l’API Google Maps Javascript.
Nous allons maintenant voir comment ajouter certaines options comme les bulles d’information, des marqueurs personnalisés et le regroupement de marqueurs.
Les bulles d’information
Il peut être nécessaire, dans certaines utilisations des cartes Google Maps, de faire apparaître une bulle d’information lorsque l’utilisateur cliquera sur le marqueur.
Dans l’API, ces bulles sont appelées « InfoWindow ». Elles doivent être « attachées » à chacun des marqueurs et s’activer au clic de l’utilisateur.
Nous utiliserons donc les évènements de l’API Google Maps pour gérer ces actions.
Nous devons également créer une fonction pour créer nos marqueurs. En effet, la boucle que nous avons créée dans l’article précédent « écrase » le marqueur précédent et ne serait pas adaptée à l’utilisation que nous voulons en faire. Sans cette fonction, seule la bulle d’information du dernier marqueur fonctionnerait.
Voici le code qui nous permet d’afficher la ville correspondant au marqueur, et de n’avoir qu’une seule bulle ouverte à la fois.
var currentPopup = null; // contiendra l'information de la bulle actuellement ouverte
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(lat, lon),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
scrollwheel: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
$.ajax({
url : "selectData.php",
type : "POST",
}).done(function(json){
villes = JSON.parse(json);
for(ville in villes){
// Ici nous avons "sorti" tout le code dans la fonction createMarker
// Ceci permet de créer un contexte spécifique pour chaque marqueur
createMarker(ville, villes);
}
});
}
function createMarker(ville, villes) {
var marker = new google.maps.Marker({
position: {lat: parseFloat(villes[ville].lat), lng: parseFloat(villes[ville].lon)},
title: villes[ville].nomVille,
map: map
});
// Nous créons la bulle d'information pour le marqueur qui vient d'être créé
// Nous définissons son contenu (content) et ses dimensions maximales
var popup = new google.maps.InfoWindow({
content: villes[ville].nomVille,
maxWidth: 300,
maxHeight:100
});
// Nous activons l'écouteur d'évènement "click" sur notre marqueur
google.maps.event.addListener(marker, "click", function() {
// Si une bulle est déjà ouverte
if (currentPopup != null) {
// On la ferme
currentPopup.close();
// On vide la variable
currentPopup = null;
}
// On ouvre la bulle correspondant à notre marqueur
popup.open(map, marker);
// On enregistre cette bulle dans la variable currentPopup
currentPopup = popup;
});
// Nous activons l'écouteur d'évènement "closeclick" sur notre bulle
// pour surveiller le clic sur le bouton de fermeture
google.maps.event.addListener(popup, "closeclick", function() {
// On vide la variable
currentPopup = null;
});
}Les marqueurs personnalisés
L’API Google Maps permet de personnaliser les marqueurs affichés sur la carte.
Avant d’écrire du code, il sera nécessaire de créer les images correspondantes.
Dans l’exemple suivant, nous allons utiliser une image appelée « port.png », d’une taille de 64 par 64 pixels, qui sera accessible depuis le chemin http://localhost/carte/icons, ce qui donnera un résultat comme celui ci-dessous.
Voici le code à modifier dans la fonction createMarkers.
function createMarker(ville, villes) {
// Nous définissons le dossier qui contiendra les marqueurs
var iconBase = 'http://localhost/carte/icons/';
// Nous définissons l'icône à utiliser pour le marqueur, sa taille affichée (scaledSize),
// Sa position (origin) et le décalage de son ancrage (anchor)
var icon = {url: iconBase + "port.png",scaledSize: new google.maps.Size(50, 50), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(25, 50)};
var marker = new google.maps.Marker({
position: {lat: parseFloat(villes[ville].lat), lng: parseFloat(villes[ville].lon)},
// L'icône est ajoutée au marqueur
icon: icon,
title: villes[ville].nomVille,
map: map
});
var popup = new google.maps.InfoWindow({
content: villes[ville].nomVille,
maxWidth: 300,
maxHeight:100
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
//map.panTo(center);
currentPopup = null;
});
}Le regroupement de marqueurs
Lorsque de nombreux marqueurs se trouvent sur une carte, il peut être nécessaire de les regrouper pour faciliter sa lecture, ceux-ci apparaissant séparés lorsque le zoom le permet.
Les groupes de marqueurs s’appellent des « clusters ».
Comme pour les marqueurs, nous allons devoir créer des images correspondant aux différents clusters.
Pour pouvoir utiliser cette fonctionnalité, nous allons devoir faire appel à une bibliothèque appelée « markerclusterer ».
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>Une fois cette bibliothèque ajoutée, quelques modifications seront nécessaires dans notre code.
Nous allons déclarer 2 nouvelles variables globales.
// Variable qui contiendra l'instance de notre bibliothèque
var markerClusterer ;
// Variable qui contiendra le tableau de nos marqueurs
var markers = [];Il sera également nécessaire de créer l’instance du système de clusters dans la fonction initMap, juste après avoir créé la carte.
// Création de l'instance du système de clusters
markerClusterer = new MarkerClusterer(map, markers, {
// Chemin d'accès à nos images
// ATTENTION : le /m de fin correspond au 1er caractère du nom de nos fichiers
imagePath: 'http://localhost/carte/clusters/m'
});Puis, enfin, nous modifions notre fonction createMarkers pour ajouter chaque marqueur au système de clusters.
// Ajout des coordonnées du marqueur au tableau
markers.push("{lat: "+lat+", lng: "+lon+"}");
// Ajout du marqueur au système de clusters
markerClusterer.addMarker(marker);
// Ces deux lignes se trouvent juste au dessus de
// var popup = new google.maps.InfoWindow({Voilà, bonne continuation
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat
