Google Maps : dézoomer jusqu’à voir tous les marqueurs

Avec l’API Google Maps, il est facile d’afficher un ou plusieurs marqueurs interactifs sur une carte.

Voici une fonction qui permet de visualiser tous les marqueurs de la carte sur le même écran.

Fonction

var gmap_markers_bounds = function(){
	var bounds = new google.maps.LatLngBounds();
	if(markers.length){
		for(i=0; i<markers.length; i++){
			bounds.extend(markers[i].getPosition());
		}
	}
	map.fitBounds(bounds);
}

 

Exemple détaillé

Pour cela, il vous faut (au moins) les deux variables globales map et markers, qui seront respectivement l’instance de la carte et un tableau des marqueurs affichés.

var map;
var markers = [];

Ensuite instanciez votre carte :

map = new google.maps.Map(document.getElementById('map'), {});

Obtenez la liste des points d’intérêt à ajouter :

$.each(data, function(index, elem){
	var marker = new google.maps.Marker({
		position   : new google.maps.LatLng(elem.lat, elem.lng),
		map        : map
	});
	markers.push(marker);
});
gmap_markers_bounds();

Chaque point à afficher est ajouté à la suite du tableau markers, puis la fonction permettant le recentrage est appelée.

var gmap_markers_bounds = function(){
	var bounds = new google.maps.LatLngBounds();
	if(markers.length){
		for(i=0; i<markers.length; i++){
			bounds.extend(markers[i].getPosition());
		}
	}
	map.fitBounds(bounds);
}

Cette fonction tient compte de tous les marqueurs du tableau global markers, et étend l’affichage de la carte map de manière à ce qu’ils soient tous présents dans le cadre.