Pas à Pas – API Google Maps Javascript « InfoWindow », marqueurs personnalisés et clusters

10 décembre 2017 - : Javascript API Tutoriel - : 5 commentaires - Tutoriel

Série API Javascript de Google Maps

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

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Pascal M a écrit le 14 mai 2020 à 09:22

Comment optenir les petites images utilisés pour les Clusterer et comment indiqer l'usage de chacune d'elle en fonction du nombre des points confinés sur un endroit ??? comme indiqué dans l'image de presentation au dessus des markers en Clusterer...

Répondre

Vianney a écrit le 23 mars 2020 à 15:38

Bonjour
Petite question liée à l'application Googlemaps

Nous avond éveloppé une base de données caue-observatoire.fr liée aus réalisations architecrurales en France

depuis qq mois, Google n'autorise plus l'affichage des localisations dûs à leur neuvelle politique tarifaire 

Avant d'activer la carte bleue ou basculer vers Openstreetmaps, nous aimerions savoir si la cartographie est utilisée

Bref comment voir les stats d'utilisation de la fonctionnalité de géolocalaliation

je n'arrive pas à trouver cela dans l'outil googlenalytics

Merci bien et désolé si je suis un peu hors sujet

Répondre

Nouvelle-Techno.fr a répondu le 24 mars 2020 à 08:30

Bonjour,

En théorie, si Google Analytics est activé, les visites sur la page de cartograhtie devraient être collectées.

Répondre

Vaiarii a écrit le 18 février 2020 à 08:56

Merci pour tes super tutos ! :D 

Répondre

Nouvelle-Techno.fr a répondu le 24 mars 2020 à 08:30

Je t'en prie :-)

Répondre

Obtenir de l'aide

Il n'est plus possible d'ajouter de commentaires.

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat