title: Google map cannot be re-initialized successfully with GMap API v3
body: <p>I am dynamically loading my pages through AJAX. There's a certain element where I dump dynamically loaded HTML, it's called #container</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, I load pages like this: (I'm using jQuery by the way)</p>
  
  <pre><code>$.post( './', { 'page': 'home' }, function(e){
    $('#container').html( e );
  },'html');
  </code></pre>
  
  <p>In one of my pages, I have a Google Map embedded/loaded using the GMap API v3. Basically, I want this map to appear normally every time I load this same page, so I added a function to re-initialize GMap. But, when I open another page, then come back to this page, the map messes up. I believe I have to destroy the instance of GMap first after leaving the page, so that when I come back to that page, it'll be fresh.</p>
  
  <p>Now, my problem is I can't find a way to destroy the map. Is there a way actually, or maybe a different approach, or perhaps a workaround?</p>
  
  <p>Thanks for your help</p>
  
  <p>EDIT:</p>
  
  <p>Here's how it looks like at first load of GMap
  <a href="http://imageshack.us/photo/my-images/707/firstoc.jpg/" rel="nofollow">http://imageshack.us/photo/my-images/707/firstoc.jpg/</a></p>
  
  <p>And here's how it looks like after visiting a different page (ajax load) and going back to the previous page: <a href="http://imageshack.us/photo/my-images/864/secondy.jpg/" rel="nofollow">http://imageshack.us/photo/my-images/864/secondy.jpg/</a></p>
  
  <p>The grey area is a problem. It just appears there and you can't drag it. I do think that the GMap object needs to be destroyed before reloading the page so that it won't mess up, but I just don't know how.</p>