Categories
SugiBlog ホームページ制作・システム開発

複数のマーカーを地図内に全て表示させるには

GoogleMap(v3)にて、複数追加したマーカーが
全て表示されるように位置と拡大比率を自動調整する機能があります。

以下のメソッドを使います。
google.maps.Map::fitBounds(bounds:LatLngBounds)

マップオブジェクトを生成します。

var map = new google.maps.Map(document.getElementById("map"));

表示領域を生成します。

var bounds = new google.maps.LatLngBounds();

表示領域にマーカーの位置を追加

bounds.extend(new google.maps.LatLng(35.705506, 139.752048)); //東京ドーム
bounds.extend(new google.maps.LatLng(35.633232, 139.882006)); //東京ディズニーランド
bounds.extend(new google.maps.LatLng(35.710349, 139.811346)); //東京スカイツリー

表示領域を地図に反映させます。

map.fitBounds (bounds);
989 views

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*