Google map cannot be re-initialized successfully with GMap API v3

Question

I am dynamically loading my pages through AJAX. There's a certain element where I dump dynamically loaded HTML, it's called #container

<div id="container">
</div>

So, I load pages like this: (I'm using jQuery by the way)

$.post( './', { 'page': 'home' }, function(e){
  $('#container').html( e );
},'html');

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.

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?

Thanks for your help

EDIT:

Here's how it looks like at first load of GMap http://imageshack.us/photo/my-images/707/firstoc.jpg/

And here's how it looks like after visiting a different page (ajax load) and going back to the previous page: http://imageshack.us/photo/my-images/864/secondy.jpg/

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.

Answer 1

Look at this sample of code here : jquery-ui-map-v_3

This is not the only solution, there are one other which might work in the previous link.

<script type="text/javascript">
        $('#page_id').live("pageshow", function() {
                $('#map_canvas').gmap({'center': '59.3426606750, 18.0736160278'});
        });
</script>

I'm developing on PhoneGap Framework and jQuery Mobile and as gyaresu said, this saved my life.

Good Luck.

Answer 2

I had a similar problem. You might find my solution helpful.

I was using 'pageinit':

$('.page-map').live('pageinit', function() {
...do stuff.
}

When what I needed was 'pageshow':

$('.page-map').live('pageshow', function() {
...do stuff.
}

https://stackoverflow.com/questions/9713930/why-do-my-markers-end-up-at-the-top-left-corner-if-i-navigate-back-via-ajax