Пытаясь вывести маркер var из цикла foreach для работы markerCluster, какой самый простой способ сделать это?

Question

Я пытаюсь добавить MarkerClusters на мою карту, однако моя переменная маркера находится внутри функции с циклом foreach, используемым для извлечения данных API Instagram, каков наилучший способ заставить MarkerClusters работать?

Я попытался обернуть функцию initMap вокруг функции setMarkers, поместив переменную markerCluster в функцию setMarkers и в цикл foreach, но он просто продолжает показывать маркеры (в моем случае картинки)

<script>
    let coords = document.getElementById("places").innerHTML;
    let parts = coords.split(",");

    let finalResult = []
    while (parts.length) {
        let newArr = parts.splice(0, 3);
        finalResult.push(newArr);
    }

    console.log(finalResult)


    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: {
                lat: 52.9,
                lng: 101.2
            }
        });
        setMarkers(map);
    }

    function setMarkers(map) {

        finalResult.forEach((place) => {

            var image = {
                url: place[0],
                scaledSize: new google.maps.Size(64, 64),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(32, 32)
            };

            var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18, 1],
                type: 'poly'
            };

            var myLatlng = new google.maps.LatLng(place[1], place[2]);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: image,
                shape: shape
            });

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

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

Answer 1

Один из вариантов - создать MarkerClusterer внутри функции setMarkers, а затем добавить маркеры к ней по отдельности при их создании с помощью метода .addMarker.

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

  finalResult.forEach((place) => {
    var image = {
      url: place[0],
    };

    var myLatlng = new google.maps.LatLng(place[1], place[2]);

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: image,
    });
    markerCluster.addMarker(marker);
  });

proofконцептуальной скрипки

фрагмент кода:

let coords = document.getElementById("places").innerHTML;
let parts = coords.split(",");

let finalResult = []
while (parts.length) {
  let newArr = parts.splice(0, 3);
  finalResult.push(newArr);
}

console.log(finalResult)


function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -38,
      lng: 150
    }
  });
  setMarkers(map);
}

function setMarkers(map) {
  var bounds = new google.maps.LatLngBounds();
  var markerCluster = new MarkerClusterer(map, [], {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

  finalResult.forEach((place) => {
    var image = {
      url: place[0],
    };

    var myLatlng = new google.maps.LatLng(place[1], place[2]);
    bounds.extend(myLatlng);

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: image,
    });
    markerCluster.addMarker(marker);
    map.fitBounds(bounds);
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- 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>
<div id="places" style="display:none">https://maps.google.com/mapfiles/ms/micons/blue.png,-31.563910,147.154312, https://maps.google.com/mapfiles/ms/micons/blue.png,-33.718234,150.363181, https://maps.google.com/mapfiles/ms/micons/blue.png,-33.727111,150.371124, https://maps.google.com/mapfiles/ms/micons/blue.png,-33.848588,151.209834,https://maps.google.com/mapfiles/ms/micons/blue.png,-33.851702,151.216968,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-34.671264,150.863657, https://maps.google.com/mapfiles/ms/micons/blue.png,-35.304724,148.662905, https://maps.google.com/mapfiles/ms/micons/blue.png,-36.817685,175.699196,https://maps.google.com/mapfiles/ms/micons/blue.png,-36.828611,175.790222,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-37.750000,145.116667, https://maps.google.com/mapfiles/ms/micons/blue.png,-37.759859,145.128708, https://maps.google.com/mapfiles/ms/micons/blue.png,-37.765015,145.133858,https://maps.google.com/mapfiles/ms/micons/blue.png,-37.770104,145.143299,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-37.773700,145.145187, https://maps.google.com/mapfiles/ms/micons/blue.png,-37.774785,145.137978, https://maps.google.com/mapfiles/ms/micons/blue.png,-37.819616,144.968119, https://maps.google.com/mapfiles/ms/micons/blue.png,-38.330766,144.695692,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-39.927193,175.053218, https://maps.google.com/mapfiles/ms/micons/blue.png,-41.330162,174.865694, https://maps.google.com/mapfiles/ms/micons/blue.png,-42.734358,147.439506, https://maps.google.com/mapfiles/ms/micons/blue.png,-42.734358,147.501315,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-42.735258,147.438000, https://maps.google.com/mapfiles/ms/micons/blue.png,-43.999792,170.463352,
</div>