Google map ne se charge pas entièrement! [Résolu]

[mario002e]

Bonjour,
J'ai un petit souci depuis que j'utilise jquery pour charger dynamiquement avec ajax ma carte google.
Voici le code:
Dans la page de gauche:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

Dans la page de droite:

Code php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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>

Quand j'appelle la page par son url, ça marche.
Pour la première fois avec ajax, la carte s'est bien affichée. Mais par la suite, en cliquant sur le même lien, un problème se présente: La carte ne s'affiche qu'au tiers.
J'ai cru que c'est le cache qui était à l'origine puisque quand je vide celui du navigateur et je me reconnecte, tout se passe bien. Alors dans jquery, j'ai modifié la méthode load en lui ajoutant l'option cache:false. Mais en vain.
Svp, aidez moi car cela fait déjà 4 jours que ce problème me casse la tête
Veuillez m'aider svp!

[mario002e]

Je m'excuse pour les informations incomplètes fournies. En fait, la carte était affichée dans le second onglet qui n'était pas le principal. Du coup, je ne comprends pas comment jquery s'y prenait mais quand j'ouvrais l'onglet de la carte, cette carte était affichée au tiers.
Ce matin, en mettant l'onglet de la carte au premier plan (c'est à dire ouvert par défaut), je me suis rendu compte que la carte s'affiche entièrement.
Je suis en ce moment en train de creuser dans ma tête afin de découvrir ce curieux problème des onglets de jquery!
Merci!