GoogleAPI~郵便番号から地図を表示してみる~

せっかく郵便番号検索が出来たので、郵便番号に該当する付近の地図をGoogleMAPS APIを使用して表示したいと思います。
以前紹介したmy-hobby : 知ってると便利googleマップの使い方で表示させる方法もありますが、この方法だと地図の表示のさせ方(特に噴出し部分)のカスタマイズが、現状調べた限りでは出来ない事が分かりました。

そこでよりカスタマイズが可能なJavaScriptを使用して、地図を表示させたいと思います。
先ずは簡単な地図を表示させる為のサンプルソースを以下のサイトより取得しました。
地図の基本 – Google Maps API – Google Code
【Google マップの「Hello, World」】タブにあるリンク先のページGoogle マップ JavaScript API 使用例: 簡単な地図より取得したのが以下のソースです。

[javascript]
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google マップ JavaScript API 使用例: 簡単な地図</title>
<script src="http://maps.google.co.jp/maps?hl=ja&amp;amp;file=api&amp;amp;v=2&amp;amp;key=(各自取得したAPIキーを設定)"
type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.664694, 139.700016), 13);
}
}

</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
[/javascript]

このソースから読み取れるのが、以下の記述の「GLatLng(35.664694, 139.700016)」で緯度と経度を設定して、その位置の地図を表示しているという事です。
map.setCenter(new GLatLng(35.664694, 139.700016), 13);
※APIの詳細な仕様については、Google Maps API リファレンス – Google Maps API – Google CodeGMap2で確認できます。

ただ、今回は郵便番号から地図を表示させたいので、上記のソースのままでは使用できません。
APIの仕様を色々探していたら、住所から緯度経度を検索し、そこから地図を表示させるAPI(クラス)GClientGeocoderを発見しました。

早速このクラスを元に、サンプルソースを作成してみました。

[javascript]<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /><meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=(各自取得したAPIキーを設定); type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" >
//<![CDATA[
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder();
geocoder.getLatLng(document.mapform.address.value, showMap);
}
}

function showMap(latlng){
if (latlng){
//緯度経度が検索された場合
map.setCenter(latlng, 15);
var marker = new GMarker(latlng);
map.addOverlay(marker);
marker.openInfoWindowHtml(document.mapform.address.value);
}else{
//緯度経度が検索できなかった場合、全国の地図を表示する。
map.setCenter(new GLatLng(37.055177, 139.174805), 5);
}
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<form name="mapform" id="mapform">
<div id="map" style="width: 700px; height: 500px"></div>
<input type="hidden" id="address" name="address" value="東京都港区芝公園4丁目2-8">
</form>
</body>
</html>[/javascript]

上記スクリプトをブラウザで表示させると以下の様な感じになります。

※東京タワーの住所を設定しています。
サンプルソースを作成するに当たり、以下のサイトを参考にしました。
住所から緯度と経度を取得(GClientGeocoderクラス, getLatLngメソッド) – ジオコーディング – Google Maps入門

結局、住所から地図を表示する方法は見つかりましたが、郵便番号から緯度経度を検索するAPI(クラス)は見つかりませんでした。
そこでダメもとで住所の代わりに郵便番号(〒105-0011)を引数にして設定してみると、
なんと郵便番号でも地図が正しく表示されました。


※東京タワーの郵便番号を設定していますが、若干位置がずれています。
これは、〒105-0011は「東京都港区芝公園」全体を指している為、東京タワーの位置にピンポイントでマーカーが当たらなかった為と思われます。
住所は位置を特定できますが、郵便番号は範囲の為、この程度の誤差は仕方が無いでしょう。

実はこのクラスって、住所以外の情報でも緯度経度を検索できるのでは?と思い、試しに「東京タワー」という文字をセットしてみたところ、、、
地図が正しく表示されました。

API仕様では住所と明言されていますが、実際に試した結果キーワード検索と同じ様な機能になっているようです。
もしこれが公式な情報になれば、地図表示の自由度(汎用性)がより高くなりますね。

ちなみに、APIの仕様がバージョンアップされているようです。
http://code.google.com/intl/ja/apis/maps/documentation/v3/
今回は旧バージョンで記事を書きましたが、新バージョンで今回の記事に関する変更があれば、また紹介したいと思います。

カテゴリー: flashcast, googlemap, zipnavi, 郵便番号検索 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です