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

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

■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=MyKeyCode" 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=MyKeyCode" 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: 700px; height: 300px;"></div>
</body>
</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 

<head>
<title>Google Map API v3-11-3</title>
<style type="text/css">
#infowindowclass {
	width: 400px;
	height: 100px;
}
#info_cmd{
    display:none;
    top:80px;
    right:20px;
    width:200px;
    height:200px;
    background-image:url(./images/area_map_cmd.gif);
    background-repeat:no-repeat;
    position: absolute;
}
#info_cmd .info_cmd_close{
    padding-top:2px;
    font-size:15px;
    text-align:right;
    width:195px;
    float: left;
}
#info_cmd_in{
    font-size:12px;
    color:#000;
    width:186px;
    position: absolute;
    top: 6px;
}
#info_cmd_in p {
	margin-left: 5px;
	font-size: 12px;
	line-height: 1.4;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" 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);
		// 別ウインドウの表示
		showCmd();
	});
}
//情報ウインドウの表示（右下の四角）
function showCmd(){
	document.getElementById('info_cmd').style.display = "block";	//ウインドウの表示
}
//情報ウインドウを隠す
function closeCmd(){
	document.getElementById('info_cmd').style.display = "none";	//ウインドウの非表示
}
</script>
</head>
<body onload="initialize()">
<div id="map_main" style="width: 700px; position: relative;">
	<div id="map" style="width: 700px; height: 300px;"></div>
	<div id="info_cmd">
	  <div class="info_cmd_close"><a href="javascript:;" onClick="closeCmd()" style="color:#000;text-decoration:none">×</a></div>
	  <div id="info_cmd_in">
	    <h6>TEST TITLE</h6>
	    <p>
	    これはテストです。<br />
	    1111111111111111<br />
	    222222222222222222
	    </p>
	  </div>
	</div>
	</div>
</div>
</body>
</html>

■関連記事
⇒「GoogleMaps API V3」の使い方その１
⇒「GoogleMaps API V3」の使い方その２
⇒「GoogleMaps API V3」の使い方その３（マーカーの表示）
⇒「GoogleMaps API V3」の使い方その４（イベント）
⇒「GoogleMaps API V3」の使い方その５（続イベント）
⇒「GoogleMaps API V3」の使い方その６（続々イベント）
⇒「GoogleMaps API V3」の使い方その７（ポリライン・ポリゴン）
⇒「GoogleMaps API V3」の使い方その８（ジオコーディング）
⇒「GoogleMaps API V3」の使い方その９（ルート検索）
⇒「GoogleMaps API V3」の使い方その10（ルート検索2）

ページのトップへ戻る