title: How to unset Google Maps from the page?
body: <p>I'm trying to play with Google Maps API.</p>
  
  <p>My HTML code looks like:</p>
  
  <pre><code>&lt;div id="map-1"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I use some JS to init map on the page, nearly similar to this one:</p>
  
  <pre><code>var mapInstance = new google.maps.Map(document.getElementById('map-1'));
  </code></pre>
  
  <p>It works well.</p>
  
  <p>The issue is, I need to add and remove a maps on a same page multiple times (when user clicks on corresponding links).</p>
  
  <p>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 <a href="https://developers.google.com/maps/documentation/javascript/reference" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/reference</a></p>
  
  <p>There're some methods like <code>clearInstanceListeners</code>, 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 <code>google.maps.event.clearInstanceListeners(mapInstance);</code>. It doesn't work - my map doesn't loose any events.</p>
  
  <p>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.</p>
  
  <p>Do you have any ideas about how this issue can be solved?</p>
  
  <hr>
  
  <p>I've also seen a topic <a href="https://stackoverflow.com/questions/9435909/google-maps-javascript-api-v3-unload-deconstructor-delete-remove">Google Maps JavaScript API V3 - Unload / Deconstructor / Delete / Remove</a></p>
  
  <p>They recommend to use <code>jQuery.remove()</code>. </p>
  
  <p>I don't think it's a right case for me, because:</p>
  
  <p>1) I simply don't use jQuery in my project</p>
  
  <p>2) <code>remove</code> method removes events only from jQuery's cache (events which were binded by jQuery)</p>
  
  <p>3) as a result of the 2), html is removed, but memory isn't cleared (hello memory leak).</p>