How to unset Google Maps from the page?

Question

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

Answer 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..