地図の拡大がfitBoundsコール後に機能しない

Question

なぜこれが機能しないのかわかりません。私は円の境界に従って境界を設定する必要がありますが、十分に拡大していないので余分な余白があるので、fitBoundsの後にズームを増やしてみてください。何もしません。

???

LatLngDとLatLngOはグローバルで、別の場所に設定されています。

function initializeMap() { 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 10, 
     center: LatLngO, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoomControl: false 
    }); 
    setRadius(); 
} 

function setRadius() { 
    var distance = google.maps.geometry.spherical.computeDistanceBetween(LatLngO, LatLngD); 
    circle = new google.maps.Circle({ 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: LatLngO, 
     radius: distance, 
    }); 
    map.fitBounds(circle.getBounds()); 
    map.setZoom(map.getZoom() + 1); 
} 

Answer 1

GoogleマップのJavaScript API v3には、イベントベースです。新しいズームレベルが有効になるまで待ってから1ずつ増やす必要があります。

map.fitBounds(circle.getBounds()); 
google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    map.setZoom(map.getZoom() + 1); 
}); 

（addListenerOnceアクションが一度、イベントリスナーを削除実行）

proof of concept fiddle

コードスニペット：

var LatLngO = new google.maps.LatLng(42, -72); 
 
var LatLngD = new google.maps.LatLng(42.5, -72.7); 
 

 
function initializeMap() { 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    zoom: 10, 
 
    center: LatLngO, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    zoomControl: false 
 
    }); 
 
    setRadius(); 
 
} 
 

 
function setRadius() { 
 
    var distance = google.maps.geometry.spherical.computeDistanceBetween(LatLngO, LatLngD); 
 
    circle = new google.maps.Circle({ 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    map: map, 
 
    center: LatLngO, 
 
    radius: distance, 
 
    }); 
 
    map.fitBounds(circle.getBounds()); 
 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
 
    map.setZoom(map.getZoom() + 1); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initializeMap);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas"></div>

Answer 2

これは通常のマップが初期化された後に呼び出されidleイベントを使用して行われ、かつ、適正な境界を設定されている：

var listener = google.maps.event.addListener(map, "idle", function() { 
    map.setZoom(map.getZoom() - 1); 
    google.maps.event.removeListener(listener); 
});