Google Maps JS API - getBounds（）が常に定義されていない

Question

私はマップをレンダリングし、その上に位置マーカーのセットを表示するためにGoogle Maps Javascript APIを使用しています。場所を取得するAJAX要求を通じて返されるデータの量を減らすために、私は、可視の場所だけを返す要求で境界ボックスの座標を送信しています。

私は現在の線に沿ってコードを持っている：私はマップが移動したときにgetBounds作品は（データを取得するためにサーバーに送信されている）Map.boundsを更新する必要があります方法を理解するよう

google.maps.event.addListener(Map.map, "bounds_changed", function() { 
    Map.bounds.north = Map.map.getBounds().getNorthEast().lat(); 
    Map.bounds.east = Map.map.getBounds().getNorthEast().lng(); 
    Map.bounds.south = Map.map.getBounds().getSouthWest().lat(); 
    Map.bounds.west = Map.map.getBounds().getSouthWest().lng(); 
    }); 

を。しかし、地図を作成するときにMap.boundsを設定することができないため、ロケーションの初期リクエストが失敗します。 Map.map.getBoundsがgoogle.maps.event.addListener以外の場合は、getBoundsが定義されていないというエラーが表示されます。ユーザーがマップを読み込む前に、マップがロードされたら境界を設定するにはどうすればよいですか？

（私も同じ結果と"bounds_changed"に加えて"idle"を試してみました）

Answer 1

GoogleマップのJavaScript APIは、イベントベースです。最初のbounds_changedイベントが発生する前にマップ上でgetBoundsを呼び出すと、動作しません。それが最初に設定された後はいつでも動作します。

例：

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 42, 
 
     lng: -72 
 
    }, 
 
    zoom: 8 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" value="get bounds" onclick="document.getElementById('bounds').innerHTML = map.getBounds().toUrlValue(6);" /> 
 
<div id="bounds"></div> 
 
<div id="map"></div>