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

	スポット名	住所	電話番号
スポット１：
スポット２：
スポット３：
スポット４：

GClientGeocoderを使って、住所から緯度経度に変換し、マーカーを追加しています。これはあくまでサンプルなので、実用的ではありません。大量(10個以上)に変換する場合には、住所から緯度経度あらかじめ変換しておくほうが無難です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Maps JavaScript API Example</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 
    <script src="http://maps.google.co.jp/maps?file=api&v=2&key=[あなたのAPIキー]&sensor=false"
            type="text/javascript"></script>
 
    <script type="text/javascript">
    //<![CDATA[
    
    //地図のインスタンスを保持するmap変数
    var map;
    
    //ジオコーダのインスタンスを保持するgGeo変数
    var gGeo;
    
    function load(){ 
      
      //地図の作成
      map = new GMap2(document.getElementById("map")); 
      map.setCenter(new GLatLng(36, 138), 6); 
      
      //コントロールの追加
      map.addControl(new GLargeMapControl());
      
      //ジオコーダの作成
      gGeo = new GClientGeocoder();
      
      
      //住所からマーカーを作成する
      max = 4;
      for(i = 1; i <= max; i++) { 
          //マーカー作成
          addGeoMarkerIndex(i);
      } 
    }
    
    function addGeoMarkerIndex(idx) { 
      
      //項目から住所を取得
      var address = document.getElementById("q" + idx + "-name").value; 
      
      //ジオコーディングをリクエストする
      gGeo.getLatLng(address, function(point) {
        addGeoMarker_callback(point, idx);
      });
    }
    
    function addGeoMarker_callback(point, idx) {
      if (point !== null) {
        //マーカーを作成 
        var marker = new GMarker(point); 
        
        //情報を取得する
        var address = document.getElementById("q" + idx + "-address").value;
        var name = document.getElementById("q" + idx + "-name").value;
        var tel = document.getElementById("q" + idx + "-tel").value;
        
        //マーカーがクリックされたら、情報を表示する
        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); 
      }
    }

    //ページがロードされたら、load 関数を実行して、地図を表示する
    window.onload = load;
    
    //ページを抜けるとき、メモリ開放
    window.onunload = GUnload;
    //]]>
    </script>

  </head>
  <body >
    <div id="map" style="width: 600px; height: 600px"></div>
    <table border="1" style="width:auto;">
    <tr>
    	<th>　</th>
    	<th>スポット：</th>
    	<th>住所</th>
    	<th>電話番号</th>
    </tr>
    <tr>
    	<td>スポット１：</td>
    	<td><input type="text" id="q1-name" value="エキスポランド" ></td>
    	<td><input type="text" id="q1-address" value="吹田市千里万博公園" ></td>
    	<td><input type="text" id="q1-tel" value="06-6877-0560" ></td>
    </tr>
    <tr>
    	<td>スポット２：</td>
    	<td><input type="text" id="q2-name" value="ナガシマスパーランド" ></td>
    	<td><input type="text" id="q2-address" value="三重県桑名市長島町浦安333" ></td>
    	<td><input type="text" id="q2-tel" value="0594-45-1111" ></td>
    </tr>
    <tr>
    	<td>スポット３：</td>
    	<td><input type="text" id="q3-name" value="富士急ハイランド" ></td>
    	<td><input type="text" id="q3-address" value="山梨県富士吉田市新西原5-6-1" ></td>
    	<td><input type="text" id="q3-tel" value="0555-23-2111" ></td>
    </tr>
    <tr>
    	<td>スポット４：</td>
    	<td><input type="text" id="q4-name" value="東京ディズニーランド" ></td>
    	<td><input type="text" id="q4-address" value="千葉県浦安市舞浜1" ></td>
    	<td><input type="text" id="q4-tel" value="045-683-3333" ></td>
    </tr>
    </table>

  </body>
</html>