Google Map Marker Clustering not Working on zoom out

Question

Clustering images

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);

I'm not sure about this, but every time you call the "addmarker1" function you make a new infoWindow with new markes and markerCluster, so in the end you'll have 10 marker cluster and I think they overlap because of this In the end, instance only 1 infowindow and makercluster, outside "addMarker1" and inside addMarker1, re-use the one declared outside... — Margon, Jun 15 '18 at 10:41

score 2 · Accepted Answer · answered Jun 15 '18 at 10:46

2

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);

answered Jun 15 '18 at 10:46

Naveen Kumar H S

1,304
16
30

Hi Thank you for the response. I tried the solution in this manner. I declared a global array. new_arr=new_arr.concat(markers); markerCluster.addMarkers(new_arr); markerCluster.redraw();. This is working properly for small data . but its hanging for a huge amount of data. Is there any other optimized solution ? – Sajal Sunderka Jun 18 '18 at 10:19
Instead of global array object create global `markerCluster` instance and try to update the markers inside that. If you are worrying about the performance of the `concat` method on array see this [thread](https://stackoverflow.com/questions/5080028/what-is-the-most-efficient-way-to-concatenate-n-arrays). – Naveen Kumar H S Jun 18 '18 at 10:53
Hi I tried this solution as well.The page still hangs. I get the error "A web page is slowing down ur browser". Also the batch of 10000 each they can together now initially as a single cluster in the begnning. But when i try to zoom in and zoom out again they form cluster one ove another like previously. – Sajal Sunderka Jun 20 '18 at 04:04
The problem that is happening is that on concat the markercuster is forming 10 patches each by adding 10000 and the final patch is of 100000. Now again on zoom in and zoom out event 10 patches are being formed. its not taking the final array of markers. how to fix this? – Sajal Sunderka Jun 21 '18 at 04:33
var markers1 = locations.map(function(location, i) { return new google.maps.Marker ({ position: location, }); });var markerCluster = new MarkerClusterer(map, new_arr,{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); new_arr=new_arr.concat(markers1); markerCluster.resetViewport(); markerCluster.clearMarkers();markers = []; markerCluster.removeMarker(new_arr); markerCluster.addMarkers(new_arr); markerCluster.redraw(); – Sajal Sunderka Jun 21 '18 at 04:57

score 0 · Answer 2 · answered Jul 17 '18 at 05:09

The solution is to clear the data before looping through the markers if (markerCluster) { markerCluster.clearMarkers(); markerCluster.resetViewport(); markers = []; markerCluster.removeMarker(new_arr); }

Google Map Marker Clustering not Working on zoom out

2 Answers2