地図の中心と表示領域の座標を取得してWebページに表示

広告

前のページではGoogleマップの機能を使って地図上の特定の地点の座標やズームレベルを取得する方法を試してみましたが、Google Maps APIでも指定の地点の座標を取得したり表示されている地図の表示領域(左下隅と右上隅の座標)を調べることが可能です。ここではGoogle Maps APIを使って座標などの情報を取得し、地図を表示しているWebページ上に取得した情報を表示する方法について解説します。

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 Value:
  LatLng

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

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

lat()

Description:
  Returns the latitude in degrees.

Return Value:
  number

lng()

Description:
  Returns the longitude in degrees.

Return Value:
  number

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

以上のことから現在表示されている地図の中心座標を取得するには次のように記述します。 

var map = new google.maps.Map(document.getElementById("map_canvas"), 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 Value:
  LatLngBounds

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

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

getSouthWest()

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

Return Value:
  LatLng

getNorthEast()

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

Return Value:
  LatLng

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

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

var map = new google.maps.Map(document.getElementById("map_canvas"), 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 initialize() {
  var latlng = new google.maps.LatLng(35.185384,136.89909);
  var opts = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), opts);

  google.maps.event.addListener(map, 'drag', dispLatLng);
}

function dispLatLng(){
  var latlng = map.getCenter();
  var str = "[CENTER]=[" + latlng.lat() + "," + latlng.lng() + "]<br />";

  var latlngBounds = map.getBounds();
  var swLatlng = latlngBounds.getSouthWest();
  str = str + "[SouthWest]=[" + swLatlng.lat() + "," + swLatlng.lng() + "]<br />";

  var neLatlng = latlngBounds.getNorthEast();
  str = str + "[NorthEast]=[" + neLatlng.lat() + "," + neLatlng.lng() + "]";

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

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Google Maps サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
    </script>

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

  </head>
  <body onload="initialize()">
    <p>地図の中心及び左下/右上の座標を表示します。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

    <p id="latlng" style="font-size:10px;"></p>
  </body>
</html>

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

p5-1

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

p5-2

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

( Written by Tatsuo Ikura )