目印のコメントを自由に変える

はじめに

 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>
    <form name=form_marker>
    <input type=button value='削除' id=button_delete_marker onclick="DeleteGMarker();">
    <input type=button value='更新' onclick="ModifyGMarker();">
    <textarea name=text_marker rows=5 cols=55>コメント</textarea>
    </form>
    <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;
    _astrMarkerHtml = new Array(0);
    _aobjMarkerClickListener = new Array(0);
    
    function AddGMarker(objMap,nLatitude,nLongitude)
    {
       var objPoint = new GPoint(nLatitude,nLongitude);
       var objMarker = new GMarker(objPoint);
       var nIndex = _aobjMarker.length++;
       _aobjMarker[nIndex] = objMarker;
       var strHtml = document.form_marker.text_marker.value;
       _astrMarkerHtml.length++;
       _astrMarkerHtml[nIndex] = strHtml;
       _aobjMarkerClickListener.length++;
       
       _aobjMarkerClickListener[nIndex] = 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;
       _astrMarkerHtml[_nShowMarker] = "";
       _aobjMarkerClickListener[_nShowMarker] = null;
    }
    
    function ModifyGMarker()
    {
       if(_nShowMarker < 0 || _nShowMarker >= _aobjMarker.length || !_aobjMarker[_nShowMarker])
          return;
       
       var nIndex = _nShowMarker;
       var strHtml = document.form_marker.text_marker.value;
       _astrMarkerHtml[nIndex] = strHtml;
       
       GEvent.removeListener(_aobjMarkerClickListener[nIndex]);
       _aobjMarkerClickListener[nIndex] = GEvent.addListener(_aobjMarker[nIndex],"click",function(){ _aobjMarker[nIndex].openInfoWindowHtml(strHtml); });
    }
    
    //]]>
    </script>
  </body>
</html>
 赤字が変更や追加する部分です。
 太字の部分はAPI Keyです(人それぞれ異なる値です)。


スクリプトの実行


 目印をクリックしてコメントを開いた状態で「更新」ボタンを押すとコメントが入力欄の 文字列と置き換わります。ただし変更は即時に反映はせず、次に目印をクリックしたときに 変更が反映されます。


カテゴリー「GoogleマップAPI」 のエントリー