Google Map APIのMarkerClustererでまとめて表示させたい

Question

宜しくお願い致します。

現在、Google Maps JavaScript APIを使用し、複数のロケーションを表示させるマップを作成しております。

やりたいこと

Google Map APIのMarkerClusterer（クラスター）を使い、まとめて表示ができるようにしたいと考えております。

例：https://developers.google.com/maps/documentation/javascript/marker-clustering

サンプルのコードはgoogleサイトから提供をされているのですが、自分のJavascript知識不足でコードの応用がうまくいっておりません。

尚、現状でマーカの設置と情報ウインドウの設置までは自分のコードで表示ができている状態です。
（クラスター表示はまだ）

■自分の現状のコード(googleのサンプルコードを入れる前)

//function initMap()の記載は省略

for (var i = 0; i < data.length; i++) {
    markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']};
    marker[i] = new google.maps.Marker({　//マーカーの設置
    position: markerLatLng,
    map: map,
  });

  infoWindow[i] = new google.maps.InfoWindow({　// 情報ウインドウも表示
      content: '<p>テスト</p>'   
  });
}

■googleのサンプルコード：
https://developers.google.com/maps/documentation/javascript/marker-clustering

        // 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 markersのコード記載について、自分のコードの場合、どのようにgoogleのサンプルコードに適用させるかがわかりません。
・var markersのコード記載はjavascriptの.map() ファンクションを使っているようなのですが使い方がわかりません。

尚、下記のサイトも参考にさせて頂きました。
http://bashalog.c-brains.jp/17/10/31-204633.php

宜しくお願い致します。

Answer 1

「現状のコード」にあるmarkerをmarkersのところに入れればよいとおもいますが、試されましたか？

Comments

[tomato01]

ご回答を頂きありがとうございます。
すみません、現状で検討をしているのはgoogleのサンプルコードの一部を現状のコードの方に持ってきたいと考えております。

その場合、下記の部分の入れ替えということでしょうか。

現状
marker[i] = new google.maps.Marker({　//マーカーの設置
position: markerLatLng,
map: map,
});

上記と入れ替えをするべきコード
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});

宜しくお願い致します。

[kei344]

> 下記の部分の入れ替え
違います。
markerもmarkersもMarkerオブジェクトの入った配列なので、同じように使えるはず、という回答です。

[tomato01]

ご回答を頂きありがとうございます。
ご指摘の点を「maker」変更し、無事表示することができました。

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

どうもありがとうございました。