例−11：地図外のリンクをクリックすると、地図内のマーカーの吹き出しを表示する(title属性を使ったサンプル)

フォームのボタンを押すと、マーカーが追加されます。
マーカーをクリックすると、フォームで入力した文字が表示されます。

<!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[

    //各マーカーのデータを保持するための配列
    var marker_list = [];
    var txt_list = [];
    var marker_index = 0;
    
    //地図のインスタンスを保持するためのmap変数
    var map;

    function load() { 
      //prettyPrint();
      map = new GMap2(document.getElementById("map")); 
      map.setCenter(new GLatLng(35.676148, 139.74479), 15); 
      map.addControl(new GSmallMapControl()); 
      map.addControl(new GMapTypeControl()); 

      //国会議事堂にマーカを作成
      var txt = "<center><img src='./example_5-1.jpg' vspace=5 hspace=5><br>国会議事堂</center>";
      txt_list.push(txt);
      addMarker(new GLatLng(35.676148,139.74479), txt);

      //外務省にマーカを作成
      txt = "<center><img src='./example_5-2.jpg' vspace=5 hspace=5><br>外務省</center>";
      txt_list.push(txt);
      addMarker(new GLatLng(35.674903,139.749565), txt);
    }
    
    //マーカーを作成して返す
    function addMarker(latlng, txt) {
        //マーカーを作成
        var marker = new GMarker(latlng);
        marker.title = marker_index;

        GEvent.addListener(marker, "click", function() {
            clickMarker(marker.title);
        });

        //マーカーのインスタンスを配列に記憶
        marker_list.push(marker);
        marker_index++;
        
        //マーカーを地図上に配置
        map.addOverlay(marker);
    }
    
    //吹き出しを表示する
    function clickMarker(index) {
        marker_list[index].openInfoWindowHtml(txt_list[index]);
    }

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

  </head>
  <body >
    <table style="width: auto">
      <tbody>
        <tr>
          <td>
          <div style="width: 600px; height: 600px" id="map">&nbsp;</div>
          </td>
          <td align="center"><a onclick="clickMarker(0);" href="javascript:void(0);"><img alt="" src="./example_5-1.jpg" /><br />
          国会議事堂</a><br />
          <br />
          <a onclick="clickMarker(1);" href="javascript:void(0);"><img alt="" src="./example_5-2.jpg" /><br />
          外務省</a></td>
        </tr>
      </tbody>
   </table>
  </body>
</html>