「GoogleMaps API V3」Infowindowの表示する方法

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

今回はInfowindowの中にリンクを設定する方法について説明します。
また、最後にはInfowindowと同時にDIVタグを使ったレイヤーを重ねる様な別ウインドウ表示について説明します。

■Infowindowの大きさ設定

Infowindowにはオプションとして指定できる大きさの引数としてはmaxWidthしかなく、高さ指定がありません。
Infowindowに表示する内容としてのcontentに縦に長いものを渡すと縦方向は適当に内部で処理してくれているようです。以下にその例を示します。（尚、縦に長すぎてmapの縦に収まらない場合はスクロールバーが表示されます）

01<head>
02<title>Google Map API v3-11</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05function initialize() {
06    // Google Mapで利用する初期設定用の変数
07    var latlng = new google.maps.LatLng(36.062092, 136.223323);
08    var mapOptions = {
09        zoom: 14,
10        mapTypeId: google.maps.MapTypeId.ROADMAP,
11        center: latlng
12    };
13    // GoogleMapの生成
14    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
15    // マーカーを生成
16    var gmarker = new google.maps.Marker({
17        map: gmap,
18        position: latlng,
19        title: "福井駅"
20    });
21    // 情報ウィンドウの生成
22    var infoWindow = new google.maps.InfoWindow({
23        content: "InfoWindow - test<br />" +
24             "<a href='http://www.google.co.jp/'>google検索</a><br />" +
25             "0123456789<br />" +
26             "0123456789<br />" +
27             "0123456789<br />" +
28             "0123456789<br />" +
29             "0123456789<br />" +
30             "0123456789<br />" +
31             "0123456789<br />" +
32             "0123456789<br />" +
33             "0123456789<br />" ,
34        maxWidth: 200
35    });
36 
37    // マーカーのクリックイベントの関数登録
38    google.maps.event.addListener(gmarker, 'click', function(event) {
39        // 情報ウィンドウの表示
40        infoWindow.open(gmap, gmarker);
41    });
42}
43</script>
44</head>
45<body onload="initialize()">
46    <div id="map" style="width: 300px; height: 400px;"></div>
47</body>
48</html>

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

Infowindowのcontentの内容をDIVタグを使って囲み、DIVのCSS宣言でwidthとheightを設定すれば表示ウインドウの大きさが指定できます。

01<head>
02<title>Google Map API v3-11-2</title>
03<style type="text/css">
04#infowindowclass {
05    width: 400px;
06    height: 100px;
07}
08</style>
09<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
10<script type="text/javascript">
11function initialize() {
12    // Google Mapで利用する初期設定用の変数
13    var latlng = new google.maps.LatLng(36.062092, 136.223323);
14    var mapOptions = {
15        zoom: 14,
16        mapTypeId: google.maps.MapTypeId.ROADMAP,
17        center: latlng
18    };
19    // GoogleMapの生成
20    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
21    // マーカーを生成
22    var gmarker = new google.maps.Marker({
23        map: gmap,
24        position: latlng,
25        title: "福井駅"
26    });
27    // 情報ウィンドウの生成
28    var infoWindow = new google.maps.InfoWindow({
29        content: "<div id='infowindowclass'>" +
30             "InfoWindow - test<br />" +
31             "<a href='http://www.google.co.jp/'>google検索</a>" +
32             "</div>"
33    });
34    // マーカーのクリックイベントの関数登録
35    google.maps.event.addListener(gmarker, 'click', function(event) {
36        // 情報ウィンドウの表示
37        infoWindow.open(gmap, gmarker);
38    });
39}
40</script>
41</head>
42<body onload="initialize()">
43    <div id="map" style="width: 700px; height: 300px;"></div>
44</body>
45</html>

■DIVタグによる別レイヤーの様なウインドウ表示

マップ上にいろいろな情報を固定位置で別のウインドウで表示したくなることはよくあります。
GoogleMapの関数を使うわけではありませんが、以前GoogleMapを使ったページで組み込んだことがありますので付随情報として説明します。

マップ上のマーカーをクリックしてください。InfoWindowと同時に別ウインドウを表示します。
別ウインドウの右上の「X」マークをクリックするとウインドウを非表示にします。

マップを表示するDIVタグmapの親要素DIVを導入し、そのpositionをrelativeに設定します。
ウインドウのDIVタグであるinfo_cmdのpositionをabsoluteに設定し、topとrightで位置決めします。
更にbackground-imageでウインドウ風の画像を背景に表示することで、ウインドウの様に見えます。
このウインドウの表示・非表示はinfo_cmdのdisplayをblock・noneに切り替えることで行います。

TEST TITLE

これはテストです。
1111111111111111
222222222222222222

01<head>
02<title>Google Map API v3-11-3</title>
03<style type="text/css">
04#infowindowclass {
05    width: 400px;
06    height: 100px;
07}
08#info_cmd{
09    display:none;
10    top:80px;
11    right:20px;
12    width:200px;
13    height:200px;
14    background-image:url(./images/area_map_cmd.gif);
15    background-repeat:no-repeat;
16    position: absolute;
17}
18#info_cmd .info_cmd_close{
19    padding-top:2px;
20    font-size:15px;
21    text-align:right;
22    width:195px;
23    float: left;
24}
25#info_cmd_in{
26    font-size:12px;
27    color:#000;
28    width:186px;
29    position: absolute;
30    top: 6px;
31}
32#info_cmd_in p {
33    margin-left: 5px;
34    font-size: 12px;
35    line-height: 1.4;
36}
37</style>
38<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
39<script type="text/javascript">
40function initialize() {
41    // Google Mapで利用する初期設定用の変数
42    var latlng = new google.maps.LatLng(36.062092, 136.223323);
43    var mapOptions = {
44        zoom: 14,
45        mapTypeId: google.maps.MapTypeId.ROADMAP,
46        center: latlng
47    };
48    // GoogleMapの生成
49    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
50    // マーカーを生成
51    var gmarker = new google.maps.Marker({
52        map: gmap,
53        position: latlng,
54        title: "福井駅"
55    });
56    // 情報ウィンドウの生成
57    var infoWindow = new google.maps.InfoWindow({
58        content: "<div id='infowindowclass'>" +
59             "InfoWindow - test<br />" +
60             "<a href='http://www.google.co.jp/'>google検索</a>" +
61             "</div>"
62    });
63    // マーカーのクリックイベントの関数登録
64    google.maps.event.addListener(gmarker, 'click', function(event) {
65        // 情報ウィンドウの表示
66        infoWindow.open(gmap, gmarker);
67        // 別ウインドウの表示
68        showCmd();
69    });
70}
71//情報ウインドウの表示（右下の四角）
72function showCmd(){
73    document.getElementById('info_cmd').style.display = "block";    //ウインドウの表示
74}
75//情報ウインドウを隠す
76function closeCmd(){
77    document.getElementById('info_cmd').style.display = "none"; //ウインドウの非表示
78}
79</script>
80</head>
81<body onload="initialize()">
82<div id="map_main" style="width: 700px; position: relative;">
83    <div id="map" style="width: 700px; height: 300px;"></div>
84    <div id="info_cmd">
85      <div class="info_cmd_close"><a href="javascript:;" onClick="closeCmd()" style="color:#000;text-decoration:none">×</a></div>
86      <div id="info_cmd_in">
87        <h6>TEST TITLE</h6>
88        <p>
89        これはテストです。<br />
90        1111111111111111<br />
91        222222222222222222
92        </p>
93      </div>
94    </div>
95    </div>
96</div>
97</body>
98</html>

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

■Infowindowの大きさ設定

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

■DIVタグによる別レイヤーの様なウインドウ表示

TEST TITLE

■関連記事

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