【更新日 : 】
【jQuery】なるべくシンプルな記述で同一ページにGoogle Maps APIを複数設置する
- Category：
- jQuery
- Tags：
- Google Maps API, JavaScript, jQuery
2018年執筆時の環境で実装したコードです。
現行環境での動作保証はできません。
同一ページに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=」をトルツメします。
JavaScript（map.js）
ページ内に、class「.post-map」が設定されている要素が存在していた場合、ページロード後にGoogle Maps APIのコアのスクリプトを読み込み、マップ表示のスクリプトコードが実行されます。
jQueryのeachを利用して、class.post-mapが設定されている要素のdata属性の値を取得し、マップのコードを生成しています。
//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
});
});
}