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で東京都調布市の人気スポット(?)をクラスタリングして表示してみました。