CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
transilvlad
transilvlad

Reputation: 14532

Google Maps API with StoreLocator and MarkerClusterer mixing issue

http://storelocator.googlecode.com/git/examples/dynamic.html

I am using the dynamic StoreLocator exactly as is presented in the demo with a few adjustments:

  1. Changed the JSON to my own.

  2. Added Marker Clusterer to the map with the bellow code:

    google.maps.event.addListener(_googleMap, 'idle', function() {
  if(typeof _merketClusterer == 'object') {
    _googleClusters.clearMarkers();
  }
  _googleClusters = new MarkerClusterer(_googleMap, _storeLocatorView.c);
});

Because both the MarkerClusterer and the StoreLocator depend on the map events it seems that the clusters show and a split second later the markers appear again from the StoreLocator.

Anyone have an idea of how I could trigger the MarkerClusterer after the StoreLocator has finished updating the map?

Example here: http://jsfiddle.net/Z6WHR/

You need to move the map for the clustering to start and the markers appear back.

I was digging deeper into this and thought I might be able to fix it by wrapping the marker function from the StoreLocator to also push into the Clusterer, but was unable to do so due to it being highly anonymised.

Upvotes: 0

Views: 512

Answers (2)

Ronald
Ronald

Reputation: 754

I also ran into this problem but I had to solve it a bit differently. I tried to use your code but my performance dropped because for every store in the Store Locator, the MarkerCusterer was clearing the markers and then adding them again.

So I changed your code a bit and now it works perfectly! 

google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
        googleClusters = new MarkerClusterer(map);
        view.addStoreToMapB = view.addStoreToMap;
        var i = 0;
        view.addStoreToMap = function (a) {
            i++;
            var b = view.addStoreToMapB(a);
            if(i == view.stores.length){
                i = 0;
                var markers = [];
                googleClusters.clearMarkers();
                for(marker in view.markerCache_){
                    markers.push(view.markerCache_[marker]);
                }
                googleClusters.addMarkers(markers);
            }
        }
    });

Upvotes: 2

transilvlad
transilvlad

Reputation: 14532

Managed to identify the key function the StoreLocator uses to add the marker to the map and wrap around it the MarkerClusterer code. Unfortunately without changing the StoreLocator slightly it is impossible to add each individual marker and avoid clearing and resetting everything. But adding a simple return to the addStoreToMap in order to return the marker that can be achieved.

google.maps.event.addListenerOnce(_googleMap, 'bounds_changed', function() {
  _googleClusters = new MarkerClusterer(_googleMap);
  _googleView.addStoreToMapB = _googleView.addStoreToMap
  _googleView.addStoreToMap = function (a) {
    var b = _googleView.addStoreToMapB(a);
    _googleClusters.clearMarkers();
    _googleClusters.addMarkers(_googleView.c);
  }
});

Upvotes: 0

Related Questions