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