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>