2018.05.25

【jQuery】なるべくシンプルな記述で同一ページにGoogle Maps APIを複数設置する

Category: JavaScript / jQuery

Tags, ,

同一ページにGoogle Maps APIを複数設置する場合、必要な数だけidを設置しマップの記述も増やしていく必要がありますが、WordPressでACFの柔軟コンテンツや繰り返しフィールド等のようなCMSの繰り返し要素内で設置する必要がある場合などでは、php側での記述なども複雑化してしまいます。

今回のサンプルでは、なるべくシンプルな記述で済むように、HTMLを上にGoogle Maps APIを設置する要素が存在した場合に、JavaScript側でGoogle Maps APIのコアのスクリプトコードを追加しマップを生成するコードを作成してみました。

HTML側の設定

Google Maps APIを出力するタグの設定

class「post-map」を設定し、data属性で緯度「-lat」、経度「-lng」、ズームレベル「-zoom」をそれぞれ設定します。

<div class="post-map" data-lat="35.681167" data-lng="139.767052" data-zoom="14"></div>

スクリプトコードの読み込み

jQueryを利用しているので、マップ生成のスクリプトコードの前に必ず読み込ませます。
1系の最新バージョン、2系の最新バージョン以降であれば問題なく動作すると思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
	//Google Maps APIキー設定
	var mapApiKey = '取得したGoogle Maps APIキー';
</script>
<script src="ファイルまでのパス/map.js"></script>

CMSで動的に取得してくる事を想定し、Google Maps APIキーの設定はHTMLをコード側へ記述しました。
こちらもマップ生成のスクリプトコードの前に記述します。
エラー回避のため、キーが空「''」の場合でも変数の宣言は消さないでください。
※空の状態で反映すると、APIキーのパラメータ設定「?key=」をトルツメします。

スクリプトコード(map.js)

ページ内に、class「.post-map」が設定されている要素が存在していた場合、ページロード後にGoogle Maps APIのコアのスクリプトを読み込み、マップ表示のスクリプトコードが実行されます。

//Google Maps call 
window.addEventListener('load', function() {
	if($('.post-map').length) {
		var setParm = '?callback=initialize';
		if(mapApiKey != '') {
			setParm = '?key='+mapApiKey+'&callback=initialize';
		}
		$('body').append('<script src="https://maps.googleapis.com/maps/api/js'+setParm+'" async defer><\/script>');
	}
});
//set Google Maps
function initialize() {
	$('.post-map').each(function() {
		var thisElm = this;
		//get map info
		var thisLat = Number(thisElm.getAttribute('data-lat'));
		var thisLng = Number(thisElm.getAttribute('data-lng'));
		var thisZoom = Number(thisElm.getAttribute('data-zoom'));
		//set map
		var options = {
			zoom: thisZoom,
			center: new google.maps.LatLng(thisLat,thisLng),
			mapTypeId: google.maps.MapTypeId.ROADMAP,
		};
		var map = new google.maps.Map(thisElm, options);
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(thisLat,thisLng), 
			map: map
		});
	});
}

jQueryのeachを利用して、class「.post-map」が設定されている要素のdata属性の値を取得し、マップのコードを生成しています。

関連リンク

参考リンク

Category : JavaScript / jQuery