Maps JavaScript APIを使ってみる

2020年06月09日

Google Maps PlatformのMaps JavaScript APIを試してみます。
このサンプルではAPIキーの取得から、東京都調布市の人気スポット（？）のマーカーをクラスタリングして表示する所までやってみます。

APIキーの取得

Google Cloud PlatformでAPIを呼び出すためのAPIキーを取得します。今回使用するAPIの利用料金は$7 /リクエスト1000件ですが、現状、1か月あたり$200までは無料で使えるので、試すだけなら無料枠で十分だと思います。詳しくは料金のページで確認してください。

まず、Maps JavaScript APIを有効にします。Google Cloud Platformのコンソールで[APIとサービス] -> [ライブラリ]へ移動します。

Maps JavaScript APIのページを選択し、"有効"にしておきます。"有効"にすると、下の様になります。

Maps JavaScript APIを有効にしたら[APIとサービス] -> [認証情報]の[認証情報を作成]でAPIキーを作成します。

作成したら、[キーを制限]から、APIキーの制限を適切に設定します。今回はアプリケーションの制限でHTTPリファラーを設定し、APIの制限でMaps JavaScript API のみを対象にしました。

なお、APIのリクエスト回数の制限を変更したい場合、[IAMと管理]->[割り当て]から設定可能です。こちらも必要に応じて設定します。

使ってみる

実際にAPIを使って、サンプルプログラムを動かしてみます。サンプルのファイル構成を示します。

public/                  # 公開ディレクトリ
    images/              # クラスターアイコン画像を配置（コピー）
        m1.png
        m2.png
        m3.png
        m4.png
        m5.png
    js/                  # ライブラリを配置（コピー）
        markerclusterer.js
    markercluster.html   # メイン

ライブラリ

マーカーのクラスタリングにjs-marker-clustererを使用します。まずcloneします。

$ git clone https://github.com/googlearchive/js-marker-clusterer.git

cloneできたら、公開ディレクトリに src/markerclusterer.js と images/m1.png - m5.pngをコピーします（以下では/var/www/publicを公開ディレクトリとしています）。

$ cp src/markerclusterer.js /var/www/public/js/
$ cp images/m*.png /var/www/public/images/

markercluster.html

メインとなるページです。変数locationsにセットした調布市のスポットがマーカーとして表示されます。実際に動かすには、YOUR_API_KEY部分を自分のAPIキーに変更する必要があります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <title>Marker Clustering</title>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: {lat: 35.652, lng: 139.545}
        });

        var markers = locations.map(function(location) {
          return new google.maps.Marker(location);
        });

        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'images/m'});
      }

      var locations = [
        {
          position: {lat: 35.6672275, lng: 139.5508906},
          title: "深大寺"
        },
        {
          position: {lat: 35.6712808, lng: 139.5483481},
          title: "神代植物公園"
        },
        {
          position: {lat: 35.6832223, lng: 139.5247533},
          title: "野川公園"
        },
        {
          position: {lat: 35.67669, lng: 139.5232472},
          title: "武蔵野の森公園"
        },
        {
          position: {lat: 35.6451587, lng: 139.536098},
          title: "京王フローラルガーデン アンジェ"
        },
        {
          position: {lat: 35.6658867, lng: 139.5514813},
          title: "神代植物公園 水生植物園"
        },
        {
          position: {lat: 35.6567295, lng: 139.5454291},
          title: "布多天神社"
        },
        {
          position: {lat: 35.6476283, lng: 139.5630672},
          title: "武者小路実篤記念館"
        },
        {
          position: {lat: 35.6528967, lng: 139.5525506},
          title: "國領神社"
        },
        {
          position: {lat: 35.6643924, lng: 139.5511572},
          title: "深大寺城跡"
        }
      ]
    </script>
    <script src="/js/markerclusterer.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  </body>
</html>

確認

初期状態（遠目）だと、マーカーがクラスタリングされているのがわかります。

そしてズームしていくと、クラスタが分割されていき、最終的にはマーカーが個別に表示されます。

まとめ

Google Maps PlatformのMaps JavaScript APIで東京都調布市の人気スポット（？）をクラスタリングして表示してみました。