Google Map does not display entirely when using ajax

I have a problem since three days about google map. I want to use jQuery to dynamically load the map in a page. Here is the code: In left side page, a script that loads the page into the right one:

<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>

In the right side page:

<?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>

When I call the ri开发者_运维百科ght page without ajax (by its url), i get the map entirely displayed but when using ajax, the map is not fully displayed. Please, I need your help!

I apologize for the incomplete information provided. In fact, the map was posted in the second tab that was not the main. So, I do not understand how jquery did it but when I opened the tab of the map, the card was shown to one third. This morning, with the tab of the map in the foreground (that is opened by default), I realized that the map displayed entirely. I am now racking my brains to find this curious problem of jquery tabs! Thank you!

I had a similar problem when I loaded the map inside a jquery popup. After showing the popup I did the following:

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

I found the answer here: http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

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

For Google maps you can also resize the map once the tab is displayed like this:

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

resizeMap() will call Google Maps' checkResize() on the particular map. Thank your for your contribution!