例−13：吹き出しのサイズを固定するサンプル

GInfoWindow にはサイズを固定する方法は用意されていません。そこで<div>タグを使って、強制的に中のコンテンツのサイズを固定しています。

<!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[
    function load(){ 
      //地図を作成
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(35.677335,139.744613), 16);
 
      //マーカーを作成(国会議事堂)
      var marker = new GMarker(new GLatLng(35.676148,139.74479));
 
      //マーカーをクリックしたら、吹き出しを表示する
      GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml("<div style='width:300px;height:150px;'>ここに<br />テキストを入れる。</div>");
      });
 
      //マーカーを地図上に配置
      map.addOverlay(marker);
    }
    
    //ページがロードされたら、load 関数を実行して、地図を表示する
    window.onload = load;
    
    //ページを抜けるとき、メモリ開放
    window.onunload = GUnload;
    //]]>

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