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

広告

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

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

1.百分率表記と度分秒表記
2.緯度と経度の取得
3.ズームレベルも合わせて取得
4.サンプルコード

百分率表記と度分秒表記

では簡単なサンプルを作成して実際に試してみます。

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

今回の場合は検索ボックスに「35.002441,138.529358」と表示されます。これが先ほど地点の座標となります。緯度が「35.002441」経度が「138.529358」です(なお地図上に表示されている緑の矢印がこの座標を表す位置です)。

p4-4

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

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

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

緯度と経度を調べたい地点が地図に表示されるように地図を移動して下さい。(左パネルを表示した状態で行って下さい)。

p4-5

座標を調べたい場所の上にマウスを合わせ、右クリックして下さい。そして表示されたメニューの中から「この場所について」と書かれたメニューをクリックして下さい。

p4-6

先ほど右クリックした位置が地図の中心になるように地図が移動します。

p4-7

左パネルの下記の位置にある「リンク」アイコンをクリックして下さい。

p4-8

下記のようにメール用のリンクやHTML埋め込み用のHTMLコードが表示されます。この中でメール用リンクをコピーして下さい。

p4-9

今回の場合は次のようになります。 

http://maps.google.co.jp/?ll=35.005253,138.526611&spn=0.383575,0.528717
&t=m&z=10&brcurrent=3,0x601a331f12678a2b:0xe630416f5df53bdc,1

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

サンプルコード

では簡単なサンプルを作成して実際に試してみます。今回は先ほど調べた座標とズームレベルを設定してみて取得した値が正しかったどうかを確認してみます。 

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

<!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/code4_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>(35.005253,138.526611)の地点です。</p>

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

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

p4-10

先ほどの2番目の方法で取得した座標とズームレベルを指定してGoogle Maps APIで地図を標示したところ、Googleマップで表示した地図と同じように表示されましたので、先ほど取得した座標とズームレベルが正しかったことが確認できました。

( Written by Tatsuo Ikura )