Google Maps APIを使って地図の中心と表示領域の座標を取得する

前のページではGoogleマップを使って地図の座標を調べましたが、Google Maps APIにも中心座標を取得したり地図の表示領域(左下隅と右上隅の座標)を調べることができます。ここではGoogle Maps APIを使って座標などの情報を取得する方法について解説します。

1.地図の中心座標を取得
2.地図が表示されている領域を座標で取得
3.サンプルコード

地図の中心座標を取得

現在表示されている中心の座標を取得するにはgoogle.maps.Mapクラスで用意されているgetCenterメソッドを使います。

getCenter()

Description:
  Returns the position displayed at the center of the map. Note that this 
  LatLng object is not wrapped. See LatLng for more information.
Return:
  LatLng

getCenterメソッドを実行すると、現在表示されている地図の中心座標を表すLatLngクラスのインスタンスを返します。

取得したLatLngクラスのインスタンスから緯度と経度を取得するにはgoogle.maps.LatLngクラスで用意されているlatメソッドとlngメソッドを使います。

lat()

Description:
  Returns the latitude in degrees.
Return:
  number

lng()

Description:
  Returns the longitude in degrees.
Return:
  number

latメソッドを実行すると緯度を度数で返します。またlngメソッドを実行すると経度を度数で返します。

地図の中心座標を取得するには次のように記述します。

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

var latlng = map.getCenter();
var lat = latlng.lat();
var lng = latlng.lng();

地図が表示されている領域を座標で取得

表示されている地図の表示領域の座標を取得するにはgoogle.maps.Mapクラスで用意されているgetBoundsメソッドを使います。

getBounds()

Description:
  Returns the lat/lng bounds of the current viewport. If more than one copy of 
  the world is visible, the bounds range in longitude from -180 to 180 degrees 
  inclusive. If the map is not yet initialized (i.e. the mapType is still null), 
  or center and zoom have not been set then the result is null or undefined.
Return:
  LatLngBounds

getBoundsメソッド実行すると現在のビューポートの座標を返します。地図が初期化されていなかったり中心座標やズームレベルが設定されていない時に実行されるとnullを返します。

戻り値はgoogle.maps.LatLngBoundsクラスのインスタンスとして取得します。LatLngBoundsクラスは領域の左下(南西)の座標と右上(北東)の座標の2つの値を保持するクラスです。それぞれの座標はLatLngクラスのオブジェクトで表現されており、左下(南西)の座標を取り出すにはLatLngBoundsクラスのgetSouthWestメソッドを使い、右上(北東)の座標を取り出すにはLatLngBoundsクラスのgetNorthEastメソッドを使います。

getSouthWest()

Description:
  Returns the south-west corner of this bounds.
Return:
  LatLng

getNorthEast()

Description:
  Returns the north-east corner of this bounds.
Return:
  LatLng

どちらのメソッドも戻り値として座標をあらわすLatLngクラスのインスタンスを返します。LatLngクラスのインスタンスから緯度と経度を取得する方法については先に記載したgetCenterメソッドのところを参照して下さい。

よって、現在表示されている地図の左下と右上の座標を取得するには次のように記述します。

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

var latlngBounds = map.getBounds();
var swLatlng = latlngBounds.getSouthWest();
var swlat = swLatlng.lat();
var swlng = swLatlng.lng();

var neLatlng = latlngBounds.getNorthEast();
var nelat = neLatlng.lat();
var nelng = neLatlng.lng();

サンプルコード

では簡単なサンプルを作成して実際に試してみます。今回は表示した地図をマウスで動かすと、地図の中心座標及び表示領域の座標をWebページ上に表示します。

var map;

function initMap() {
  var opts = {
    zoom: 15,
    center: new google.maps.LatLng(35.185384,136.89909)
  };

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

  map.addListener('drag', dispLatLng);
}

function dispLatLng(){
  var latlng = map.getCenter();
  var str = "中心：" + latlng.lat() + "," + latlng.lng() + "<br>";

  var latlngBounds = map.getBounds();
  var swLatlng = latlngBounds.getSouthWest();
  str = str + "左下：" + swLatlng.lat() + "," + swLatlng.lng() + "<br>";

  var neLatlng = latlngBounds.getNorthEast();
  str = str + "右上：" + neLatlng.lat() + "," + neLatlng.lng();

  document.getElementById("latlng").innerHTML = str;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Google Maps API サンプル</title>
  </head>
  <body>

    <p>座標の取得サンプル</p>

    <div id="map" style="width:620px; height:400px"></div>

    <p id="latlng"></p>

    <script type="text/javascript" src="code5_1.js">
    </script>

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
    </script>
  </body>
</html>

ブラウザでWebページを開くと次のように表示されます。

p5-1

マウスを使って地図をドラッグして移動させると、表示されている地図の中心座標及び左下と右上の座標を取得して画面下に表示します。

p5-2

表示領域として取得するのは左下と右上の座標だけですが、もし左下の座標が(a1, b1)、右上の座標が(a2, b2)だとしたら、左上の座標は(a2, b1)となり右下の座標は(a1, b2)となります。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。