Карта Google не отображается полностью при использовании ajax

Question

У меня есть проблема, так как три дня насчет карты Google.Я хочу использовать jQuery для динамической загрузки карты на странице.Вот код: На левой боковой странице скрипт, который загружает страницу в правую:

<script type="text/javascript">
    $(document).ready(
    function () {
        $("a").each(
        function(){
            var ajaxOptions = {};
            $(this).click(function() {
                if (this.className != "notLoad") {
                $("#page").load(this.href, {'idtracker':getTracker()});
                return false;
            }
            });
        });
    }
);
    function getTracker(){
        return $("#idtracker option:selected")[0].value;
    }
</script>

На правой боковой странице:

<?php
$content .= '<script type="text/javascript">' . "\n";
$content .= "\t" . 'function initialize() {' . "\n";
$content .= "\t" . 'var myLatlng = new google.maps.LatLng(6.125,1.154 );' . "\n";
$content .= "\t" . 'var myOptions = {' . "\n";
$content .= "\t\t" . 'zoom: 8,' . "\n";
$content .= "\t\t" . 'center: myLatlng,' . "\n";
$content .= "\t\t" . 'mapTypeId: google.maps.MapTypeId.' . $this->mapTypeId . "\n";
$content .= "\t" . '}' . "\n";
$content .= "\t" . 'map = new google.maps.Map(document.getElementById("map"), myOptions);' . "\n";
$content .= '}' . "\n";

$content .= "\t" . 'function loadMaps() {' . "\n";
$content .= "\t" . ' google.load("maps", "3", {"other_params":"sensor=false", "callback" : initialize});' . "\n";
$content .= "\t" . '}' . "\n";

$content .= "\t" . 'function initLoader() {' . "\n";
$content .= "\t" . 'var script = document . createElement("script");' . "\n";
$content .= "\t" . 'script.type = "text/javascript";' . "\n";
$content .= "\t" . 'script.src = "https://www.google.com/jsapi?async=2&callback=loadMaps";' . "\n";
$content .= "\t" . 'document.getElementsByTagName("head")[0].appendChild(script);' . "\n";
$content .= "\t" . '}' . "\n";
$content .= "\t" . 'window.onload=initLoader();' . "\n";
$content .= '</script>' . "\n";
print $content;
?>
<div id="map"></div>

Когда я вызываю правуюСтраница без AJAX (по URL), я получаю карту полностью отображается, но при использовании AJAX карта не отображается полностью.Пожалуйста, мне нужна ваша помощь!

---

Прошу прощения за предоставленную неполную информацию.На самом деле карта была размещена во второй вкладке, которая была не основной.Итак, я не понимаю, как jquery сделал это, но когда я открыл вкладку карты, карта показалась одной трети.Сегодня утром, с вкладкой карты на переднем плане (которая открывается по умолчанию), я понял, что карта отображается полностью.Сейчас я ломаю голову над этой любопытной проблемой вкладок jquery!Спасибо!

Answer 1

У меня была похожая проблема, когда я загружал карту во всплывающем окне jquery. После показа всплывающего окна я сделал следующее:

google.maps.event.trigger(map, "resize");
map.setOptions(mapOptions);

Answer 2

Я нашел ответ здесь: http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

Любой компонент, для инициализации которого требуются некоторые размерные вычисления, не будет работать в скрытой вкладке, потому что сама панель вкладок скрыта с помощью дисплея: нет, так что любые элементы внутри не будут сообщать о своей фактической ширине и высоте (0 в большинство браузеров).

Есть простой обходной путь. Используйте технику влево, чтобы скрыть неактивные панели вкладок. Например. в таблице стилей замените правило для селектора классов ".ui-tabs .ui-tabs-hide" на

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

Для карт Google вы также можете изменить размер карты, когда вкладка отобразится следующим образом:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

resizeMap () вызовет checkResize () Google Maps для конкретной карты. Спасибо за ваш вклад!