前回マーカー表示にチャレンジしましたが、今回は複数のマーカー表示にチャレンジします。
CSSの記述（前回から変更なし）
カスタムCSSに下記コードを記述します。
”mapSample”地図が表示されます。
#mapSample{
width: auto;
height: 400px;
}HTMLの記述
地図の配置（前回から変更なし）
<div id="mapSample"></div>関数の配置
今回地図のカスタマイズ情報[Style]設定なしで作成します。
<script>
var map;
var marker = [];
var infoWindow = [];
var markerData = [ // マーカーを立てる場所名・緯度・経度
{
name: 'フグ',
lat: 35.56911,
lng: 135.2066,
icon: 'sakana03.png' //
}, {
name: 'タイ',
lat: 35.552861,
lng: 135.197076,
icon: 'sakana07.png' //
}, {
name: 'サンマ',
lat: 35.575858,
lng: 135.216184,
icon: 'hsakana10.png' //
}, {
name: 'くらげ',
lat: 35.588923,
lng:135.209132,
icon: 'hSakana19.png' //
}
];
function initMap() {
// 地図の作成
var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0] ['lng']});
// 緯度経度のデータ作成
map = new google.maps.Map(document.getElementById('mapSample'), {
// 地図の中心を指定
center: mapLatLng,
// 地図のズームを指定
zoom: 13 });
// マーカー毎の処理
// 緯度経度のデータ作成
for (var i = 0; i < markerData.length; i++) {
markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']});
marker[i] = new google.maps.Marker({ // マーカーの追加
position: markerLatLng, // マーカーを立てる位置を指定
map: map // マーカーを立てる地図を指定
});
infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
content: '<div class="mapSample">' + markerData[i]['name'] + '</div>'
});
marker[i].setOptions({// TAM 東京のマーカーのオプション設定
icon: {
url: markerData[i]['icon']// マーカーの画像を変更
}
});
markerEvent(i); // マーカーにクリックイベントを追加
}
}
// マーカーにクリックイベントを追加
function markerEvent(i) {
marker[i].addListener('click', function() { // マーカーをクリックしたとき
infoWindow[i].open(map, marker[i]); // 吹き出しの表示
});
}
</script>MAP API呼び出しコードの記述
<script src="https://maps.googleapis.com/maps/api/js?key=実際のキーを記述;callback=initMap"></script>地図に複数のマーカーを吹き出し表示したしたMAP
サンプルとして、海に魚のイラストを複数表示してみました。
コメント