AJAXのお勉強

Googleマップ マーカーの削除＠AJAX

Googleマップを表示して、マーカーを表示します。
表示したマーカーを削除します。

Gmap2のaddOverlayにて、生成したGMarkerを追加しますが、
removeOverlayにて追加したマーカを削除ができます。

以下では、ロード時にマーカーを作成します。
ボタンを配置し、クリック処理にて、
作成したマーカーをGmap2のremoveOverlayにて削除しています。


<!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マップ マーカーの削除</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

var map;
var marker;
var point;

function load() {
    if (GBrowserIsCompatible()) {

        //位置の配列を作成
        point = new GLatLng(35.681099,139.767084);

        //GMap2生成
        map = new GMap2(document.getElementById("map"));
        map.setCenter(point, 12);
        
        //マーカー
        marker = new GMarker(point)
        map.addOverlay(marker);

        //縮尺、移動コントロール追加
        map.addControl(new GSmallMapControl());
    }
}


function removeMarker() {
    map.removeOverlay(marker);
}


//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 400px; height: 400px"></div>
    <input type="button" value="マーカー削除" onclick="removeMarker()">
</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.