Google Maps APIで複数のマーカーと吹き出しを立ててみる

最近、仕事でGoogle Maps APIをいじる機会がありました。

その際、複数のマーカーと吹き出しを立てる機会があったので、その方法について紹介します。

Contents

1 グーグルマップの表示
2 Google Maps APIでマーカーを立てる
3 Google Maps APIに吹き出しをつける
4 Google Maps APIで複数の吹き出しとマーカーをつける
5 まとめ

グーグルマップの表示

まず、グーグルマップの表示方法について紹介します。まず、apiを取得する必要がありますが、それは他の記事へ任せます。

地図を埋め込む場所を指定

まず、地図を埋め込む位置を指定します。

//mapを表示する領域を設定する
<div id="map"></div>

google maps apiのjavascritを読み込みます

<script src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initMap
"></script>

Google Maps APIで、パラメータのcallback=initMapは、APIが読み込み後にinitMap()を実行するという意味になります。

地図の埋め込み

var map;
function initMap() {
 map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む
     center: { // 地図の中心を指定
           lat: 35.681236, // 緯度
          lng: 139.767125 // 経度
       },
      zoom: 15, // 地図のズームを指定
      mapTypeId: google.maps.MapTypeId.ROADMAP //表示する地図の形式を設定します。今回は道路地図を表示します。
   });
}

MapTypeId

MapTypeId は以下が選択可能です。

値	意味
ROADMAP	地図を表示します。
SATELLITE	航空写真を表示します。
HYBRID	航空写真上に主要な道路や施設を表示します。
TERRAIN	地形図を表示します。

Google Maps APIでマーカーを立てる

var map;
var marker;
var latlng = new google.maps.LatLng(35.681236,139.767125);
  function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む
     center: latlng, // 地図の中心を指定
     zoom: 15, // 地図のズームを指定
      mapTypeId: google.maps.MapTypeId.ROADMAP //表示する地図の形式を設定します。今回は道路地図を表示します。
   });
   marker = new google.maps.Marker({ // マーカーの追加
        position: latlng, // マーカーを立てる位置を指定
        map: map, // マーカーを立てる地図を指定
   });
  }

Google Maps APIに吹き出しをつける

var map;
var marker;
var latlng = new google.maps.LatLng(35.681236,139.767125);
  function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む
     center: latlng, // 地図の中心を指定
     zoom: 15, // 地図のズームを指定
      mapTypeId: google.maps.MapTypeId.ROADMAP //表示する地図の形式を設定します。今回は道路地図を表示します。
   });
   marker = new google.maps.Marker({ // マーカーの追加
        position: latlng, // マーカーを立てる位置を指定
        map: map, // マーカーを立てる地図を指定
   });
   infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
        content: '<div class="map">東京駅</div>' // 吹き出しに表示する内容
  });
   marker.addListener('click', function() { // マーカーをクリックしたとき
     infoWindow.open(map, marker); // mapみmakerをの吹き出しの表示します
    });
  }

1４～１６行目の吹き出しの追加だけでは吹き出しが表示されないので、１７～１８行目でマーカーにイベントを追加して、クリックすると吹き出しが表示されるようにしています。

Google Maps APIで複数の吹き出しとマーカーをつける


var map;
var marker = [];
var infoWindow = [];
var markerData = [ // マーカーを立てる場所名・緯度・経度
 {
        name: '東京駅',
     lat: 35.681236,
        lng: 139.767125
 }, {
        name: '淡路町駅',
     lat: 35.69496,
      lng: 139.76746000000003
 }, {
        name: '御茶ノ水駅',
        lat: 35.6993529,
        lng: 139.76526949999993
 }, {
        name: '神保町駅',
     lat: 35.695932,
     lng: 139.75762699999996
 }, {
        name: '新御茶ノ水駅',
       lat: 35.696932,
     lng: 139.76543200000003
 }
];
 
function initMap() {
 // 地図の作成
    var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成
   map = new google.maps.Map(document.getElementById('map'), { // #sampleに地図を埋め込む
     center: mapLatLng, // 地図の中心を指定
      zoom: 14 // 地図のズームを指定
   });
 
 // マーカー毎の処理
 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="map">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容
       });
 
     markerEvent(i); // マーカーにクリックイベントを追加
 }
}
 
// マーカーにクリックイベントを追加
function markerEvent(i) {
    marker[i].addListener('click', function() { // マーカーをクリックしたとき
      infoWindow[i].open(map, marker[i]); // 吹き出しの表示
  });
}

マーカーはfor分でマーカーを立てています。クリックイベントはイベント追加時とクリック時で添字iの値が変わってしまいます。
そのため、クリックイベントを追加しています。