おやじプログラマー日記: 2011年7月

■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>

おやじプログラマー日記

コンピュータ業界に身をおいて３０年あまり…VB.NET・OracleなどのTIPS、おやじの独り言

おすすめ本

最近の記事

最近のトラックバック

Ranking

最近のコメント

アーカイブ

AccRanking

Ad

2011年7月

2011年7月29日 (金)

「GoogleMap API V3」の使い方その11（さらにInfowindow）

検索

admax

カテゴリ

リンク

LSF

LPOP