例－６：地図上にフォームを表示する

フォームのボタンを押すと、マーカーが追加されます。
マーカーをクリックすると、フォームで入力した文字が表示されます。
<!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[
      //地図インスタンスを保持するための変数
      //addMarkerで使うので、大域的変数として定義
      var map;
      
      //myButton クラスのコンストラクタ
      function myButton() {}
      
      //GControl クラスを継承する
      myButton.prototype = new GControl();
      
      //コントロールが地図に追加されたときに呼び出される
      //主に初期化のために用いられる
      myButton.prototype.initialize = function(map) {
        
        //Divコンテナを作成
        var container = document.createElement("div");
        
        //フォーム作成
        var customPanel = document.createElement("div");
        customPanel.innerHTML ="<form> " + 
             "<TABLE style='WIDTH: auto'><TBODY><TR><TD>" +
             "<INPUT id='msg' name='msg' size=22 value='テスト'></TD>" + 
             "<TD><INPUT type='button' onclick='javascript:addMarker(this.form);' " +
             " value='マーカーを追加する'>" + 
             "</TD></TR></TBODY></TABLE>" + 
             "</FORM>"; 
        
        //コンテナに追加
        container.appendChild(customPanel);
        
        //コンテナを地図上に追加
        map.getContainer().appendChild(container);
        
        //コンテナDiv を返す
        return container;
      }
      
      //位置が指定されなかったとき、コントロールの位置を決めます
      myButton.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 15));
      }
      
      function addMarker(formObj) {
        //フォーム内の msg 要素から文字を取得
        var txt = formObj.msg.value;
        
        //表示エリアの範囲を取得
        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();
        var lngSpan = ne.lng() - sw.lng();
        var latSpan = ne.lat() - sw.lat();
        
        //ランダムな位置にマーカーを配置する
        var lat = sw.lat() + latSpan * Math.random();
        var lng = sw.lng() + lngSpan * Math.random();
        var latlng = new GLatLng(lat, lng);
        
        var marker = new GMarker(latlng);
        GEvent.addListener(marker, "click", function(){
          marker.openInfoWindow(txt);
        });
        map.addOverlay(marker);
        
        //とりあえず開いてみる
        GEvent.trigger(marker, "click");
      }
      
      function load() {
 //       prettyPrint();
        
        if (GBrowserIsCompatible()) {
          //地図を作成
          map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(35.677335,139.744613), 16);
  
          //自作ボタンの追加
          map.addControl(new myButton());
        }
      }  
      //ページがロードされたら、load 関数を実行して、地図を表示する
      window.onload = load;
      
      //ページを抜けるとき、メモリ開放
      window.onunload = GUnload;
    //]]>
    </script>

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