LabPad（ラボパッド）は、WEBを仕事にするオオタニのサンプル記録帳です。

• 一覧に戻る

demo

memo

作業内容

前回のGoogle Maps API version3を使ってみる（1）では、表示させるための記述を学びましたが、今回はマーカーや情報ウィンドウを加えるなどもう少し便利にGoogle Mapを使ってみたいと思います。

• UI（コントローラー）の変更
• マーカーの表示
• 情報ウィンドウの表示

--- head内に設定等を記述 ---
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(33.59232418300553,130.3789624214172);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
	  
      //地図タイプの切り替えボタン設定
      mapTypeControl : true,
      mapTypeControlOptions : {
      　style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
      //地図のズームコントローラの設定
      navigationControl : true,
      navigationControlOptions : {
      　style : google.maps.NavigationControlStyle.ANDROID
      },
      //地図内のスケール確認箇所の設定
      scaleControl : true,
      scaleControlOptions : {
      　style : google.maps.ScaleControlStyle.DEFAULT
      }
    };
	
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
    //マーカー設定
    var marker = new google.maps.Marker({
    　position: latlng,　//マーカーの緯度、経度
    　map: map,
    　title:"ここで書いてます"　//オンマウスで表示させる文言
    });
	
    //情報ウィンドウ設定    
    var contentString =
    '<h1>ここで書いています</h1>'+
    '<p>福岡県福岡市中央区荒戸になります。<br />' +
    '夜は暴走族と救急車がよく通ります。</p>';

    var infowindow = new google.maps.InfoWindow({
    　content: contentString,　//情報ウィンドウ内のテキスト
    　size: new google.maps.Size(350, 100)　//情報ウィンドウのサイズ（幅、高さ）
    });

    google.maps.event.addListener(marker, 'click', function() {
    　infowindow.open(map,marker);
    });
  }
</script>

UI（コントローラー）の設定については以下の通りです。

マーカーの表示については上記サンプルコードの通りです。
情報ウィンドウについても同じくサンプルの通りなのですが、1個だけよくわからないんですが。情報ウィンドウのサイズなんですが、指定したとおりに表示されないんですが。ウィンドウ内にスクロールが入るのは避けたいので大きめに指定するも変わってくれません。maxWidthでも指定しましたが、こちらもうまくいかず。謎。調べてたらinfowindowのサイズ指定 - American Life in the Summertimeて記事に詳しく書かれてて、ライブラリを使う手もあるとのことでした。

参考記事

• Google Maps Javascript API V3 Overlays - Google Maps JavaScript API V3 - Google Code
• 1-3. コントロールの追加 - Google Maps 活用講座
• infowindowのサイズ指定 - American Life in the Summertime