Карта Google не может быть повторно инициализирована успешно с GMap API v3

Question

Я динамически загружаю свои страницы через AJAX. Есть определенный элемент, куда я выгружаю динамически загружаемый HTML, он называется # container

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

Итак, я загружаю страницы следующим образом: (кстати, я использую jQuery)

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

На одной из моих страниц встроена / загружена карта Google с использованием API GMap v3. По сути, я хочу, чтобы эта карта отображалась нормально каждый раз, когда я загружаю эту же страницу, поэтому я добавил функцию для повторной инициализации GMap. Но когда я открываю другую страницу, а затем возвращаюсь на эту страницу, карта портится. Я считаю, что я должен уничтожить экземпляр GMap первым после того, как покину страницу, чтобы, когда я вернусь на эту страницу, он был свеж.

Теперь моя проблема в том, что я не могу найти способ уничтожить карту. Есть ли способ на самом деле, или, возможно, другой подход, или, возможно, обходной путь?

Спасибо за вашу помощь

EDIT:

Вот как это выглядит при первой загрузке GMap http://imageshack.us/photo/my-images/707/firstoc.jpg/

А вот как это выглядит после посещения другой страницы (загрузка ajax) и возврата на предыдущую страницу: http://imageshack.us/photo/my-images/864/secondy.jpg/

Серая область - это проблема. Это просто появляется там, и вы не можете перетащить его. Я действительно думаю, что объект GMap необходимо уничтожить перед перезагрузкой страницы, чтобы он не испортился, но я просто не знаю как.

Answer 1

Посмотрите на этот пример кода здесь: jquery-ui-map-v_3

Это не единственное решение, есть еще одно, которое может работать в предыдущей ссылке.

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

Я работаю на PhoneGap Framework и jQuery Mobile, и, как сказал gyaresu, это спасло мне жизнь.

Удачи.

Answer 2

У меня была похожая проблема. Возможно, вы найдете мое решение полезным.

Я использовал 'pageinit':

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

Когда мне нужно было «pagehow»:

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

/4684889/pochemu-moi-markery-okazyvaytsya-v-verhnem-levom-uglu-esli-ya-vozvraschays-nazad-cherez-ajax