例－７：吹き出しの内容を変更できる吹き出しを表示する

フォームのボタンを押すと、マーカーが追加されます。
マーカーをクリックすると、フォームで入力した文字が表示されます。
<!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 map; 

    //情報ウィンドウの作成 
    function addEditableMarker(latlng, initData) {
      //マーカーを作成
      var marker = new GMarker(latlng); 
      
      //表示用のdiv
      var view = document.createElement("div"); 
      view.innerHTML = initData;

      //編集タブの内容 
      var form = document.createElement("form"); 
      var textarea = document.createElement("textarea"); 
      textarea.cols = "30"; 
      textarea.rows = "6"; 
      var text = document.createTextNode(initData); 
      textarea.appendChild(text); 
      var button = document.createElement("input"); 
      button.type = "button"; 
      button.value = "更新"; 
      
      //[更新]ボタンがクリックされたら、表示用divの内容を変更する
      //(※ここにサーバーに送信するなどの処理を書く)
      button.onclick = function(){ 
        view.innerHTML = textarea.value; 
        map.getInfoWindow().selectTab(0); 
      } 
      form.appendChild(textarea); 
      form.appendChild(button);
      
      //マーカーがクリックされたら、タブつきのふきだしを開く
      GEvent.addListener(marker, "click", function() {
        var tab1 = new GInfoWindowTab("表示", view);
        var tab2 = new GInfoWindowTab("編集", form); 
        marker.openInfoWindowTabs( [tab1, tab2] );
      });
      
      return marker;
    }

    function load(){ 
      prettyPrint();
      map = new GMap2( document.getElementById("map"));
      
      var centerPos = new GLatLng(35.6984,139.7732); 
      map.setCenter(centerPos, 13 );

      //クリック位置に編集可能マーカーを付ける 
      GEvent.addListener(map, "click", function(overlay, latlng) { 
        if (!overlay) {
          var marker = addEditableMarker(latlng,  "<p>データを入力してください</p>" );
          map.addOverlay(marker);
        }
      });
      
      //地図の中央に追加する
      var marker = addEditableMarker(centerPos,  "<p>データを入力してください</p>" );
      map.addOverlay(marker);
      GEvent.trigger(marker, "click");
    } 
    //ページがロードされたら、load 関数を実行して、地図を表示する
    window.onload = load;
    
    //ページを抜けるとき、メモリ開放
    window.onunload = GUnload;
    //]]>
    </script>

  </head>
  <body >
    <div id="map" style="width: 600px; height: 600px"></div>
  </body>
</html>