Google Maps JavaScript API v2Google Maps APIの使い方 - 関数
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
メモリ解放
2008/5/5
GUnload()
GUnload関数は、メモリリークを防ぐために、登録されたイベントハンドらをすべて破棄します。 この関数は、body要素のonunload属性または、JavaScriptのwindow.unloadプロパティに指定します。
指定例1: body要素のonunload属性に指定する場合
Google Maps API:GUnload - メモリ解放
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if(GBrowserIsCompatible()){
var map=new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.658416,139.69907), 17);
}
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"></div>
指定例2: JavaScriptのwindow.unloadプロパティに指定する場合
Google Maps API:GUnload - メモリ解放
<!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"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if(GBrowserIsCompatible()){
var map=new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
GoogleマップAPIが使用できるか調べる
2008/5/5
GBrowserIsCompatible()
GBrowserIsCompatible()関数は、現在のブラウザがGoogleマップAPIを利用できるかを判定します。
利用可能な場合にTRUE、利用不可の場合にFALSEを返します。
2008年5月現在、GoogleマップAPIでサポートされているブラウザは、下記のとおりです。
- IE 6.0+ (Windows)
- Firefox 1.5+ (Windows/Mac/Linux)
- Safari 2.0.4+ (Mac)
サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if(!GBrowserIsCompatible()){
document.write("<p>現在閲覧されているブラウザでは、GoogleマップAPIを利用できません。<br>IE 6.0+、Firefox 1.5+、Safari 2.0,4+でご覧ください。</p>");
}else{
/* 地図生成などの処理 */
document.write("<p>現在閲覧されているブラウザでは、GoogleマップAPIを利用できます♪</p>");
}
//]]>
</script>
ファイルからデータを非同期にダウンロード
2008/5/5
GDownloadUrl(uri, onload[, postBody[, postContentType]]);
GDownloadUrl関数は、ファイルからデータを非同期にダウンロードします。 以下は、XMLファイルを読み込んで、マーカーを表示する例です。

markers.xml
<markers> <marker lat="35.691034" lng="139.7002" /> <marker lat="35.683061" lng="139.70204" /> <marker lat="35.670284" lng="139.702685" /> <marker lat="35.658517" lng="139.701333" /> <marker lat="35.6468" lng="139.710109" /> <marker lat="35.634" lng="139.715828" /> <marker lat="35.626444" lng="139.72344" /> <marker lat="35.619698" lng="139.72855" /> <marker lat="35.630154" lng="139.74044" /> <marker lat="35.645736" lng="139.74757" /> <marker lat="35.655649" lng="139.75674" /> <marker lat="35.666599" lng="139.75812" /> <marker lat="35.675069" lng="139.76332" /> <marker lat="35.6811" lng="139.767079" /> <marker lat="35.691688" lng="139.77088" /> <marker lat="35.698684" lng="139.77421" /> <marker lat="35.70744" lng="139.774632" /> <marker lat="35.713765" lng="139.77725" /> <marker lat="35.720498" lng="139.77883" /> <marker lat="35.727771" lng="139.77098" /> <marker lat="35.732135" lng="139.76679" /> <marker lat="35.738109" lng="139.76071" /> <marker lat="35.736489" lng="139.74687" /> <marker lat="35.733493" lng="139.73934" /> <marker lat="35.731403" lng="139.72865" /> <marker lat="35.72893" lng="139.710377" /> <marker lat="35.721204" lng="139.70659" /> <marker lat="35.701307" lng="139.700046" /> <marker lat="35.712284" lng="139.70378" /> </markers>
サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ var map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.684002,139.737618), 12); /* コントロール追加 */ map.addControl(new GLargeMapControl()); GDownloadUrl("include/ajax/googlemap_function/markers.xml", function(data){ var xml=GXml.parse(data); var markers=xml.documentElement.getElementsByTagName("marker"); for(var i=0; i<markers.length; i++){ var latlng=new GLatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng"))); map.addOverlay(new GMarker(latlng)); } }); } } window.onload=load; window.unload=GUnload; //]]> </script> <p><strong>【山手線一周】</strong></p> <div id="map" style="width:600px;height:600px"><!-- 地図描画領域 --></div>