11548 sujets

JavaScript, DOM et API Web HTML5

Google map ne se charge pas entièrement!

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:

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

<?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!
Modifié par mario002e (29 Jun 2011 - 12:08)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
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!
Un autre membre du forum avait exactement le même problème que toi il y quelques temps, mais j'arrive pas à remettre la main sur le sujet de discussion.
J'ai exactement le même problème, je charge mon bout de page avec la div qui contient la carte en ajax, puis j'initialise la carte en javascript.
Tout marche bien la première fois, mais il faut actualiser la page pour que ca marche une deuxième fois...

Je sais bien que je pourrai faire le site sans me casser la tête avec des liens normaux et tout marcherai bien, mais j'ai envi d'apprendre l'ajax alors je me complique la vie !

En tout cas, si quelqu'un trouve la solution, je suis preneur.
Sujet clos
Aller à