Marker Clustering on Google Maps with JSON multi markers

Question

I've created a map with multi markers from a JSON file. I'm trying to add a marker cluster, but I'm ending up with the cluster and markers showing at the same time. This is what I see at the moment:

I've added the script below to my index.html page:

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

This is the relevant part of my maps.js file:

    let map;
let jsonData = "assets/Data/maps.json";

const countries = [
    { lat: 48.857497, lng: 2.347628, zoom: 5, name: "France" },
    //Brazil
    { lat: -15.793889, lng: -47.882778, zoom: 5, name: "Brazil" }
];


function initMap() {
    const mapOptions = {
        center: {
            lat: 9.072264,
            lng: 7.491302
        },
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    countries.forEach(function (data) {
        let countriesMarker = new google.maps.Marker({
            map: map,
            position: { lat: data.lat, lng: data.lng },
            title: data.name
        });
        $("#selectlocation").append('<option value="' + [data.lat, data.lng, data.zoom].join('|') + '">' + data.name + '</option>');
    });


    let infowindow = new google.maps.InfoWindow();

    //Method found on StackOverflow: https://stackoverflow.com/questions/28606149/load-data-from-json-file-into-map-markers-in-google-maps
    $.getJSON(jsonData, function (jsonMarkers) {
        $.each(jsonMarkers.markers, function (key, data) {
            let latLng = new google.maps.LatLng(data.lat, data.lng);
            let marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.title
            });

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

        });

    });
}

Answer 1

You have multiple issues.

1. As @xomena indicated you are creating the markers twice, remove one of those sets of code.

2. You are creating a MarkerClusterer for each marker. Move the creation of the MarkerClusterer out of the loop that creates the markers.

Something like this should work:

$.each(jsonMarkers.markers, function (key, data) {
  let latLng = new google.maps.LatLng(data.lat, data.lng);
  let marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: data.title
  });
  clusterMarkers.push(marker);
});
var markerCluster = new MarkerClusterer(map, clusterMarkers,
  { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

proof of concept fiddle

code snippet:

 let map;
let jsonData = "assets/Data/maps.json";

const countries = [
    { lat: 48.857497, lng: 2.347628, zoom: 5, name: "France" },
    //Brazil
    { lat: -15.793889, lng: -47.882778, zoom: 5, name: "Brazil" }
];


function initMap() {
    const mapOptions = {
        center: {
            lat: -19.072264,
            lng: 117.491302
        },
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    countries.forEach(function (data) {
        let countriesMarker = new google.maps.Marker({
            map: map,
            position: { lat: data.lat, lng: data.lng },
            title: data.name
        });
        $("#selectlocation").append('<option value="' + [data.lat, data.lng, data.zoom].join('|') + '">' + data.name + '</option>');
    });


    let infowindow = new google.maps.InfoWindow();
    let clusterMarkers = [];
    //Method found on StackOverflow: https://stackoverflow.com/questions/28606149/load-data-from-json-file-into-map-markers-in-google-maps
    // $.getJSON(jsonData, function (jsonMarkers) {
    var jsonMarkers = {markers: [
        {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}
      ]};
        $.each(jsonMarkers.markers, function (key, data) {
            let latLng = new google.maps.LatLng(data.lat, data.lng);
            if (!data.title)
              data.title = ""+key;
            let marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.title
            });

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

    // });
}

/* 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<!-- 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>