V2からv3のGoogleマップAPIに切り替えて、gMap.getBounds()
関数で問題が発生しました。
初期化後にマップの境界を取得する必要があります。
私のjavascriptコードは次のとおりです。
_
var gMap;
$(document).ready(
function() {
var latlng = new google.maps.LatLng(55.755327, 37.622166);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);
alert(gMap.getBounds());
}
);
_
そのため、gMap.getBounds()
が未定義であることを警告します。
クリックイベントでgetBounds値を取得しようとしましたが、うまく機能しますが、ロードマップイベントで同じ結果を取得できません。
また、ドキュメントがGoogle Maps API v2でロードされている間もgetBoundsは正常に機能しますが、V3では失敗します。
この問題を解決するのを手伝ってもらえますか?
V3 APIの初期の頃、getBounds()
メソッドは、正しい結果を返すために、マップタイルの読み込みを完了する必要がありました。ただし、今ではbounds_changed
イベント。tilesloaded
イベントの前でも発生します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps v3 - getBounds is undefined</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 350px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: new google.maps.LatLng(55.755327, 37.622166),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'bounds_changed', function() {
alert(map.getBounds());
});
</script>
</body>
</html>
GetBounds()のドキュメントによれば、少なくとも動作するはずです。それでも:
var gMap;
$(document).ready(function() {
var latlng = new google.maps.LatLng(55.755327, 37.622166);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);
google.maps.event.addListenerOnce(gMap, 'idle', function(){
alert(this.getBounds());
});
});
動作を確認してください こちら 。
idle
イベントはtilesloaded
イベントよりも早く呼び出されるため、Salmanのソリューションの方が優れていると言っていました。これは、すべてのタイルがロードされるのを待つからです。しかし、よく見ると、bounds_changed
はさらに早く呼び出され、境界を探しているので、より理にかなっています。 :)
私の解決策は次のとおりです。
google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
alert(this.getBounds());
});
ここでの他のコメントでは、「idle」よりも「bounds_changed」イベントを使用することをお勧めしますが、これは同意します。確かに、少なくとも開発マシンで「bounds_changed」の前に「idle」をトリガーするIE8では、getBoundsでnullへの参照が残ります。
ただし、「bounds_changed」イベントは、マップをドラッグすると継続的にトリガーされます。そのため、このイベントを使用してマーカーのロードを開始する場合、Webサーバーに負荷がかかります。
この問題に対する私のマルチブラウザソリューション:
google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
loadMyMarkers();
google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});
さて、手遅れかどうかはわかりませんが、ここにgmaps.jsプラグインを使用したソリューションがあります:
map = new GMaps({...});
// bounds loaded? if not try again after 0.5 sec
var check_bounds = function(){
var ok = true;
if (map.getBounds() === undefined)
ok = false;
if (! ok)
setTimeout(check_bounds, 500);
else {
//ok to query bounds here
var bounds = map.getBounds();
}
}
//call it
check_bounds();