API Google Maps: Trouver un zoom généré dynamiquement et centrer?

Question

Je suis horrible à javascript et débogage (php est un fav). Je génère dynamiquement une liste à afficher sur la carte et maintenant je dois trouver le centre des coordonnées, et effectuer un zoom arrière pour les afficher toutes. Voici le code que j'utilise, trouvé d'un autre membre SO.

var map = null; 
    var markerArray = []; //create a global array to store markers 
    var locations = [ 
     ['Bondi Beach', -33.890542, 151.274856, 4, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png'], 
     ['Coogee Beach', -33.923036, 151.259052, 5, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red05.png'], 
     ['Cronulla Beach', -34.028249, 151.157507, 3, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red03.png'], 
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red02.png'], 
     ['Maroubra Beach', -33.950198, 187.259302, 1, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png']]; 

    function initialize() { 
     var myOptions = { 
      zoom: 10, 
      center: new google.maps.LatLng(-33.80010128657071, 151.28747820854187), 
      mapTypeControl: true, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
      }, 
      navigationControl: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     google.maps.event.addListener(map, 'click', function() { 
      infowindow.close(); 
     }); 

     // Add markers to the map 
     // Set up markers based on the number of elements within the myPoints array 
     for (var i = 0; i < locations.length; i++) { 
      createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]); 
     } 

     mc.addMarkers(markerArray, true); 
    } 

    var infowindow = new google.maps.InfoWindow({ 
     size: new google.maps.Size(150, 50) 
    }); 

    function createMarker(latlng, myTitle, myNum, myIcon) { 
     var contentString = myTitle; 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: myIcon, 
      zIndex: Math.round(latlng.lat() * -100000) << 5, 
      title: myTitle 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(contentString); 
      infowindow.open(map, marker); 
     }); 

     markerArray.push(marker); //push local var marker into global array 
    } 

    window.onload = initialize; 

Il semble que c'est la fonctionnalité nécessaire (dans la réponse) Google Maps API: Calculate Center/Zoom of Polyline mais je ne sais pas comment le mettre en œuvre.

Answer 1

Essayez de travailler cette solution dans votre fonction initialize comme ceci:

function initialize() { 

    ... 

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

    google.maps.event.addListener(map, 'click', function() { 
     infowindow.close(); 
    }); 

    // instantiate the bounds object 
    var bounds = new google.maps.LatLngBounds(); 

    // Add markers to the map 
    // Set up markers based on the number of elements within the myPoints array 
    for (var i = 0; i < locations.length; i++) { 
     var locationLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 

     createMarker(locationLatLng, 
        locations[i][0], 
        locations[i][3], 
        locations[i][4]); 

     bounds.extend(locationLatLng); 
    } 

    map.fitBounds(bounds); 

    ... 
} 

Hope this helps