例−15：住所からマーカをマッピングする(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();
      
      //住所からマーカーを作成する
      var max = 4;
      for(i = 1; i <= max; i++) { 
        //マーカー作成
        var address = document.getElementById("q"+i).value; 
        addGeoMarker(address);
      } 
    }
    
    function addGeoMarker(address) { 
      
      //ジオコーディングをリクエストする
      gGeo.getLatLng(address, function(point) {
        addGeoMarker_callback(point, address);
      });
    }
    
    function addGeoMarker_callback(point, address) {
      if (point !== null) {
        //マーカーを作成 
        var marker = new GMarker(point); 
        GEvent.addListener(marker, "click", function() {
          var txt="<div align='left'><b>住所：</b>" + address + "<br/></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">
    <tr>
    	<td>マーカー１：</td><td><input type="text" id="q1" value="東京タワー" ></td>
    </tr>
    <tr>
    	<td>マーカー２：</td><td><input type="text" id="q2" value="大阪" ></td>
    </tr>
    <tr>
    	<td>マーカー３：</td><td><input type="text" id="q3" value="富士山" ></td>
    </tr>
    <tr>
    	<td>マーカー４：</td><td><input type="text" id="q4" value="名古屋城" ></td>
    </tr>
    </table>
  </body>
</html>