更新日: 2018-03-29 (木) 17:35:49 (81d)

:Javascript

google.maps.MapのfitBounds(bounds:LatLngBounds)というメソッドを使うと、指定した複数座標すべてに合わせて表示領域を自動調整します。

具体的には下記のようなコードになります。

var map = new google.maps.Map();
// 表示領域を生成します。
var bounds = new google.maps.LatLngBounds();
// 地図表示領域をマーカー位置に合わせて拡大します。
bounds.extend (new google.maps.LatLng(35.46946, 139.621542));
bounds.extend (new google.maps.LatLng(35.466188, 139.622715));
// 地図表示領域の変更を反映します。
map.fitBounds (bounds);

以下、マーカーを設置して、マーカーの座標にあわせて表示領域を自動調整するサンプルコードになります。

<!DOCTYPE html>
<head> 
  <meta charset="UTF-8" /> 
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<div id="map" style="width:800px; height:600px;" />
<script type="text/javascript">
  var locations = [
     ['(株)オンラインコンサルタント', 35.46946, 139.621542],
     ['横浜駅', 35.466188, 139.622715],
     ['ランドマークタワー', 35.454948, 139.631429],
     ['横浜中華街', 35.443407, 139.642948],
     ['山下公園', 35.445877, 139.649555]
  ];

  var map = new google.maps.Map(document.getElementById('map'));
  var infowindow = new google.maps.InfoWindow();
  
  // 表示領域を生成します。
  var bounds = new google.maps.LatLngBounds();
  var marker;

  for (var i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });
    // 地図表示領域をマーカー位置に合わせて拡大します。
    bounds.extend (marker.position);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
  
  // 地図表示領域の変更を反映します。
  map.fitBounds (bounds);
</script>
  • とても参考になりました! -- くーた? 2013-10-30 (水) 15:10:39

選択肢 投票
このページの情報は役に立った 8  
このページの情報は役に立たなかった 0  
どちらでもない 0  
このページが参照された数
Total: 7357, 今日: 7, 昨日: 0

でじうぃきは神奈川県横浜市の位置情報システム・スマホアプリ開発の株式会社オンラインコンサルタントが運営しています。
投稿
トップ   このページを編集する 再編集不可にする 差分 バックアップ 添付 複製 名前変更 リロード   新しいページを作る 一覧 検索する 最新の更新   ヘルプ   最終更新のRSS
Last-modified: 2018-03-29 (木) 17:35:49 (81d)