I have the following issue. I am removing all references to a google maps instance including markers via the setMap(null)
option via the following code:
destroyMaps = function () {
leftMap = null;
window.map = null;
geocoder = null;
for (var i=0; i<window.rightMarkers.length; i++) {
window.rightMarkers[i].setMap(null);
window.rightMarkers[i] = null;
}
window.rightMarkers = null;
$("#map-canvas-right").remove();
for (var i=0; i<window.leftMarkers.length; i++) {
window.leftMarkers[i].setMap(null);
window.leftMarkers[i] = null;
}
window.leftMarkers = null;
$("#map-canvas-left").remove();
}
The only things that reference leftMap
or window.map
in my whole code is:
For window.map
var marker = new google.maps.Marker({
position: myLatlng,
map: window.map,
icon: window.pins[keyword_category.category_name],
shadow: window.pins["Shadow"],
title:job.job_title
});
marker.job_type = keyword_category.category_name;
window.rightMarkers.push(marker);
For leftMap
var marker = new google.maps.Marker({
position: myLatlng,
map: leftMap,
icon: window.pins[keyword_category.category_name],
shadow: window.pins["Shadow"],
title:job.job_title
});
window.leftMarkers.push(marker);
However in my detached DOM tree, when comparing before the maps were created / after they were destroyed, remains the google maps tiles:
(Right click - open image to see full size)
What can I do to find out what's causing this DOM leak?