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

Bounds, Carte, Google Maps, Javascript, Markers, Zoom

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);
}

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

1 2	var map; var markers = [];

Ensuite instanciez votre carte :

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

1	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();

$.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);
}