Googleマップ API•テック

Google Maps（グーグルマップ）のfitBoundsでズームレベル／表示範囲を調整する方法

2021年1月23日 by single コメントはまだありません

グーブルマップを表示する際、中心地やズームレベルをうまく調整しないと、マップ上に配置したオブジェクトがうまく表示されないことがあります。その調整方法を説明します。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Google Maps（グーグルマップ）のfitBoundsでズームレベル／表示範囲を調整する方法

サンプル


HTMLコード


<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Sample Map</title>
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:80%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script>
      var map;
      var marker1;
      var marker2;
      var marker3;
      var marker4;

      var sensoJi;
      var tochoOfiice;
      var tokyoTower;
      var sunshineCity;

      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         var mapOptions = {
           zoom: 16,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         sensoJi = new google.maps.LatLng(35.71476961942842, 139.79665503299157);

         marker1 = new google.maps.Marker({
             position: sensoJi,
             map:map
         });

         tochoOfiice = new google.maps.LatLng(35.68963651074607, 139.69209905524258);


         marker2 = new google.maps.Marker({
             position: tochoOfiice,
             map:map
         });


         tokyoTower = new google.maps.LatLng(35.65858371187044, 139.74543228360366);

         marker3 = new google.maps.Marker({
            position: tokyoTower,
             map:map
         });

         sunshineCity = new google.maps.LatLng(35.72896941679157, 139.7195437943894);
         marker4 = new google.maps.Marker({
             position: sunshineCity,
             map:map
         });
      }
      function execFitBounds() {
         // 第１パラメータ：南西
         // 第２パラメータ：北東
         var oLatLngBounds = new google.maps.LatLngBounds(tochoOfiice,sensoJi);

         // 東京タワーを加える
         oLatLngBounds.extend(tokyoTower);
         // サンシャインシティを加える
         oLatLngBounds.extend(sunshineCity);
         // 表示調整
         map.fitBounds(oLatLngBounds);
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <br />
   <input type="button" value="ズームレベル／中心調整" onclick="execFitBounds();" />
</body>
</html>

デモ

google.maps.MapのfitBoundsメソッド

画面表示を調整するには「Map」クラスの『fitBounds』メソッドを実行するだけです。

fitBoundsメソッドには『google.maps.LatLngBounds』をパラメータとして、調整すべき範囲を渡せばよいだけです。

google.maps.LatLngBoundsとは？

LatLngBoundsクラスは、南西の位置と、北東の位置の２か所の位置を保持したクラスです。

２か所の位置を持つことで、南西・北東に加え、北西と南東の位置も特定でき、範囲を特定することが可能になります。四角形のエリアを特定できるということですね（地球は球なので厳密にいうと四角形ではないでしょうが）。

fitBoundsメソッドにLatLngBoundsの情報を渡すことで、表示すべき、範囲とズームレベルを特定することができ、表示範囲／ズームレベルを調整してくれます。

３か所以上のエリアを使って、表示範囲／ズームレベルを調整するには？

サンプルでは４か所（浅草寺、東京都庁、東京タワー、サンシャインシティ）のマーカー表示するようになっています。

      function execFitBounds() {
         // 第１パラメータ：南西
         // 第２パラメータ：北東
         var oLatLngBounds = new google.maps.LatLngBounds(tochoOfiice,sensoJi);

         // 東京タワーを加える
         oLatLngBounds.extend(tokyoTower);

         // サンシャインシティを加える
         oLatLngBounds.extend(sunshineCity);
         // 表示調整
         map.fitBounds(oLatLngBounds);
      }

まず、最初に東京都庁と浅草寺の２地点で、LatLngBoundsオブジェクトを生成しています。

その後、３地点目を設定するときに『extend』メソッドを使い、３か所目の東京タワーの位置を加えています。

これで、３か所を表示するための南西／北東位置を調整してくれます。

４か所目の設定も同様で、『extend』メソッドを使って、４か所目のサンシャインシティの位置も加えて、表示すべき、南西／北東位置を調整してくれます。

そして、最後にMapクラスの『fitBounds』メソッドを実行することで、表示されている地図の表示範囲やズームレベルを自動調整してくれるという具合です。

ぜひ、ご参考くださいませ。

ご参考

関連ページ