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

2011年7月29日 (金)

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

投稿時刻 14:34 GoogleMap API, javascript | 個別ページ

トラックバック

このページのトラックバックURL：
http://app.mitelog.jp/t/trackback/459161/26852918

「GoogleMap API V3」の使い方その11（さらにInfowindow）を参照しているブログ:

はじめまして。

Googleの検索にて「おやじプログラマー日記」を知りました。

google maps api v3に関して数多くの情報が掲載されており、勉強させて頂きました。

マーカーに関してご質問があります。
もし差し支えなければ、ご返答頂ければ幸いです。
（面倒でしたら返答不要です）

●
HTMLページにて「日本」「韓国」「アメリカ」という複数のテキストリンクを用意して、それぞれをクリックしたら、該当するマーカーが表示されるようにしたいのですが、そのようなことは可能でしょうか？

Googleで検索しても、そのようなページとソースの解説が見当たりませんでした。

もし、ご存知でしたら、ご教授願います。

投稿：多田　靖志 | 2013年9月 9日 (月) 13:30

3箇所のMarkerを作成しておいて、
3箇所のリンクでJavascriptの関数か何かを起動して
各々のMarkerを表示させる感じでどうでしょうか。

”「GoogleMap API V3」の使い方その６”
では1個の場合のみですが、3箇所に拡張すれば
できると思います。

投稿：ブログ管理者 | 2013年9月 9日 (月) 13:54

おやじプログラマー日記

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

おすすめ本

最近の記事

最近のトラックバック

Ranking

最近のコメント

アーカイブ

AccRanking

Ad

2011年7月29日 (金)

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

トラックバック

コメント

コメントを投稿

検索

admax

カテゴリ

リンク

LSF

LPOP

おやじプログラマー日記

おすすめ本

最近の記事

最近のトラックバック

Ranking

最近のコメント

アーカイブ

AccRanking

Ad

2011年7月29日 (金)

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

トラックバック

コメント

コメントを投稿

検索

admax

カテゴリ

リンク

LSF

LPOP

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