Google Maps：ダイナミックマーカーのセンタリング

Question

ダイナミックに追加されたマーカーの中央にマップを配置しようとしています。マーカー自体はマップに完全に追加されますが、マップは太平洋の真中を中心にしています。私は適切な順序で境界を開始するとは思わない。ここで

は私のマップコードです：

<script> 

    var map, bounds, locations, markers; 

    function initMap() { 

     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: {lat: -28.024, lng: 140.887} 
     }); 

     google.maps.event.addListenerOnce(map, 'idle', function() { 
      bounds = new google.maps.LatLngBounds(); 
      loadAllProperties(); 
     }); 

    } 

    function loadAllProperties() { 

     $.post("/wp-admin/admin-ajax.php", {action: 'get_all_properties'}, function(result) { 
      locations = JSON.parse(result); 
      createMarkers(); 
     }); 

    } 

    function createMarkers() { 

     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 

     markers = locations.map(function(location, i) { 

      return new google.maps.Marker({ 
       position: location, 
       label: labels[i % labels.length] 
      }); 

      bounds.extend(location); 

     }); 

     map.fitBounds(bounds); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
    } 

</script> 

Answer 1

境界は常に空ですので、あなたが...境界を拡張する前に、マーカーを戻ってきています。最初に範囲を拡張するコードを並べ替えます。

function createMarkers() { 
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
    markers = locations.map(function(location, i) { 
     bounds.extend(location); 
     return new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
     }); 
    }); 
    map.fitBounds(bounds); 
    // Add a marker clusterer to manage the markers. 
    var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
}