新しくなったGoogle Maps API V3をjQueryと一緒に利用する
WordPress を勉強しようと購入した WordPress カスタマイズブック のサンプルを見ていたら、Google Map API のバージョンが３に上がっているのに気が付いた。
バージョン3 から API キーが必要なくなったので、これから使ってみようかと思っている人には、使い方の敷居が一段と低くなったと思う。ここで紹介するのは、jQuery と Google Maps API V3 を利用して、指定した地名の場所を表示するサンプルですが、あなたのローカル PC 上で jQuery ライブラリをダウンロードすることなく、地図を表示する JavaScript のプログラムを作る事ができるのでお楽しみに。
先ずは実際のサンプルは以下の通り。
入力ボックスに地名を入れて、ポイント表示ボタンを押してみて下さい。指定した地名があれば、そこを表示の中心になるように地図が移動します(地図が表示されていないようなら、タイトルをクリックして記事の表示へ移行してみて下さい)。
HTML ソース
<html>
<head>
<title>Enjoy with Google Map</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=JP"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#abtn").click(function() {
if (marker != null) {
marker.setVisible(false);
delete marker;
}
codeAddress($("#aname").val());
});
var codeAddress = function(areaname) {
if (geocoder) {
geocoder.geocode({'address': areaname}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successfull for the following reason: " + status);
}
});
}
}
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var marker = null;
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
codeAddress("甲府");
});
</script>
</head>
<body>
<h1>Google Map</h1>
<div id="map_canvas" style="width:480px; height:400px;"></div>
<p><input type="text" id="aname" value="" /><input type="button" id="abtn" value="ポイント表示" /></p>
</body>
</html>
このサンプルの HTML とプログラムは上の通り。マウスカーソルを表示ソースの上に置くとアイコンボタンが現れるので、カット&ペーストを利用してテキストエディタにペーストして下さい。保存後、ブラウザで動作確認ができます。
簡単な説明
jQuery ライブラリの読込みは、Google のダウンロードサイトから 5行目～8行目のようにして読み込むことができる。Google Maps API を利用する方法は、9行目のように同じく Google サイトを利用して、ライブラリを読み出すことで行う。なお「sensor」パラメータは、V3から iPhone や Android で地図が表示できるように作られており、GPS機能を持っている携帯を利用するとき位置情報が読み出せるかどうかの指定である。ここでは普通のPC上で利用するので、false を指定。
Google のチュートリアルでは、サイトを表示したとき同時に地図を表示するように、bodyタグにonloadイベントを利用してマップを表示するためのJavaScriptプログラムを動作させるように説明されている。
ここではjQueryを利用するので、jQueryのreadyメソッドを利用して表示するようにした。readyメソッドには、ボタンがクリックされた時のイベントプログラムや、地名から位置を取得してマップを表示するメソッドも入れた。
マップは、38行目にあるように表示タイプを指定できる。普通にお目にかかるマップが「ROADMAP」、その他「SATELLITE」、「HYBRID」があり、上のプログラムの「TERRAIN」は地形図のように表示する。
42行目で、マップを「div id=”map_canvas”」領域に表示するため、google.maps.Map オブジェクトの初期化で「document.getElementById(“map_canvas”)」の戻り値をパラメータとして渡すように、チュートリアルでは説明されている。ここでは jQuery を利用するので、$(“#”) のオブジェクトから getElementById() のオブジェクトと同じ内容を取り出す方法はないかと調べたところ、以下にあったのでその方法を利用した。
jquery で getElementByID() と同等のオブジェクトを取得するには
WordPress プラグイン作成の参考書