Google Maps JavaScript API v3で作る「フキダシの枠」をカスタマイズ！infobox.jsの使い方

はっちゃん

2017.05.23

こんにちは、はっちゃんです。
今回はinfobox.jsの使い方をご説明します。

Google Mapをサイトに埋め込む際、Google Mapから取得できるURLで iframe として表示させるのではなく、スタイルやピンの画像を自由にカスタマイズできる「Google Maps JavaScript API v3」を使用することが多いですよね。

GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！

はやち

2021.01.13

ですが、このAPIを使用しても、吹き出しのスタイルを変えるのは容易ではないんです。

デフォルトのメソッド、InfoWindowの使い方
infobox.jsの使い方
まとめ

デフォルトのメソッド、InfoWindowの使い方

生成したDOMは、InfoWindowのオプションから、contentをvalueに設定するだけで簡単に表示できます。

See the Pen infowindow by k_hatsushi (@hatsushi_kazuya) on CodePen.

ですが、たとえば「枠の色を変えたいなー」と思っても、従来のInfoWindowメソッドを使用して作ったDOMだと、枠の内側にもうひとつ枠が生成されてしまうんです。

infobox.jsの使い方

そこで、枠ごとDOMを自由に生成できるプラグイン、「infobox.js」の登場です。
ポイントは、infobox.js を Google Maps JavaScript API v3 のあとに読み込ませるだけ。あとはInfoWindowとほぼ同じで、DOMを作ってマーカーの上に置けば完成です。

HTML

<div id="js-gmap" class="gmap" data-latitude="35.710260" data-longitude="139.777228" data-title="株式会社LIG"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<scrip src="//maps.googleapis.com/maps/api/js?key=[Google Maps JavaScript API v3のkeyコード]"></script>
<script src="https://82mou.github.io/infobox/lib/infobox.js"></script>

CSS

.gmap {
	margin-top: 30px;
	height: 450px;
}
.gmap-info-window {
	position: relative;
	width: 250px;
	padding: 25px 30px;
	border: 2px solid #EC492C;
	background-color: #fff;
}
.gmap-info-window:before {
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: -10px;
	width: 20px;
	height: 10px;
	transform: translate(-50%, 0);
	background: url(https://82mou.github.io/infobox/img/gmap-info-window-frame-point.png) no-repeat 0 0;
	content: '';
}
.gmap-info-window-title {
	color: #EC492C;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
.gmap-info-window-address {
	margin-top: 10px;
	font-size: 12px;
	font-weight: bold;
}

JS

function setMap() {
	var $map = $('#js-gmap');
	var latitude = $map.data('latitude'), // 緯度
		longitude = $map.data('longitude'), // 経度
		title = $map.data('title'); // タイトル
	var targetLatlng = new google.maps.LatLng(latitude, longitude);

	var myOptions = {
		zoom: 15, // 拡大比率
		center: targetLatlng, // 表示枠内の中心点
		mapTypeId: google.maps.MapTypeId.ROADMAP // 表示タイプの指定
	};
	var map = new google.maps.Map(document.getElementById('js-gmap'), myOptions);

	var targetMarker = new google.maps.Marker({
		position: targetLatlng,
		map: map,
		title: 'LIG'
	});

	// infobox用のDOMを生成
	var infoboxContent = '<div class="gmap-info-window-inner"><p class="gmap-info-window-title">株式会社LIG</p><p class="gmap-info-window-address">〒110-0015 東京都台東区東上野２丁目１８−７ 共同ビル</p></div>';

	// infoboxのオプション
	var infoboxOptions = {
		content: infoboxContent, // 生成したDOMを割り当てる
		pixelOffset: new google.maps.Size(-188, -55), // オフセット値
		alignBottom: true, // 位置の基準
		position: targetLatlng, // 位置の座標
		boxClass: "gmap-info-window", // 生成したDOMをラップするdivのclass名
		closeBoxMargin: "-15px -20px 0px 0px", // 閉じるボタンの位置調整
		closeBoxURL: 'https://82mou.github.io/infobox/img/close.png' // 閉じるボタンの画像パス
	};
	// infoboxを生成して表示
	var infobox = new InfoBox(infoboxOptions);

        // infoboxを表示
	infobox.open(map, targetMarker);

	// マーカーがクリックされた時にinfoboxを表示
	targetMarker.addListener('click', function() {
		infobox.open(map, targetMarker);
	});
}

$(window).on('load', function() {
	setMap();
});