Google Map Marker Clustering not Working on zoom out

Question

I am trying to work with Google map marker clustering in Javascript. And i am pretty new to this. The scenario I am fetching a huge chunk of data from database in the lot of 10000 per call and then rendering the set on google map by sending the lat lng array to the marker cluster. My data set consists of 100000 outlets. I am fetching 10000 outlets at once and this is being called 10 times so 10 clusters of 10000 are getting created and they are overlapping with each other. When i try to zoom in the cluster expands into further small clusters. But while zooming out instead of the clustering back they overlap. Issue- Need to get all the 100000 outlets in one cluster on zoom out . or if that is not possible then how to fix the overlapping?

This is the code snippet

 var mapDiv = document.getElementById('newmap');
 map = new google.maps.Map(mapDiv, {
     center: new google.maps.LatLng(latitude, longitude),
     zoom: 3,
     panControl: true,
     mapTypeControl: true,
     mapTypeControlOptions: {
             style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
     },
     zoomControl: true,
     zoomControlOptions: {
             position: google.maps.ControlPosition.LEFT_TOP,

     },
     streetViewControl: true,
     mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 function addMarker1(locations, outletname, outletData) {
     var infoWindow = new google.maps.InfoWindow();
     var markers = locations.map(function(location, i) {
             return new google.maps.Marker({
                     position: location,

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

  // this is sending data 10000 each
  for (var i = 0; i < outletDataLen; i++) {
     outletArray.push(outletData[i]['Outletview']['name']);
     j.push({
             lat: parseFloat(outletData[i]['Outletview']['latitude']),
             lng: parseFloat(outletData[i]['Outletview']['longitude'])
     });
     outletname.push(outletData[i]['Outletview']['name']);
  }
  addMarker1(j, outletname, outletData);

Answer 1

Take the markers from the MarkerCluster object and concat new Markers data with it and add it to the same Markerobject as below and also refer the API

var mapDiv = document.getElementById('newmap');
map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(latitude, longitude),
    zoom: 3,
    panControl: true,
    mapTypeControl: true,
    mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_TOP,

    },
    streetViewControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

function addMarker1(locations, outletname, outletData) {
    var infoWindow = new google.maps.InfoWindow();
    var markers = locations.map(function(location, i) {
            return new google.maps.Marker({
                    position: location,

            });
    });
    var mapmarkers = markerCluster.getTotalMarkers();
    markers = markers.concat(mapmarkers);
    markerCluster.addMarkers(markers);
    markerCluster.redraw();
}
// this is sending data 10000 each
for (var i = 0; i < outletDataLen; i++) {
    outletArray.push(outletData[i]['Outletview']['name']);
    j.push({
            lat: parseFloat(outletData[i]['Outletview']['latitude']),
            lng: parseFloat(outletData[i]['Outletview']['longitude'])
    });
    outletname.push(outletData[i]['Outletview']['name']);
}
addMarker1(j, outletname, outletData);