0

I'm trying to play with Google Maps API.

My HTML code looks like:

<div id="map-1"></div>

I use some JS to init map on the page, nearly similar to this one:

var mapInstance = new google.maps.Map(document.getElementById('map-1'));

It works well.

The issue is, I need to add and remove a maps on a same page multiple times (when user clicks on corresponding links).

I haven't found anything about how to remove a map from the page - with all the html changes and events it brings on initialization https://developers.google.com/maps/documentation/javascript/reference

There're some methods like clearInstanceListeners, which are likely related mostly to the points and overlays, not to the map itself (I suppose it should remove a zoomin/out, doubleclick and other events). I've tried something like google.maps.event.clearInstanceListeners(mapInstance);. It doesn't work - my map doesn't loose any events.

The reason why I'm asking for this is the memory leaks. I suppose that if I create nearly 50 maps on my page without successfully destroying them, my page will use too much memory (because events are still in memory if only an HTML is removed) and as a result, overall performance of the page will dramatically slow down.

Do you have any ideas about how this issue can be solved?

I've also seen a topic Google Maps JavaScript API V3 - Unload / Deconstructor / Delete / Remove

They recommend to use jQuery.remove().

I don't think it's a right case for me, because:

1) I simply don't use jQuery in my project

2) remove method removes events only from jQuery's cache (events which were binded by jQuery)

3) as a result of the 2), html is removed, but memory isn't cleared (hello memory leak).

Community
  • 1
  • 1
Jasper
  • 5,090
  • 11
  • 34
  • 41
  • so you want to remove a Maps container from your dom and append new ones with another map in it? – Nico O Mar 16 '14 at 13:10
  • 1
    I don't have an answer for you but, have you actually tested that performance suffers? i very very strongly doubt it actually does in a measurable way and if i were you i'd test that first instead of early optimizing a possible non-issue. – Ronan Thibaudau Mar 16 '14 at 13:10
  • @NicoO yep, I want to remove not only an HTML of the previous map, but also all the events it binds to the document – Jasper Mar 16 '14 at 13:10
  • @RonanThibaudau I haven't tested it yet. I haven't found a `destroy` event in the API docs and my mind says now "there will be a memory leak man, you've to do something". So I can't sleep until I find a right stuff – Jasper Mar 16 '14 at 13:13
  • I'am still not sure if every browser will remove event listeners on deleted objects. I found this rather interesting: http://stackoverflow.com/questions/4386300/javascript-dom-how-to-remove-all-events-of-a-dom-object – Nico O Mar 16 '14 at 13:20
  • As I know, browsers don't remove events on removed nodes. – Jasper Mar 16 '14 at 13:25
  • jQuery does this on `remove` method (after it removes cached events): `elem.parentNode.removeChild( elem );`. I don't believe that `removeChild` will cause to disappear all events from the `elem` – Jasper Mar 16 '14 at 13:27
  • If i were you i'd think "there's gonna be a memory leak, on a per map change and not on a continuous per time Schedule, it's going to be a tiny leak of a few events that disapears as soon as the user navigates elsewhere, let's forget about this and sleep well at night still" – Ronan Thibaudau Mar 16 '14 at 13:40

1 Answers1

1

I encountered the same issue recently. First, Have you try it? It doesn't end in a memory leak every time... It should be really quick to test on your computer.

Anyway, in my case, I solved the memory leak issue updating only the data (I used a heatmap overlay) and keeping all the way long the same google map. I'm not sure it's exactly what you're expecting but hope it helps..

abrunet
  • 1,122
  • 17
  • 31