web-dev-qa-db-fra.com

Zoomez et centrez une carte Google en fonction de ses marqueurs (API JavaScript V3)

Je pense que le titre est suffisant, je ne vois même pas comment faire cela pour les API V2 et V1: /

Merci :)

javascriptgoogle-mapsgoogle-maps-api-3
32
Calou

Comme les autres réponses l'ont suggéré, la méthode fitBounds() devrait faire l'affaire.

Prenons l'exemple suivant, qui générera 10 points aléatoires sur le nord-est des États-Unis et appliquera la méthode fitBounds():

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps LatLngBounds.extend() Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   var map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeId: google.maps.MapTypeId.TERRAIN
   });

   var markerBounds = new google.maps.LatLngBounds();

   var randomPoint, i;

   for (i = 0; i < 10; i++) {
     // Generate 10 random points within North East USA
     randomPoint = new google.maps.LatLng( 39.00 + (Math.random() - 0.5) * 20, 
                                          -77.00 + (Math.random() - 0.5) * 20);

     // Draw a marker for each random point
     new google.maps.Marker({
       position: randomPoint, 
       map: map
     });

     // Extend markerBounds with each random point.
     markerBounds.extend(randomPoint);
   }

   // At the end markerBounds will be the smallest bounding box to contain
   // our 10 random points

   // Finally we can call the Map.fitBounds() method to set the map to fit
   // our markerBounds
   map.fitBounds(markerBounds);

   </script> 
</body> 
</html>

En actualisant cet exemple plusieurs fois, aucun marqueur ne sort jamais de la fenêtre d'affichage:

fitBounds demo

74
Daniel Vassallo

Voici le chemin:

map.fitBounds(bounds);
map.setCenter(bounds.getCenter());

limites est un tableau de coordonnées (marqueurs). Chaque fois que vous placez un marqueur, faites quelque chose comme:

bounds.extend(currLatLng);
7
Klark

Le zoom central dépend d'un seul marqueur

var myCenter=new google.maps.LatLng(38.8106813,-89.9600172);
var map;
var marker;
var mapProp;
function initialize()
{
    mapProp = {
        center:myCenter,
        zoom:8,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    map=new google.maps.Map(document.getElementById("map"),mapProp);

    marker=new google.maps.Marker({
        position:myCenter,
        animation:google.maps.Animation.BOUNCE,
        title:"400 St. Louis Street Edwardsville, IL 62025"
    });

    marker.setMap(map);
    google.maps.event.addListener(map, "zoom_changed", function() {
        map.setCenter(myCenter);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
1
S.Elavarasan

Calculer le bon zoom pour afficher tous vos marqueurs n'est pas anodin. Mais il y a une fonction pour cela: GMap.fitBounds() - vous définissez une limite (par exemple, les points les plus extrêmes de toutes vos coordonnées de marqueur) et elle définit la carte en conséquence. Voir par exemple fitbounds () dans Google maps api V3 ne correspond pas aux limites (la réponse!) pour un bon exemple.

0
Nicolas78