はじめに
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です(人それぞれ異なる値です)。
実際に動かすと甲子園駅の位置に移動しました。







