カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

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

この記事は最終更新日から1年以上経過しています。

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);
この記事がお役に立ちましたらシェアお願いします
4,747 views

コメントを残す

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