Google Maps JS v3 - detached DOM tree - memory leak?
dom, google-maps, google-maps-api-3, javascript, memory-leaks
Solution
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.
Problem
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?