経緯度を検索してその場所の地図を表示する

はじめに

 Google Maps(Google Local)のAPIを利用する方法を簡単に紹介しています。今回 は「好きな位置を初期画面として表示する方法について」です。

 例として甲子園球場の目の前にある「甲子園駅」を中心とした地図を表示する方法を を紹介しています。まずは甲子園駅の経緯度を求め、その情報をスクリプトに反映する ことで実現しています。


経緯度の検索

 ちょっとアナログな方法ですが、経緯度の検索は手動で行います。
 インターネット上の地図検索サイト「MapFan」を利用 します。ここで「甲子園駅」を検索して、その場所の地図を表示 します。

 地図のページには下部に「リンクURL」という項目があります。甲子園駅の場合は以下のようになっていま した。
http://www.mapfan.com/index.cgi?MAP=E135.21.57.5N34.43.14.6&ZM=9
 ここで太字の部分が経緯度になります。この場合は「東経135度21分57秒3、北緯34度43分14秒6」 という意味になります。ちなみに測位系は日本測地系です。対してGoogle Mapsは世界測地系のため、 数百メートルほど異なる経緯度になってしまいます。しかしここではだいたいの位置が求まればよしと します。


経緯度の単位変換

 Google Mapsでは「東経135度21分57秒3、北緯34度43分14秒6」というような度分秒形式の経緯度は 使うことができません(たぶん)。Google Mapsで使うためには度単位の経緯度に変換する必要があり ます。

 変換には
(変換後の値)= 度 + 分/60 + 秒/3600
という式を利用します。

具体的には...
東経135度21分57秒3	= 135 + 21/60 + 57.3/3600 = 135.3659722
北緯34度43分14秒6	=  34 + 43/50 + 14.6/3600 = 34.72072222
という感じになります。


スクリプトの変更

 前回に作成したコードをちょっとだけ変更するだけです。
<!DOCTYPE html PUBLIC "-//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">
    <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
    
    //]]>
    </script>
  </body>
</html>
 位置を指定するために変更したのは赤字の部分で、ここに上で計算した経緯度を入れます。
 太字の部分はAPI Keyです(人それぞれ異なる値です)。

 実際に動かすと甲子園駅の位置に移動しました。


カテゴリー「GoogleマップAPI」 のエントリー