クリックして表示する情報ウィンドウに多くの情報を表示する｜Google Maps API v3

Google Maps API(v3) を利用してピン表示と共によく利用される、
情報ウィンドウに対して写真やテキスト、リンクなど、
様々な情報を表示してレイアウトする例をご紹介します。

概要

1 地図の表示
2 サンプルコード
3 関連

地図の表示

指定したGPS座標に対してピンを表示し、
表示しているピンをクリックすると、
その場所の詳細情報が画像と共に情報ウィンドウに表示されます。

簡単な動作ではありますが、一番マップ操作で見られる基本的なものです。
あとはどういった情報を表示するのかという事だけです。

サンプルコード

HTML（共通）

HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。

<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

1	<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

CSS（共通）

CSSではclass=”aspect”に対して、幅100%を指定し、高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

<style type="text/css">
	.aspect{
		width:100%;
		height:50vw;
	}
	.aspect_normal,
	.aspect_dot,
	.aspect_key,
	.aspect_dotkey{
		width:100%;
		height:25vw;
	}
	#gmap_canvas,
	#gmap_canvas_normal,
	#gmap_canvas_dot,
	#gmap_canvas_key,
	#gmap_canvas_dotkey,
	div.g_canvas{
		width:100%;
		height:100%;
	}

</style>

.aspect{

width:100%;

height:50vw;

}

.aspect_normal,

.aspect_dot,

.aspect_key,

.aspect_dotkey{

width:100%;

height:25vw;

}

#gmap_canvas,

#gmap_canvas_normal,

#gmap_canvas_dot,

#gmap_canvas_key,

#gmap_canvas_dotkey,

div.g_canvas{

width:100%;

height:100%;

}

</style>

CSS（情報ウィンドウ用）

以下のJavaScript側から
google.maps.InfoWindowインスタンスに対し、
動的に追加・生成したDOM要素に対して、表示用のスタイルを設定しています。

<style type="text/css">

div.gmapinfo{
margin:1px;
padding:1px;
}
div.gmapinfo img{
width:15vw;
}

span.title p{
font-weight:bold;
}

@media screen and (min-width: 781px) {
 	div.gmapinfo span p,
 	span.title p,
 	div.gmapinfo a{
 	font-size: 14px;
 	}
 }

@media screen and (min-width: 381px) and (max-width: 780px) {
 	div.gmapinfo span p,
	 span.title p,
 	div.gmapinfo a{
 		font-size: 14px;
		line-height: 0px;
 	}
 }

@media screen and (max-width: 380px) {
 	span.title p{
 		font-size: 12px;
		padding:1px;
		line-height: 14px;
	}

 	div.gmapinfo span p,
 	div.gmapinfo a{
 		font-size: 10px;
		padding:1px;
		line-height: 0px;
 	}
 }

</style>

div.gmapinfo{

margin:1px;

padding:1px;

}

div.gmapinfo img{

width:15vw;

}

span.title p{

font-weight:bold;

}

@media screen and (min-width: 781px) {

div.gmapinfo span p,

span.title p,

div.gmapinfo a{

font-size: 14px;

}

@media screen and (min-width: 381px) and (max-width: 780px) {

div.gmapinfo span p,

span.title p,

div.gmapinfo a{

font-size: 14px;

line-height: 0px;

}

@media screen and (max-width: 380px) {

span.title p{

font-size: 12px;

padding:1px;

line-height: 14px;

}

div.gmapinfo span p,

div.gmapinfo a{

font-size: 10px;

padding:1px;

line-height: 0px;

}

</style>

スタイルシートの設定は埋込対象のサイト構成（CMSやテーマなど）によって、様々な影響を受けることと思います。適宜、ご自分の環境に合せて調整する必要があります。

JavaScript

情報ウィンドウにはJavaScriptからDOM操作によって、各表示情報の要素を追加しています。 div.wrapper要素の子要素としてすべての要素を順に追加していきます。マップに対しては位置指定をしたデフォルトピンを配置し、配置したピンに対してイベントリスナーをセットし、クリックイベントが発生したら作成済の情報ウィンドウ(google.maps.InfoWindow)を開くようにしています ※「iw.open(gmap_canvas);」部。追加した要素はHTML要素そのままなので、表示用のCSSを別途定義し、レイアウトを調整しています。

<script type="text/javascript">
	function init(){
		var map_div = document.getElementById("gmap_canvas");
		var gmap_canvas = new google.maps.Map(map_div,{
			center: new google.maps.LatLng(34.839450, 134.693903),
			zoom : 14,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		});

		//create contents
		var wrapper = document.createElement("div");
		wrapper.className = "gmapinfo";
		wrapper.id = "i_gmapinfo";

		var image = document.createElement("img");
		image.src = "http://castle-himeji.com/d1/wp-content/uploads/2015/05/eye_vs-kisai_gate.png";
		image.alt = "eye_vs-kisai_gate.png";

		var title = document.createElement("span");
		title.className = "title";
		var titlep = document.createElement("p");
		titlep.innerText = "世界文化遺産 国宝 姫路城";
		title.appendChild(titlep);

		var contentInner = document.createElement("span");
		contentInner.className = "contentinner";
		var contentInnerp = document.createElement("p");
		contentInnerp.innerText = "〒670-0012 兵庫県姫路市本町６８";
		contentInner.appendChild(contentInnerp);

		var link = document.createElement("a");
		link.appendChild(document.createTextNode("大入実況｜世界文化遺産国宝姫路城"));
		link.href = "http://www.himejicastle.jp/";
		link.target = "_blank";

		wrapper.appendChild(image);
		wrapper.appendChild(title);
		wrapper.appendChild(contentInner);
		wrapper.appendChild(link);


		//create infowindow
		var iw = new google.maps.InfoWindow({
			position: new google.maps.LatLng(34.839450, 134.693903),
			content: wrapper
		});

		//create marker
		var def_marker = create_marker({
			map: gmap_canvas,
			position: new google.maps.LatLng(34.839450, 134.693903)
		});

		//maker ivent
		google.maps.event.addDomListener(def_marker,"click", function(){
			iw.open(gmap_canvas);
		});

	}

	function create_marker(options){
		var m =  new google.maps.Marker(options);
		return m;
	}

	google.maps.event.addDomListener(window,"load",init);
	$('#ver').text(google.maps.version);
</script>

function init(){

var map_div = document.getElementById("gmap_canvas");

var gmap_canvas = new google.maps.Map(map_div,{

center: new google.maps.LatLng(34.839450, 134.693903),

zoom : 14,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

//create contents

var wrapper = document.createElement("div");

wrapper.className = "gmapinfo";

wrapper.id = "i_gmapinfo";

var image = document.createElement("img");

image.src = "http://castle-himeji.com/d1/wp-content/uploads/2015/05/eye_vs-kisai_gate.png";

image.alt = "eye_vs-kisai_gate.png";

var title = document.createElement("span");

title.className = "title";

var titlep = document.createElement("p");

titlep.innerText = "世界文化遺産国宝姫路城";

title.appendChild(titlep);

var contentInner = document.createElement("span");

contentInner.className = "contentinner";

var contentInnerp = document.createElement("p");

contentInnerp.innerText = "〒670-0012 兵庫県姫路市本町６８";

contentInner.appendChild(contentInnerp);

var link = document.createElement("a");

link.appendChild(document.createTextNode("大入実況｜世界文化遺産国宝姫路城"));

link.href = "http://www.himejicastle.jp/";

link.target = "_blank";

wrapper.appendChild(image);

wrapper.appendChild(title);

wrapper.appendChild(contentInner);

wrapper.appendChild(link);

//create infowindow

var iw = new google.maps.InfoWindow({

position: new google.maps.LatLng(34.839450, 134.693903),

content: wrapper

});

//create marker

var def_marker = create_marker({

map: gmap_canvas,

position: new google.maps.LatLng(34.839450, 134.693903)

});

//maker ivent

google.maps.event.addDomListener(def_marker,"click", function(){

iw.open(gmap_canvas);

});

}

function create_marker(options){

var m = new google.maps.Marker(options);

return m;

}

google.maps.event.addDomListener(window,"load",init);

$('#ver').text(google.maps.version);

</script>

別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。
ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>

1	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>

クリックして表示する情報ウィンドウに多くの情報を表示する｜Google Maps API v3

地図の表示

サンプルコード

HTML（共通）

CSS（共通）

CSS（情報ウィンドウ用）

JavaScript

関連