CMSで入力した内容をjsonで出力してGoogle Mapsに表示するということがたまにあるので、jsonの内容使ってマーカーを設置する実装方法をメモしておきます。
サンプルコード
今回はこのようなjsonを用意しました。
{
"data": [
{
"name": "AKIBAカルチャーズZONE",
"latlng": {
"lat": 35.699519,
"lng": 139.770388
}
}, {
"name": "秋葉原ガチャポン会館",
"latlng": {
"lat": 35.701861,
"lng": 139.771220
}
},
～ 略 ～
{
"name": "コミックとらのあな秋葉原店C",
"latlng": {
"lat": 35.700536,
"lng": 139.771158
}
}
]
}
地図を設置するエリアを用意します。
HTML
<div id="map"></div>
Google Maps APIの読み込みと、今回は一部jQueryを使うのでjQueryの読み込みを追加します。
APIの使用にAPIキーが必要になりますので、取得して設定するようにしてください。
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=api_ready"></script>
CSSで地図のサイズを指定します。
CSS
#map {
width: 1000px;
height: 600px;
}
最後にjsonデータを取得して、地図上にマーカーを設置する処理をJavaScriptで追加します。
JavaScript
var ready = { api: false, ajax: false };
var map;
var mapData;
var mapOptions = {
center: { // 地図の緯度経度
lat: 35.700000,
lng: 139.772000
},
zoom: 17, // 地図の拡大率
scrollwheel: false, // ホイール操作で拡大縮小させるかどうか
mapTypeControl: false, // マップ切り替えのコントロールを表示するかどうか
streetViewControl: false // ストリートビューのコントロールを表示するかどうか
}
$(function() {
$.ajax({
url: 'data.json',
cache: false
})
.then(
function (data) {
mapData = data['data'];
ready['ajax'] = true;
generate_map();
},
function () {
console.log('取得に失敗しました。');
}
);
});
/**
* Google Maps APIの準備完了後の処理
*/
function api_ready() {
ready['api'] = true;
generate_map();
}
/**
* 地図を生成する
*/
function generate_map() {
if(ready['api'] && ready['ajax']) {
map = new google.maps.Map(document.getElementById('map'), mapOptions);
add_marker();
}
}
/**
* 地図にマーカーを追加する
*/
function add_marker() {
for (var i = 0; i < mapData.length; i++) {
var item = mapData[i];
// マーカーの設置
var marker = new google.maps.Marker({
position: item['latlng'],
map: map
});
}
}
これで地図を生成してマーカーを設置することができました。
jsonで取得した情報でマーカーを設置するデモページ
大まかな処理はコメントに記載していますが、15～30行目でjsonデータを取得してデータを変数に格納、35～38行目で地図を生成、53～63行目で地図にマーカーを設置しています。
次に、マーカーをクリックすると吹き出しが表示されるように機能を追加してみます。
JavaScript
var ready = { api: false, ajax: false };
var map;
var mapData;
var mapOptions = {
center: { // 地図の緯度経度
lat: 35.700000,
lng: 139.772000
},
zoom: 17, // 地図の拡大率
scrollwheel: false, // ホイール操作で拡大縮小させるかどうか
mapTypeControl: false, // マップ切り替えのコントロールを表示するかどうか
streetViewControl: false // ストリートビューのコントロールを表示するかどうか
}
$(function() {
$.ajax({
url: 'data.json',
cache: false
})
.then(
function (data) {
mapData = data['data'];
ready['ajax'] = true;
generate_map();
},
function () {
console.log('取得に失敗しました。');
}
);
});
/**
* Google Maps APIの準備完了後の処理
*/
function api_ready() {
ready['api'] = true;
generate_map();
}
/**
* 地図を生成する
*/
function generate_map() {
if(ready['api'] && ready['ajax']) {
map = new google.maps.Map(document.getElementById('map'), mapOptions);
add_marker();
}
}
/**
* 地図にマーカーを追加する
*/
function add_marker() {
for (var i = 0; i < mapData.length; i++) {
var item = mapData[i];
// マーカーの設置
var marker = new google.maps.Marker({
position: item['latlng'],
map: map
});
// 吹き出しの生成
var ins = '<div class="map-window">';
ins += '<p class="map-window_name">' + item['name'] + '</p>';
ins += '</div>';
var infoWindow = new google.maps.InfoWindow({
content: ins
});
// マーカーのイベント設定
add_event_to_marker(marker, infoWindow, i);
}
}
/**
* マーカーにイベントを追加する
* @param {object} marker (required) マーカーの情報
* @param {object} infoWindow (required) 吹き出しの情報
* @param {number} index (required) 地図情報のインデックス番号
*/
function add_event_to_marker(marker, infoWindow, index) {
var item = mapData[index];
item['marker'] = marker;
item['infoWindow'] = infoWindow;
// マーカークリック時に吹き出しを表示する
item['marker'].addListener('click', function(e) {
infoWindows_hide();
item['infoWindow'].open(map, item['marker']);
});
}
/**
* 吹き出しを非表示にする
*/
function infoWindows_hide() {
for (var i = 0; i < mapData.length; i++) {
mapData[i]['infoWindow'].close();
}
}
ハイライトにしたコードが前のサンプルから追加した部分です。
63～69行目で吹き出しを生成、82～92行目が各マーカーに対してクリックイベントを設定、97～101行目で吹き出しを非表示にする関数を用意しています。
マーカーに吹き出しを追加するデモページ
コメントが承認されるまで時間がかかります。