例－１６：住所からマーカをマッピングする(GClientGeocoderの例) + マーカーに複数の情報を渡す

	スポット名	住所	電話番号
スポット１：
スポット２：
スポット３：
スポット４：
サンプルプログラム
<!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=[あなたのAPIキー]" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[


    var map;
    var gGeo;
    function makeMap(){
       var max=4; 
       for(i=1; i<=max; i++){ 
           //マーカを作成 
           var address=document.getElementById("q"+i).value; 
           var name=document.getElementById("r"+i).value; 
           var tel=document.getElementById("u"+i).value; 

           addMarker(address, name, tel , i); 
       } 

       function addMarker(address,name,tel ,idx){ 
           gGeo.getLatLng(address , 
               function (point){ 
                   if (point) { 
                       //マーカーを作成 
                       var marker = new GMarker(point); 
                       GEvent.addListener(marker, "click", function() { 
                            var txt="<div align='left'>"
                                  + "<b>名前：</b>" + name + "<br />"
                                  + "<b>住所：</b>" + address + "<br />"
                                  + "<b>電話：</b>" + tel + "</div>"; 
                          marker.openInfoWindowHtml(txt); 
                       }); 
                       //マーカーを地図上に配置 
                       map.addOverlay(marker); 

                       //最初のマーカーだったら地図の中心地点に表示 & 吹き出しを開く
                       if(idx==1){
                          map.setCenter(point);
                          GEvent.trigger(marker,"click");
                       }
                   } 
               } 
           ); 
       }
    }
    function refresh(){
        map.clearOverlays();
        makeMap();
    }
    window.onload = function(){
                        //初期化
                        map = new GMap2(document.getElementById("map"));
                        map.setCenter(new GLatLng(36, 138), 6);
                        map.addControl(new GLargeMapControl());
                        gGeo = new GClientGeocoder();
                        makeMap();
                    }
    //]]>
    </script>
  </head>
  <body  onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>

    <TABLE style="WIDTH: auto" cellSpacing=3 cellPadding=3 border=1>
    <TBODY>
    <TR>
    <TH noWrap>&nbsp;</TD> 
    <TH>スポット名</TD> 
    <TH>住所</TD> 
    <TH>電話番号</TD> </TR>
    <TR>
    <TD noWrap>スポット１：</TD>
    <TD><INPUT id=r1 value=エキスポランド></TD>
    <TD><INPUT id=q1 value=吹田市千里万博公園></TD>
    <TD><INPUT id=u1 value=06-6877-0560></TD></TR>
    <TR>
    <TD noWrap>スポット２：</TD>
    <TD><INPUT id=r2 value=ナガシマスパーランド></TD>
    <TD><INPUT id=q2 value=三重県桑名市長島町浦安333></TD>
    <TD><INPUT id=u2 value=0594-45-1111></TD></TR>
    <TR>
    <TD noWrap>スポット３：</TD>
    <TD><INPUT id=r3 value="富士急ハイランド "></TD>
    <TD><INPUT id=q3 value=山梨県富士吉田市新西原5-6-1></TD>
    <TD><INPUT id=u3 value=0555-23-2111></TD></TR>
    <TR>
    <TD noWrap>スポット４：</TD>
    <TD><INPUT id=r4 value=東京ディズニーランド></TD>
    <TD><INPUT id=q4 value=千葉県浦安市舞浜1></TD>
    <TD><INPUT id=u4 value=045-683-3333></TD></TR>
    <TR>
    <TD colSpan=4>
    <P align=right><INPUT onclick=javascript:refresh(); type=button align=right value=更新></P></TD></TR></TBODY></TABLE>

  </body>
</html>
投票数:0 平均点:0.00
この記事の1行目に飛ぶ