開いているマーカーを削除する(dinop.com)

はじめに

　Google Maps（Google Local）のAPIを利用する方法を簡単に紹介しています。今回は「地図上にクリックで追加した目印を削除可能にする方法について」です。

スクリプトの変更

　前回に作成したコードに変更や追加を加えます。

<!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">
    <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <input type=button value='削除' id=button_delete_marker onclick="DeleteGMarker();">
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    _map = map;
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    GEvent.addListener(map, 'click', function(objOverlay, objPoint) { if(objPoint) AddGMarker(map,objPoint.x,objPoint.y,"マーカー"); });
    map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
    _aobjMarker = new Array(0);
    _nShowMarker = -1;
    
    function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
    {
       var objPoint = new GPoint(nLatitude,nLongitude);
       var objMarker = new GMarker(objPoint);
       var nIndex = _aobjMarker.length++;
       _aobjMarker[nIndex] = objMarker;
       
       GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
       GEvent.addListener(objMarker,"infowindowopen",function(){ _nShowMarker = nIndex });
       GEvent.addListener(objMarker,"infowindowclose",function(){ _nShowMarker = -1; });
       objMap.addOverlay(objMarker);
    }
    
    function DeleteGMarker()
    {
       if(_nShowMarker < 0 || _nShowMarker >= _aobjMarker.length || !_aobjMarker[_nShowMarker])
          return;
       
       _map.removeOverlay(_aobjMarker[_nShowMarker]);
       _aobjMarker[_nShowMarker] = null;
    }
    

    AddGMarker(map,135.3659722,34.72072222,"<img src=http://www.dinop.com/google/map/use_html_comment_test.gif align=left>甲子園駅<br><br><a href=http://www.hanshintigers.jp/ target=_blank>阪神タイガース</a>の本拠地としても知<br>られる甲子園球場の目の前にあり<br>ます。<br clear=left>");
    AddGMarker(map,135.3585277,34.70730555,"甲子園浜");
    
    //]]>
    </script>
  </body>
</html>

　赤字が変更や追加する部分です。
　太字の部分はAPI Keyです（人それぞれ異なる値です）。

スクリプトの実行

　実際に動かして地図をクリックするとその位置に目印が追加されます。さらに削除したい目印をクリックして開き「削除」ボタンを押すと、その目印が削除されます（コメントは表示されたままになってしまいますが...これはGoogle Maps APIにウインドウを閉じるためのコマンドが見つからなかったためです）。

解説

　難しいことはしていないので解説は不要かもしれませんが簡単に書いておきます。

　_aobjMarkerは目印のオブジェクトを格納するための配列です。これまでのように作りっぱなしでは削除ができないので配列の中に保存しておきます。
　_nShowMarkerは現在開かれている目印（削除したい目印）の_aobjMarkerに対するインデックスを格納するための変数。-1は目印が開かれていないことを示します。

    _aobjMarker = new Array(0);
    _nShowMarker = -1;

　新しく作成した目印を配列に保存してく部分です。

       var nIndex = _aobjMarker.length++;
       _aobjMarker[nIndex] = objMarker;

　目印がクリックされてコメントが開いたときと、閉じたときに実行される部分です。
　開いたときは_nShowMarkerにインデックスを保存し、閉じたときは逆に-1で消します。これにより「削除」ボタンを押したときにどの目印が開いているかが判別できるようになります。

       GEvent.addListener(objMarker,"infowindowopen",function(){ _nShowMarker = nIndex });
       GEvent.addListener(objMarker,"infowindowclose",function(){ _nShowMarker = -1; });

　「削除」ボタンを押したときに実行される処理。

    function DeleteGMarker()
    {
       （処理）
    }

　_nShowMarkerが0以下のときは目印が開いていない、_aobjMarker.length以上のときは不正な値などの条件をチェックする。

       if(_nShowMarker < 0 || _nShowMarker >= _aobjMarker.length || !_aobjMarker[_nShowMarker])
          return;

　目印の削除処理。オーバーレイを削除して、配列にnullを代入する。

       _map.removeOverlay(_aobjMarker[_nShowMarker]);
       _aobjMarker[_nShowMarker] = null;

dinop.com