以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

マーカー クラスタリング

概要

このチュートリアルでは、マーカー クラスターを使用してマップ上に多数のマーカーを表示する方法について説明します。MarkerClusterer ライブラリと Google Maps JavaScript API を組み合わせると、近くにあるマーカーをクラスターに統合し、マップ上のマーカーの表示を簡素化することができます。

以下のマップで、マーカー クラスタリングの動作を説明します。

クラスター上の数値は、クラスターに含まれているマーカーの数を示しています。クラスターの場所にズームすると、クラスターの数値が減少して、徐々に個々のマーカーがマップ上に表示されます。マップからズームアウトすると、再びマーカーがクラスターに統合されます。

以下のサンプルは、このマップの作成に必要なコード全体を示しています。

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124},
  {lat: -33.848588, lng: 151.209834},
  {lat: -33.851702, lng: 151.216968},
  {lat: -34.671264, lng: 150.863657},
  {lat: -35.304724, lng: 148.662905},
  {lat: -36.817685, lng: 175.699196},
  {lat: -36.828611, lng: 175.790222},
  {lat: -37.750000, lng: 145.116667},
  {lat: -37.759859, lng: 145.128708},
  {lat: -37.765015, lng: 145.133858},
  {lat: -37.770104, lng: 145.143299},
  {lat: -37.773700, lng: 145.145187},
  {lat: -37.774785, lng: 145.137978},
  {lat: -37.819616, lng: 144.968119},
  {lat: -38.330766, lng: 144.695692},
  {lat: -39.927193, lng: 175.053218},
  {lat: -41.330162, lng: 174.865694},
  {lat: -42.734358, lng: 147.439506},
  {lat: -42.734358, lng: 147.501315},
  {lat: -42.735258, lng: 147.438000},
  {lat: -43.999792, lng: 170.463352}
]
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

実際に試す

コードブロックの右上にカーソルを合わせて、コードをコピーするか、コードを JSFiddl で開きます。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

簡単に説明するため、このチュートリアルでは locations 配列を使用して一連のマーカーをマップに追加しています。他のソースを使用してマップのマーカーを取得することもできます。詳細については、マーカーの作成のガイドをご覧ください。

マーカー クラスタリングを理解する

MarkerClusterer ライブラリは、マップを特定のサイズ(ズームレベルに応じて変化)に分割するグリッドベースのクラスタリング技術を使用して、マーカーを正方形の各グリッドにグループ化します。特定のマーカーの場所でクラスターを作成し、その境界内にあるマーカーをクラスターに追加します。マップのズームレベルに応じて、すべてのマーカーが最も近いグリッドベースのマーカー クラスターに割り当てられるまで、このプロセスを繰り返します。

マーカーが複数のクラスターの境界に含まれている場合は、Maps JavaScript API は各クラスターからのマーカーの距離を判別し、最も近いクラスターにマーカーを追加します。

MarkerClusterer オプションを設定すると、クラスターに含まれているすべてのマーカーからの平均距離を基にクラスターの位置を調整できます。MarkerClusterer をカスタマイズして、グリッドのサイズ、クラスターのアイコン、クラスターのテキストといった他のパラメータを変更することもできます。

マーカー クラスターの追加

マーカー クラスターを追加するには、次のステップを実行します。

  1. マーカー クラスタリング ライブラリと画像を GitHub から取得し、アプリがアクセスできるサーバー上に保存します。
    MarkerClusterer の JavaScript ライブラリと画像ファイルは、GitHub の Google Maps リポジトリにあります。アプリがアクセスできる場所に、GitHub から次のファイルをダウンロードまたはコピーします。

  2. マーカー クラスタリング ライブラリをページに追加します。

    このチュートリアルのコードでは、以下のスクリプトで https://developers.google.com にある markerclusterer.js ライブラリ ファイルの場所を指定しています。

    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    

    このパスを変更して、同じファイルを保存した場所を指定します。


  3. アプリにマーカー クラスターを追加します。

    マップにマーカー クラスターを追加するコードは次のとおりです。

    var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          }
    

    このサンプルでは、markers 配列を MarkerClusterer に渡しています。また、5 つの画像ファイルすべての場所を imagePath パラメータに指定しています。この値を、実際に同じ画像ファイルを保存した場所のパスに置き換えてください。

さらに詳しく知る

さらに複雑なマーカー クラスタリングの例については、GitHub の Google Maps リポジトリを参照してください。

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。