3

In my phonegapp/cordova app, I use the google maps tool and I need to change, sometimes, the points showed on it. I found some useful code here to remove my markers from the google maps I use.

My problem I also use marker clusters and I have a weird problem here.

For my maps, I use these settings:

{
    showControls: true,
    key: { google: "XXXXXX" },
    center: center,
    width: "100%",
    height: "95%",
    zoom: zoom,
    provider: "google",
    mapType: "satellite",
    autoAdjust: false,
    onReady: SetMap
}

Where SetMap and the other called functions are:

var mmm = null;
var markerCluster = null;

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setMapOnAll(null);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markerCluster.markers_.length; i++) {
        markerCluster.markers_[i].setMap(map);
    }
}

function SetMap (s) {

    if (mmm == null)
        mmm = s.originalMap;
    else {
        clearMarkers();
        markerCluster.markers_ = [];
    }
    var map = mmm;
    var markers = [];
    for (var i = 0; i < pointsOnMapList.length; i++) {
        var data = pointsOnMapList[i];
        var latLng = new google.maps.LatLng(data.location[0], data.location[1]);
        var marker = createMarker(latLng, data.title, map, data.idimp);
        markers.push(marker);
    }
    markerCluster = new MarkerClusterer(map, markers, { imagePath: 'images/m' });
}

When I update my dataset, I simply call the SetMap function.

This "almost" work. My goal is to change the points in the map after the user filters them. I get a new dataset from my api and I have to erase the map and populate it again with my new points.

Example: let's say I have this map:

enter image description here

Then, I filter my map points and I get old and new points in the same maps:

enter image description here

Then, like magic, if I just change the map zoom, the old points disappear!

enter image description here

NOTE: the single markers are deleted as I filter my dataset, without changing the zoom. This problem is only for the marker clusters. How can I delete them?

Piero Alberto
  • 3,823
  • 6
  • 56
  • 108

1 Answers1

1

Just found the clue. Editing my code in this way:

function SetMap (s) {
    if (mmm == null)
        mmm = s.originalMap;
    else {
        markerCluster.clearMarkers();
    }
    var map = mmm;
    var markers = [];
    for (var i = 0; i < pointsOnMapList.length; i++) {
        var data = pointsOnMapList[i];
        var latLng = new google.maps.LatLng(data.location[0], data.location[1]);
        var marker = createMarker(latLng, data.title, map, data.idimp);
        markers.push(marker);
    }
    markerCluster = new MarkerClusterer(map, markers, { imagePath: 'images/m' });
}

it works, all the markers and cluster are removed!!!

Piero Alberto
  • 3,823
  • 6
  • 56
  • 108
  • 1
    Thanks to Crag's comment here https://stackoverflow.com/a/4249923/819161 – Piero Alberto Jun 21 '19 at 07:38
  • 1
    I had the same problem, but I use Reactjs. Anyway, your topic was helpful. Strangely, the documentation (googlemaps.gi thub.io/js-markerclusterer) doesn't mention that cluster markers should be cleared after zoom changes. I understand it is obviously (maybe), but not for such newbies as me – Alexey Zalyotov Nov 08 '22 at 20:37
  • What exactly is the clue in your code? – IgorGanapolsky Jul 24 '23 at 16:33