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

10 décembre 2017 - : Pas de commentaire

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

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;
	});
}
Langage : Javascript

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;
	});
}
Langage : Javascript

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>
Langage : HTML

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 = [];
Langage : Javascript

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'
});
Langage : Javascript

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({
Langage : Javascript

Voilà, bonne continuation

Commentaires

Pas encore de commentaire

Laisser un commentaire