Google AJAX API 経由で GoogleMaps APIを jQuery と併せて使う時のメモ。
最近はGoogleのAJAX APIというのを使う事で、MapsとかSearchとかDataとか、統一されたロードAPIや区分けされた名前空間を使って利用する事ができるようになってるみたいです。
・「Google Maps API の概念」
http://code.google.com/intl/ja/apis/maps/documentation/index.html
の「Google AJAX API ローダーを使用」にも簡単な例がありますし、
http://code.google.com/intl/ja/apis/ajax/documentation/
はAJAX APIの本家ドキュメントですが例が載ってます。
で、弄ってみたのですが幾つか嵌りどころがあったのでメモしておきます。あくまでも個人的なメモです。間違ってたら指摘してくれるとすごい嬉しいです。
"google.maps."名前空間は、素では使えないっぽい。
実験中に嵌りました。
google.setOnLoadCallback()あるいはgoogle.load()で"callback"経由で渡す関数の中でしか認識できないみたいです。多分、中で色々やってるんじゃないでしょうか。
↑に伴うGBrowserIsCompatible()やGUnload()の調整が必要。
今までは普通に、
<script...>
if (GBrowserIsCompatible()) { ... }
</script>とか、
<body onunload="GUnload()">
とか、GUnload()をjQueryでやるならば
<script> $(window).unload = GUnload(); </script>
とか、すっぴんの名前空間で動かせてたのですが。
これはそれぞれ、
google.maps.BrowserIsCompatible google.maps.Unload
という名前空間になります。
・・・ということは、すっぴんの名前空間じゃ動かなくて、google.load()かgoogle.setOnLoadCallback()経由のcallbackの中で呼ぶしかないようです。
・「window.onunload = google.maps.Unload; gives error in IE」：ここが参考になりました。
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/449182b23493de00
jQueryと抱き合わせたサンプル。
元々YakiBikiでのプラグイン化を意識してますので、一枚岩のHTMLに組み込むような書き方はできてない点に注意して下さい。
あと、HTTPヘッダーでcharset=UTF-8となるよう注意して下さい。あと動作保証無しです。一応WinXPのIE7, FF2, Opera9で確認はしてますが・・・。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="./jquery-1.2.6.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=your_key"></script>
<script type="text/javascript">
<!--
$(function(){
call_map1("map1", 37.4419, -122.1419, 13);
call_map1("map2", 37.4419, 122.1419, 5);
call_map1("map3", 37.4419, 122.1419, 5);
});
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
function call_map1(element_id, lat, lng, zoom) {
google.load("maps", "2", {"callback" : function() {
if (!google.maps.BrowserIsCompatible()) {
window.alert('Browser is not compatible for Google Maps');
return;
}
var map_element = $("#" + element_id)[0];
if (!map_element) {
window.alert('Specified element[' + element_id + '] was not found.');
return;
}
var map = new google.maps.Map2(map_element);
map.setCenter(new google.maps.LatLng(lat, lng), zoom);
$(window).unload = google.maps.Unload;
}});
}
//-->
</script>
<div id="map1" style="width: 500px; height: 300px"></div>
<div id="map2" style="width: 600px; height: 200px"></div>
</body>
</html>
