Zoom automatique avec Fitbounds

La méthode fitBounds permet d’ajuster automatiquement le zoom de la carte afin que celle-ci affiche l’ensemble des markers de la map. Il est nécessaire de déclarer l’objet map avant l’appel à cette méthode.

Dans cet exemple, un tableau contenant des points est déclaré puis pour chacun de ces points, les limites de la carte (bounds) sont adaptées afin que le point soit visible sur la map grâce à la méthode extend.

En appliquant la méthode fitBounds à l’objet map, tous les markers seront alors inclus dans la vue. Le niveau de zoom sera automatiquement ajusté.

cliquez ici pour voir l’exemple

<script type="text/javascript">

   /* Déclaration du centre de la map */ 
   var latlng = new google.maps.LatLng(48.8566667, 2.3509871); // Paris

   /* Déclaration de l'objet qui définira les limites de la map */ 
   var bounds = new google.maps.LatLngBounds();

   /* Déclaration et remplissage du tableau qui contiendra nos points, objets LatLng. */
   var myPoints = [];
   myPoints.push( new google.maps.LatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push( new google.maps.LatLng(48.8123155, 2.2381535)); // Meudon
   myPoints.push( new google.maps.LatLng(48.3906042, -4.4869013)); // Brest
   myPoints.push( new google.maps.LatLng(50.6371834, 3.0630174)); // Lille

   /* Déclaration des options de la map */ 
   var options = {
    /*zoom : 7,
    center: latlng, */
    //  ici, ces 2 valeurs ne sont plus utiles car calculées automatiquement
    mapTypeId: google.maps.MapTypeId.ROADMAP
   }

   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
   var myDiv = document.getElementById('map');

   /* Chargement de la carte avec un type ROADMAP */
   var map = new google.maps.Map(myDiv,options);

   /* Boucle sur les points afin d'ajouter les markers à la map
   et aussi d'étendre ses limites (bounds) grâce à la méthode extend */ 
   for(var i = 0; i < myPoints.length; i++){
    bounds.extend(myPoints[i]);
    var thisMarker = addThisMarker(myPoints[i],i);
    thisMarker.setMap(map);
   }

   /* Ici, on ajuste le zoom de la map en fonction des limites  */ 
   map.fitBounds(bounds);

   /* Fonction qui affiche un marker sur la carte */ 
   function addThisMarker(point,m){
    var marker = new google.maps.Marker({position: point});
    return marker;
   }         

</script>