任意の場所の緯度と経度の取得方法

Google Maps APIを使ったWebページを作成する場合、地図の中心の座標を指定したりマーカーの設置する座標を指定したりなど座標を指定することが多々あります。例えば東京駅の地図を表示させるには、東京駅の緯度と経度が分からなければ指定することができません。

ここではGoogleマップを使って任意の地点の座標を調べる方法を確認します。また緯度と経度の基礎知識も見ていきます。

Google Maps APIで緯度と経度を指定する時には百分率表記を使いますが、他に度分秒表記という「東経130度20分35秒」などのような記述方法もよく使われます。この度分秒表記から百分率表記への変換方法は次の通りです。

百分率表記 ＝ 度 ＋ (分／60) ＋ (秒／3600)

例えば「東経130度20分35秒」は下記のようになります。

百分率表記 ＝ 度 ＋ (分／60) ＋ (秒／3600)
           ＝ 130 ＋ (20／60) ＋ (35／3600)
           ＝ 130.3431

また経度と緯度には、「東経」「西経」と「北緯」「南緯」という区分があります。

p4-1

経度に関してはロンドンのグリニッジ天文台を通過する南北の線を基準として、東側を「東経」、西側を「西経」となります。それぞれ0～180度の値を取ります。また緯度に関しては赤道を軸として、北半球を「北緯」、南半球を「南緯」となります。それぞれ0～90度の値を取ります。

緯度と経度の取得

任意の場所の緯度と経度を調べる方法はいくつかありますが、ここではGoogle マップを使って調べる方法を確認します。まずGoole マップ上で緯度と経度を取得したい地図を表示します。

http://maps.google.co.jp/

p4-2

緯度と経度を調べたい地点が地図の中に表示されるように地図を移動して下さい。そして調べたい場所の上にマウスを合わせ、右クリックして下さい。

p4-3

表示されたメニューの中から「この場所について」と書かれたメニューをクリックして下さい。

p4-4

検索ボックスの中に表示されている「35.62641,139.884109」が座標となります。これは緯度が「35.62641」、経度が「139.884109」という意味です(なお地図上に表示されている緑の矢印がこの座標を表す位置です)。

このようにGoogleマップを使用することで、任意の地点の座標を簡単に調べることができます。

ズームレベルも合わせて取得

先ほどの方法ですと座標は分かりますが、現在表示している地図のズームレベルまでは分かりません。ズームレベルまで取得したい場合には次の手順で調べて下さい。

p4-5

表示されたメニューの中から「ここを地図の中心にする」と書かれたメニューをクリックして下さい。すると右クリックした位置が地図の中心になるように移動します。

p4-6

画面右上にある「リンク」と書かれたリンクをクリックして下さい。

p4-7

「このリンクをメールに貼り付けて地図を共有できます」と書かれた下の表示されているURLをコピーして下さい。今回の場合は次のようになります。

http://maps.google.co.jp/?ie=UTF8&ll=35.62521,139.884796&spn=0.086232,0.2005
&z=12&brcurrent=3,0x60229b5fd61b9511:0x1cb677dbffe07bbe,1

この中の「ll=35.62521,139.884796」の部分が座標となり、「z=12」の部分がズームレベルとなります。この手順であれば座標に加えて現在見ている地図と同じズームレベルも調べることができます。

サンプルコード

では実際に試してみます。

code4_1.js

function initialize() {
  var latlng = new google.maps.LatLng(35.62521,139.884796);
  var opts = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

map4_1.html

<!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"/>
    <title>Google Maps JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code4_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

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

  </body>
</html>

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

p4-8

先ほどの2番目の方法で取得した座標とズームレベルを指定していますので、Googleマップで表示したものと同じように表示されています。

( Written by T.buzz.Ikura+ )

Social Button

Facebook Page