Question

MarkerWithLabel

I dont know where else can i find best practise for implement google map on single page application. Currently I use backbonejs coupled with requirejs.

Upon page loaded for the first time, the number of marker created is only two. After hit the same route for the second time, the number of MarkerWithLabel object is double

Same goes to with other google map plugin (refer below).

Overlapping Marker

What else can I do to refresh/dispose/destroy those objects living in the JS memory?

UPDATE: Here is my code when i initiate the plugin:

1) I declare a global variable within the module

var $markers      = [],
    gm            = google.maps,
    iconWithColor = new google.maps.MarkerImage('./img/marker.svg', null, null, null, new google.maps.Size(25,25));

2) Code below is in another function within the module

var that = this;
require(["markerclusterer","markerwithlabel"], function () {
    _.each(coordinates.models, function(val, i) {
    var latLng = new gm.LatLng(val.get('in_latitude'), val.get('in_longitude')),
    marker = new MarkerWithLabel({
        position: latLng,
        draggable: false,
        raiseOnDrag: true,
        map: that.map,
        labelContent: val.get('ig_label'),
        labelAnchor: new gm.Point(22, 0),
        labelClass: 'label',
        bgColour: colors,
        animation: gm.Animation.DROP,
        icon: iconWithColor,
        shadow: shadow
    });
    $markers.push(marker);
    gm.event.addListener(marker, 'click', function() {
        var new_marker = this;
        if(prev_marker) {
           if (prev_marker.getAnimation() != null) {                
           prev_marker.setAnimation(null);                              
           new_marker.setAnimation(gm.Animation.BOUNCE);
           prev_marker = new_marker;
           }
        } else {
           new_marker.setAnimation(gm.Animation.BOUNCE);
           prev_marker = new_marker;
        }
        that.map.panTo(latLng);
    }); 
    }, this);
});

3) I try to dispose by using

if($markers) {
    for (var i = 0; i < $markers.length; i++ ) {                    
    //console.log($markers[i]);
    $markers[i].setMap(null);
    delete $markers[i];
    }               
    $markers = [];
}   
if (markerCluster) {
    markerCluster.clearMarkers();
    markerCluster = null;
}
Was it helpful?

Solution

if($markers) {
    for (var i = 0; i < $markers.length; i++ ) {                    
      //console.log($markers[i]);
      google.maps.event.clearInstanceListeners($markers[i]);
      $markers[i].setMap(null);
      delete $markers[i];
    }               
    $markers = [];
}

ok finally i successfully reduce number by destroying the listener only. Hope this help

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top