Tutoriel : Comment centrer et zoomer une carte sur plusieurs marqueurs ?
Cet exemple vous montre comment centrer une carte automatiquement sur plusieurs marqueurs.
Tout d'abord, on crée un rectangle virtuel nommé zoneMarqueurs à l'aide de la classe LatLngBounds.
Celui-ci va nous permettre de connaître la zone dans laquelle l'ensemble des marqueurs seront contenus.
var zoneMarqueurs = new google.maps.LatLngBounds();
Les coordonnées des marqueurs sont placées dans le tableau nommé tableauMarqueursCes coordonnées sont enregistrées dans le tableau :
- soit sous la forme d'un
objet littéralcontenant la latitude ( propriété ayant pour nom :lat) et la longitude ( propriété ayant pour nom :lng) du marqueur{ lat:47.325371, lng:1.044195 } - soit sous la forme d'un tableau contenant la latitude et la longitude du marqueur séparées par une virgule
[ 47.325371, 1.044195 ]
//*********************************** ************************************
// Tableau d'objets litérraux * * Tableau de tableaux *
//*********************************** ************************************
var tableauMarqueurs = [ // var tableauMarqueurs = [
{ lat:47.325371, lng:1.044195 }, // [ 47.325371, 1.044195 ],
{ lat:47.345627, lng:0.894806 }, // [ 47.345627, 0.894806 ],
{ lat:47.334488, lng:0.944717 }, // [ 47.334488, 0.944717 ],
{ lat:47.331615, lng:1.129307 }, // [ 47.331615, 1.129307 ],
{ lat:47.270981, lng:1.375158 }, // [ 47.270981, 1.375158 ],
{ lat:47.290585, lng:1.346169 }, // [ 47.290585, 1.346169 ],
{ lat:47.330112, lng:0.995293 }, // [ 47.330112, 0.995293 ],
{ lat:47.339272, lng:1.175795 }, // [ 47.339272, 1.175795 ],
{ lat:47.307144, lng:1.318617 }, // [ 47.307144, 1.318617 ],
{ lat:47.328671, lng:1.288072 }, // [ 47.328671, 1.288072 ],
{ lat:47.344994, lng:1.212090 }, // [ 47.344994, 1.212090 ],
{ lat:47.357315, lng:0.831850 }, // [ 47.357315, 0.831850 ],
{ lat:47.342327,lng: 1.245060 } // [ 47.342327, 1.245060 ]
]; // ];
Ensuite, à l'aide d'une boucle for ou forEach on parcours chaque ligne du tableau pour :
- extraire la latitude et la longitude de chaque marqueur,
depuis le tableau d'objets littéraux
tableauMarqueurs://***************************** ***************************************** // Notation classique * * Ou si on utilise la notation pointée * //***************************** ***************************************** var latlng = tableauMarqueurs[i], // var latlng = tableauMarqueurs[i], latitude = latlng["lat"], // latitude = latlng.lat, longitude = latlng["lng"]; // longitude = latlng.lng;ou depuis le tableau de tableaux
tableauMarqueurs:var latlng = tableauMarqueurs[i], latitude = latlng[0], longitude = latlng[1];
- créer et afficher le marqueur sur la carte via la classe
Marker,var optionsMarqueur = { map: maCarte, position: new google.maps.LatLng( latitude, longitude ) }; var marqueur = new google.maps.Marker( optionsMarqueur ); - mettre à jour le rectangle virtuel nommé
zoneMarqueurs.zoneMarqueurs.extend( marqueur.getPosition() );
Enfin, une fois la boucle terminée, la méthode fitBounds() de la classe Map permet d'optimiser l'affichage de la carte (centre et niveau de zoom optimum) afin que le rectangle virtuel nommé zoneMarqueurs soit totalement visible sur la carte.
maCarte.fitBounds(zoneMarqueurs);Au final, on obtient donc avec une boucle utilisant for :
function initialisation() {
//********************************** ************************************
// Tableau d'objets litérraux * * Tableau de tableaux *
//********************************** ************************************
var tableauMarqueurs = [ // var tableauMarqueurs = [
{ lat:47.325371, lng:1.044195 }, // [ 47.325371, 1.044195 ],
{ lat:47.345627, lng:0.894806 }, // [ 47.345627, 0.894806 ],
{ lat:47.334488, lng:0.944717 }, // [ 47.334488, 0.944717 ],
{ lat:47.331615, lng:1.129307 }, // [ 47.331615, 1.129307 ],
{ lat:47.270981, lng:1.375158 }, // [ 47.270981, 1.375158 ],
{ lat:47.290585, lng:1.346169 }, // [ 47.290585, 1.346169 ],
{ lat:47.330112, lng:0.995293 }, // [ 47.330112, 0.995293 ],
{ lat:47.339272, lng:1.175795 }, // [ 47.339272, 1.175795 ],
{ lat:47.307144, lng:1.318617 }, // [ 47.307144, 1.318617 ],
{ lat:47.328671, lng:1.288072 }, // [ 47.328671, 1.288072 ],
{ lat:47.344994, lng:1.212090 }, // [ 47.344994, 1.212090 ],
{ lat:47.357315, lng:0.831850 }, // [ 47.357315, 0.831850 ],
{ lat:47.342327,lng: 1.245060 } // [ 47.342327, 1.245060 ]
]; // ];
var zoneMarqueurs = new google.maps.LatLngBounds();
var optionsCarte = {
zoom: 8,
center: { lat: 47.389982, lng: 0.688877 }
}
var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
for( var i = 0, I = tableauMarqueurs.length; i < I; i++ ) {
//********************************** ************************************
// Si tableau d'objets litérraux * * Si tableau de tableaux *
//********************************** ************************************
var latlng = tableauMarqueurs[i], // var latlng = tableauMarqueurs[i],
latitude = latlng["lat"], // latitude = latlng[0],
longitude = latlng["lng"]; // longitude = latlng[1];
var optionsMarqueur = {
map: maCarte,
position: new google.maps.LatLng( latitude, longitude )
};
var marqueur = new google.maps.Marker( optionsMarqueur );
zoneMarqueurs.extend( marqueur.getPosition() );
}
maCarte.fitBounds( zoneMarqueurs );
}
ou, autre écriture possible, en utilisant forEach pour faire une boucle :
function initialisation() {
//*********************************** ************************************
// Tableau d'objets litérraux * * Tableau de tableaux *
//*********************************** ************************************
var tableauMarqueurs = [ // var tableauMarqueurs = [
{ lat:47.325371, lng:1.044195 }, // [ 47.325371, 1.044195 ],
{ lat:47.345627, lng:0.894806 }, // [ 47.345627, 0.894806 ],
{ lat:47.334488, lng:0.944717 }, // [ 47.334488, 0.944717 ],
{ lat:47.331615, lng:1.129307 }, // [ 47.331615, 1.129307 ],
{ lat:47.270981, lng:1.375158 }, // [ 47.270981, 1.375158 ],
{ lat:47.290585, lng:1.346169 }, // [ 47.290585, 1.346169 ],
{ lat:47.330112, lng:0.995293 }, // [ 47.330112, 0.995293 ],
{ lat:47.339272, lng:1.175795 }, // [ 47.339272, 1.175795 ],
{ lat:47.307144, lng:1.318617 }, // [ 47.307144, 1.318617 ],
{ lat:47.328671, lng:1.288072 }, // [ 47.328671, 1.288072 ],
{ lat:47.344994, lng:1.212090 }, // [ 47.344994, 1.212090 ],
{ lat:47.357315, lng:0.831850 }, // [ 47.357315, 0.831850 ],
{ lat:47.342327,lng: 1.245060 } // [ 47.342327, 1.245060 ]
]; // ];
var zoneMarqueurs = new google.maps.LatLngBounds();
var optionsCarte = {
zoom: 8,
center: { lat: 47.389982, lng: 0.688877 }
}
var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
tableauMarqueurs.forEach( function(latlng){
//*********************************** ************************************
// Si tableau d'objets litérraux * * Si tableau de tableaux *
//*********************************** ************************************
var latitude = latlng.lat, // var latitude = latlng[0],
longitude = latlng.lng; // longitude = latlng[1];
var optionsMarqueur = {
map: maCarte,
position: new google.maps.LatLng( latitude, longitude )
};
var marqueur = new google.maps.Marker( optionsMarqueur );
zoneMarqueurs.extend( marqueur.getPosition() );
}
maCarte.fitBounds( zoneMarqueurs );
}
Carte : centrer la carte Google Maps sur plusieurs marqueurs à l'aide de fitBounds()
Le rectangle bleu affiché sur la carte permet de visualiser la zone rectangulaire virtuelle
Le code fournit ci-dessus n'inclut pas l'affichage de ce rectangle.
zoneMarqueurs contenant tous les marqueurs.Le code fournit ci-dessus n'inclut pas l'affichage de ce rectangle.
Code : centrer la carte Google Maps sur plusieurs marqueurs à l'aide de fitBounds()
Code avec for et ou chaque marqueur est placé dans un objet littéral
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8" />
<title>Titre de votre page</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0
}
#EmplacementDeMaCarte {
height: 100%
}
</style>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu\'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
<script>
function initialisation() {
var tableauMarqueurs = [
{ lat:47.325371, lng:1.044195 },
{ lat:47.345627, lng:0.894806 },
{ lat:47.334488, lng:0.944717 },
{ lat:47.331615, lng:1.129307 },
{ lat:47.270981, lng:1.375158 },
{ lat:47.290585, lng:1.346169 },
{ lat:47.330112, lng:0.995293 },
{ lat:47.339272, lng:1.175795 },
{ lat:47.307144, lng:1.318617 },
{ lat:47.328671, lng:1.288072 },
{ lat:47.344994, lng:1.212090 },
{ lat:47.357315, lng:0.831850 },
{ lat:47.342327,lng: 1.245060 }
];
var zoneMarqueurs = new google.maps.LatLngBounds();
var optionsCarte = {
zoom: 8,
center: { lat: 47.389982, lng: 0.688877 }
}
var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
for( var i = 0, I = tableauMarqueurs.length; i < I; i++ ) {
var latitude = latlng.lat,
longitude = latlng.lng;
var optionsMarqueur = {
map: maCarte,
position: new google.maps.LatLng( latitude, longitude )
};
var marqueur = new google.maps.Marker( optionsMarqueur );
zoneMarqueurs.extend( marqueur.getPosition() );
}
maCarte.fitBounds( zoneMarqueurs );
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCleAPIGoogleMapsIci&callback=initialisation"></script>
</body>
</html>
Code avec for et ou chaque marqueur est placé dans un tableau
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8" />
<title>Titre de votre page</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0
}
#EmplacementDeMaCarte {
height: 100%
}
</style>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu\'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCleAPIGoogleMapsIci&callback=initialisation"></script>
<script>
function initialisation() {
var tableauMarqueurs = [
[ 47.325371, 1.044195 ],
[ 47.345627, 0.894806 ],
[ 47.334488, 0.944717 ],
[ 47.331615, 1.129307 ],
[ 47.270981, 1.375158 ],
[ 47.290585, 1.346169 ],
[ 47.330112, 0.995293 ],
[ 47.339272, 1.175795 ],
[ 47.307144, 1.318617 ],
[ 47.328671, 1.288072 ],
[ 47.344994, 1.212090 ],
[ 47.357315, 0.831850 ],
[ 47.342327, 1.245060 ]
];
var zoneMarqueurs = new google.maps.LatLngBounds();
var optionsCarte = {
zoom: 8,
center: { lat: 47.389982, lng: 0.688877 }
}
var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
for( var i = 0, I = tableauMarqueurs.length; i < I; i++ ) {
var latitude = latlng[0],
var optionsMarqueur = {
map: maCarte,
longitude = latlng[1];
position: new google.maps.LatLng( latitude, longitude )
};
var marqueur = new google.maps.Marker( optionsMarqueur );
zoneMarqueurs.extend( marqueur.getPosition() );
}
maCarte.fitBounds( zoneMarqueurs );
}
</script>
</body>
</html>
Code avec forEach et ou chaque marqueur est placé dans un objet littéral
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8" />
<title>Titre de votre page</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0
}
#EmplacementDeMaCarte {
height: 100%
}
</style>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu\'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
<script>
function initialisation() {
var tableauMarqueurs = [
{ lat:47.325371, lng:1.044195 },
{ lat:47.345627, lng:0.894806 },
{ lat:47.334488, lng:0.944717 },
{ lat:47.331615, lng:1.129307 },
{ lat:47.270981, lng:1.375158 },
{ lat:47.290585, lng:1.346169 },
{ lat:47.330112, lng:0.995293 },
{ lat:47.339272, lng:1.175795 },
{ lat:47.307144, lng:1.318617 },
{ lat:47.328671, lng:1.288072 },
{ lat:47.344994, lng:1.212090 },
{ lat:47.357315, lng:0.831850 },
{ lat:47.342327,lng: 1.245060 }
];
var zoneMarqueurs = new google.maps.LatLngBounds();
var optionsCarte = {
zoom: 8,
center: { lat: 47.389982, lng: 0.688877 }
}
var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
tableauMarqueurs.forEach( function(latlng) {
var latitude = latlng.lat,
longitude = latlng.lng;
var optionsMarqueur = {
map: maCarte,
position: new google.maps.LatLng( latitude, longitude )
};
var marqueur = new google.maps.Marker( optionsMarqueur );
zoneMarqueurs.extend( marqueur.getPosition() );
} );
maCarte.fitBounds( zoneMarqueurs );
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCleAPIGoogleMapsIci&callback=initialisation"></script>
</body>
</html>