Google Maps JS v3 - detached DOM tree - memory lea

Question

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?

Answer 1

This is a known issue in Google Maps API v3 - even pure creation and destruction of google.maps object (no marker creation) results in memory leak. See Issue 3803: Bug: Destroying Google Map Instance Never Frees Memory.

They reproduce the issue by creating a simple loop that creates and destroys the google.maps object. See

http://jsfiddle.net/KWf4r/

After pressing start, you will observe your browser to grow in memory until you press stop.

The issue is not fixed and there doesn't seem to be an official workaround available. There is certainly a way, but it's not a clean workaround that apparently might stop working in next release of google maps api - citing the discussion:

I've actually managed to find a semi-workable fix by manually destroying a lot of the elements that google maps creates (and removing listeners). However, I am using a lot of undocumented things to do this (I had to check in the chrome inspector to see what to try to remove), so this doesn't seem the right way to go.