Search

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&amp;v=2&amp;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&amp;v=2&amp;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&amp;v=2&amp;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&amp;v=2&amp;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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women