Google Map API v3 – définir les limites et le centre

J'ai récemment changé pour Google Maps API V3. Je travaille sur un exemple simple qui trace des marqueurs à partir d'un tableau, mais je ne sais pas comment centrer et zoomer automatiquement en fonction des marqueurs.

J'ai cherché le net haut et bas, y compris la documentation de Google, mais je n'ai pas trouvé de réponse claire. Je sais que je pourrais simplement prendre une moyenne des coordonnées, mais comment configurer le zoom en conséquence?

function initialize() { var myOptions = { zoom: 10, center: new google.maps.LatLng(-33.9, 151.2), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); setMarkers(map, beaches); } var beaches = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.423036, 151.259052, 5], ['Cronulla Beach', -34.028249, 121.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.450198, 151.259302, 1] ]; function setMarkers(map, locations) { var image = new google.maps.MarkerImage('images/beachflag.png', new google.maps.Size(20, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32)); var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', new google.maps.Size(37, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32)); var lat = map.getCenter().lat(); var lng = map.getCenter().lng(); var shape = { coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; for (var i = 0; i < locations.length; i++) { var beach = locations[i]; var myLatLng = new google.maps.LatLng(beach[1], beach[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, title: beach[0], zIndex: beach[3] }); } } 

Oui, déclarez simplement votre nouvel objet de limites.

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

Ensuite, pour chaque marqueur, étendez votre objet de limites:

 bounds.extend(myLatLng); map.fitBounds(bounds); 

API: google.maps.LatLngBounds

Tout est trié – voir les dernières lignes pour le code – ( bounds.extend(myLatLng); map.fitBounds(bounds); )

 function initialize() { var myOptions = { zoom: 10, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions); setMarkers(map, beaches); } var beaches = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 161.259052, 5], ['Cronulla Beach', -36.028249, 153.157507, 3], ['Manly Beach', -31.80010128657071, 151.38747820854187, 2], ['Maroubra Beach', -33.950198, 151.159302, 1] ]; function setMarkers(map, locations) { var image = new google.maps.MarkerImage('images/beachflag.png', new google.maps.Size(20, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32)); var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', new google.maps.Size(37, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32)); var shape = { coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < locations.length; i++) { var beach = locations[i]; var myLatLng = new google.maps.LatLng(beach[1], beach[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, title: beach[0], zIndex: beach[3] }); bounds.extend(myLatLng); } map.fitBounds(bounds); } 

Ma suggestion pour google maps api v3 serait (ne pense pas que cela puisse être fait plus efficacement):

 gmap : { fitBounds: function(bounds, mapId) { //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];" if (bounds==null) return false; maps[mapId].fitBounds(bounds); } } 

Dans le résultat, vous rencontrerez tous les points dans les limites de votre fenêtre de carte.

L'exemple fonctionne parfaitement et vous pouvez facilement le consulter ici http://www.zemelapis.lt

Les réponses sont parfaites pour ajuster les limites des cartes pour les marqueurs, mais si vous souhaitez étendre les limites de Google Maps pour des formes comme les polygones et les cercles, vous pouvez utiliser les codes suivants:

Pour les cercles

 bounds.union(circle.getBounds()); 

Pour les polygones

 polygon.getPaths().forEach(function(path, index) { var points = path.getArray(); for(var p in points) bounds.extend(points[p]); }); 

Pour les rectangles

 bounds.union(overlay.getBounds()); 

Pour Polylines

 var path = polyline.getPath(); var slat, blat = path.getAt(0).lat(); var slng, blng = path.getAt(0).lng(); for(var i = 1; i < path.getLength(); i++) { var e = path.getAt(i); slat = ((slat < e.lat()) ? slat : e.lat()); blat = ((blat > e.lat()) ? blat : e.lat()); slng = ((slng < e.lng()) ? slng : e.lng()); blng = ((blng > e.lng()) ? blng : e.lng()); } bounds.extend(new google.maps.LatLng(slat, slng)); bounds.extend(new google.maps.LatLng(blat, blng)); 

La méthode setCenter () s'applique toujours à la dernière version de l'API Maps pour Flash où fitBounds () n'existe pas.

Utilisez ci-dessous un,

Map.setCenter (bounds.getCenter (), map.getBoundsZoomLevel (bornes));