ishikawa@tam-tam.co.jp' ishikawa

Google Maps APIを使って複数のマーカーと吹き出しを設置してみる

Google Maps APIを使って、地図を表示したりマーカーを立てたりをやってみます。

今回使用するのは、以下のJavaScript API になります。
Google Maps JavaScript API | Google Developers
 

■目次

  1. Google マップの表示
  2. Google マップにマーカーを立てる
  3. マーカーに吹き出しを追加する
  4. 住所から緯度と経度を調べる
  5. Google マップに複数のマーカーを立てる

1. Google マップの表示

まずは地図を埋め込んでみます。
実際に使用する場合はAPIキーを取得したほうがよいですが、今回は動作の確認ができればよいので省略します。
APIキーを使用する場合は、こちらからAPIを有効にして、APIキーを作成して下さい。

1-1. 地図を埋め込む場所を指定

■HTML

<div id="sample"></div>

1-2. jsファイルの読み込み

</body>の直前にjsファイルを読み込ませます。

■HTML

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

sample.jsに処理を追加していきます。
2行目で読み込んでいるのがGoogle Maps APIで、パラメータのcallback=initMapは、APIが読み込み後にinitMap()を実行するという意味になります。

1-3. 地図のCSSを指定

地図に対してサイズの指定がないと表示されませんので、#sampleにwidthとheightを指定しておきます。

■CSS

#sample {
 width: 700px;
   height: 400px;
}

1-4. 地図の埋め込み

initMap()を使って、sample.js内に地図を埋め込む記述を追加します。

■JavaScript

var map;
function initMap() {
 map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
     center: { // 地図の中心を指定
           lat: 34.7019399, // 緯度
          lng: 135.51002519999997 // 経度
       },
      zoom: 19 // 地図のズームを指定
   });
}

これで地図の埋め込みができました。
実際のソースコード一式はサンプルページをご確認ください。
 

2. Google マップにマーカーを立てる

先ほど埋め込んだ地図に、マーカーを立ててみます。
initMap()内にマーカーを立てる記述を追加します。

■JavaScript

var map;
var marker;
var center = {
  lat: 34.7019399, // 緯度
  lng: 135.51002519999997 // 経度
};
function initMap() {
 map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
     center: center, // 地図の中心を指定
     zoom: 19 // 地図のズームを指定
   });

 marker = new google.maps.Marker({ // マーカーの追加
        position: center, // マーカーを立てる位置を指定
      map: map // マーカーを立てる地図を指定
   });
}

地図の中心とマーカーを立てる位置の緯度経度が同じなので、変数で指定するように変更しています。
サンプルページ2
 

3. マーカーに吹き出しを追加する

先ほど追加したマーカーをクリックしたときに、吹き出しが出るようにしてみます。

■JavaScript

var map;
var marker;
var infoWindow;
var center = {
   lat: 34.7019399, // 緯度
  lng: 135.51002519999997 // 経度
};
function initMap() {
 map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
     center: center, // 地図の中心を指定
     zoom: 19 // 地図のズームを指定
   });

 marker = new google.maps.Marker({ // マーカーの追加
        position: center, // マーカーを立てる位置を指定
      map: map // マーカーを立てる地図を指定
   });

 infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
        content: '<div class="sample">TAM 大阪</div>' // 吹き出しに表示する内容
  });
 marker.addListener('click', function() { // マーカーをクリックしたとき
     infoWindow.open(map, marker); // 吹き出しの表示
    });
}

19~21行目の吹き出しの追加だけでは吹き出しが表示されないので、22~24行目でマーカーにイベントを追加して、クリックすると吹き出しが表示されるようにしています。
サンプルページ3
 

4. 住所から緯度と経度を調べる

これまで緯度と経度を使って地図を表示してきましたが、実際に使う場合は住所しか分からないことがほとんどです。
調べる方法はいろいろありますが、今回はジオコーディングを使って調べてみます。

4-1. 住所から緯度と経度を調べる

まずはジオコーディングを使って調べてみて、結果をconsoleに表示してみます。

■JavaScript

var geocoder;
function initMap() {
    geocoder = new google.maps.Geocoder();
  geocoder.geocode({
      'address': '東京都千代田区神田小川町3-28-9' // TAM 東京
   }, function(results, status) { // 結果
        if (status === google.maps.GeocoderStatus.OK) { // ステータスがOKの場合
          console.group('Success');
         console.log(results);
           console.log(status);
        } else { // 失敗した場合
          console.group('Error');
           console.log(results);
           console.log(status);
        }
   });
}

consoleに結果が表示されているのを確認できました。
サンプルページ4

4-2. 調べた結果を使って、地図とマーカーを表示

ジオコーディングで調べた結果を使って、地図とマーカーを表示してみます。

■JavaScript

var map;
var marker;
var geocoder;
function initMap() {
   geocoder = new google.maps.Geocoder();
  geocoder.geocode({
      'address': '東京都千代田区神田小川町3-28-9' // TAM 東京
   }, function(results, status) { // 結果
        if (status === google.maps.GeocoderStatus.OK) { // ステータスがOKの場合
          map = new google.maps.Map(document.getElementById('sample'), {
                center: results[0].geometry.location, // 地図の中心を指定
               zoom: 19 // 地図のズームを指定
           });
         marker = new google.maps.Marker({
               position: results[0].geometry.location, // マーカーを立てる位置を指定
                map: map // マーカーを立てる地図を指定
           });
     } else { // 失敗した場合
          alert(status);
      }
   });
}

緯度と経度のデータはresults[0].geometry.location で取得しています。
サンプルページ4-2
 

5. Google マップに複数のマーカーを立てる

マーカーを複数立てる場合、一つ一つ設定していってもよいのですが、数が多い場合は少し面倒です。
そこで、マーカーの緯度や経度などをまとめたデータを取得して、地図上に表示する処理を作ってみます。

今回はjs内に配列で置く方法で試してみます。

■JavaScript
TAM 東京と最寄駅にマーカーを立ててみます。
その際、TAM 東京だけマーカー画像を変更してみます。

var map;
var marker = [];
var infoWindow = [];
var markerData = [ // マーカーを立てる場所名・緯度・経度
  {
       name: 'TAM 東京',
       lat: 35.6954806,
        lng: 139.76325010000005,
        icon: 'tam.png' // TAM 東京のマーカーだけイメージを変更する
 }, {
        name: '小川町駅',
     lat: 35.6951212,
        lng: 139.76610649999998
 }, {
        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('sample'), { // #sampleに地図を埋め込む
     center: mapLatLng, // 地図の中心を指定
      zoom: 15 // 地図のズームを指定
   });

 // マーカー毎の処理
 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="sample">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容
       });

     markerEvent(i); // マーカーにクリックイベントを追加
 }

   marker[0].setOptions({// TAM 東京のマーカーのオプション設定
        icon: {
         url: markerData[0]['icon']// マーカーの画像を変更
       }
   });
}

// マーカーにクリックイベントを追加
function markerEvent(i) {
    marker[i].addListener('click', function() { // マーカーをクリックしたとき
      infoWindow[i].open(map, marker[i]); // 吹き出しの表示
  });
}

基本的にはforを使ってマーカーを立てているだけなのですが、クリックイベントはイベント追加時とクリック時で変数iの値が変わってしまいます。
そのため、今回は別の関数内でイベントを追加するようにしています。
サンプルページ5
 

【参考サイト】

 

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら