Googleマップをカスタマイズする方法。(複数マーカー表示編)

googlemap

前回マーカー表示にチャレンジしましたが、今回は複数のマーカー表示にチャレンジします。

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

サンプルとして、海に魚のイラストを複数表示してみました。

実際に張り付けたMAP

コメント