jquery - 使用ajax时谷歌地图不完全显示

Question

三天以来我遇到了关于谷歌地图的问题。我想使用 jQuery 在页面中动态加载 map 。这是代码:在左侧页面中，有一个脚本将页面加载到右侧页面:

<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)时，我会完全显示 map ，但是当使用ajax时， map 不会完全显示。拜托，我需要你的帮助!

<小时/>

对于所提供的信息不完整，我深表歉意。事实上，该 map 发布在第二个选项卡中，该选项卡不是主选项卡。所以，我不明白 jquery 是如何做到的，但是当我打开 map 的选项卡时，卡片显示到三分之一。今天早上，本地图选项卡位于前台(默认打开)时，我意识到 map 已完全显示。我现在正在绞尽脑汁地寻找 jquery tabs 这个奇怪的问题!谢谢!

Answer 1

当我在 jquery 弹出窗口中加载 map 时，我遇到了类似的问题。显示弹出窗口后，我执行了以下操作:

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