おやじプログラマー日記 : 「GoogleMap API V3」の使い方その11（さらにInfowindow）

■Infowindowの大きさ設定

以前の記事の中でInfowindowを使って単なる文字列の表示を行ったことがありましたが、このブログをご覧の方で、「リンクが貼れればいいのに」との感想がどこかにありました。そこで、今回はそのリンクと併せて、Infowindowの大きさ設定のことについて記事を書きます。

Infowindowにはオプションとして指定できる大きさの引数としてはmaxWidthしかなく、高さ指定がありません。 Infowindowに表示する内容としてのcontentに縦に長いものを渡すと縦方向は適当に内部で処理してくれているようです。以下にその例を示します。（尚、縦に長すぎてmapの縦に収まらない場合はスクロールバーが表示されます）
<head> <title>Google Map API v3-11</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを生成 var gmarker = new google.maps.Marker({ map: gmap, position: latlng, title: "福井駅" }); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: "InfoWindow - test<br />" + "<a href='http://www.google.co.jp/'>google検索</a><br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" , maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(gmap, gmarker); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 400px;"></div> </body> </html>

■DIVタグによるInfowindowの大きさ設定

Infowindowのcontentの内容をDIVタグを使って囲み、DIVのCSS宣言でwidthとheightを設定すれば表示ウインドウの大きさが指定できます。
<head> <title>Google Map API v3-11-2</title> <style type="text/css"> #infowindowclass { width: 400px; height: 100px; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを生成 var gmarker = new google.maps.Marker({ map: gmap, position: latlng, title: "福井駅" }); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: "<div id='infowindowclass'>" + "InfoWindow - test<br />" + "<a href='http://www.google.co.jp/'>google検索</a>" + "</div>" }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(gmap, gmarker); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 500px; height: 300px;"></div> </body> </html>