[RESOLU] Problème Gmap avec Ajax

[Mountain Magazin]

Salut,

J'ai un souci technique que je n'arrive pas à résoudre.

Voici les explications.

Je bosse sur un projet de site sur lequel je référence différents établissements touristiques. Pour chacun, je créé une fiche détaillée avec navigation par onglets (tarifs, description, accès...) générés à partir d'une BDD mySQL.

La navagation entre les onglets une fois la fiche chargée se fait en Ajax.

Sur l'onglet pas défaut, chargé avec la page, j'affiche une mini map pour localiser l'établissement.

Tout va bien sauf que lorsque je vais sur un autre onglet et que je reviens sur celui par défaut, la map ne s'affiche pas.

Cela oblige à recharger la page pour voir de nouveau apparaître la Map.


J'ai la page de présentation d'un camping avec la map, puis d'autres onglets avec le contenu appelé via ajax.

La structure est la suivante :

Appel mySQL dans la table onglets avec php pour générer les onglets.
Appel d'un fichier javascript avec ajax qui appelle un contenu différent selon l'ID de l'onglet. Ce fichier s'appelle présentation.php, c'est le même qui est inclus lors du chargement de la page principale.
Tout le code Gmap se trouve à l'intérieur de présentation.php, et il n'y a aucune raison que la map ne se charge pas.

Il me semble que le code javascript n'est pas interprêté lors d'un appel d'une page via ajax, mais je ne suis pas sur et je ne sais pas comment contourner le problème.

Voici le contenu du fichier javascript pour info :

function creeXHR() //fonction qui va crée une instance pour les requete XML
{
     var request = false;
if (window.XMLHttpRequest) //vérifie les différent navigateur
         {
             request = new XMLHttpRequest();//pour FireFox,Opéra
             if (request.overrideMimeType) {
                 request.overrideMimeType('text/xml');
             }
         }
        else if (window.ActiveXObject)
         {
               try
                   { // essaie de charger l'objet pour IE
                         request = new ActiveXObject("Msxml2.XMLHTTP");
                   }
            catch (e)
                   {
                      try
                          { // essaie de charger l'objet pour une autre version IE
                             request = new ActiveXObject("Microsoft.XMLHTTP");
                       }
                  catch (e)
                          {
                             window.alert("Veuillez mettre a jour votre navigateur pour la navigation sur ce site");
                             window.close;
                          }
               }
         }
if (!request) {//si la création de l'instance echoue une fenêtre vous annoncera qu'il ne pourra executer le script
             alert('Abandon,impossible de créer une instance XMLHTTP');
             return false;
         }
     return request;
}

function onglet(ID, camp, lang)//fonction qui va gérer le contenu dans le div en récuperant les données
     {
         var xhr=creeXHR();//création de l'instance
         var url="../include/fonctions/requete.php?page="+ID+"&camp="+camp+"&lang="+lang;//ID va servir a la page requete pour chercher le contenu apartenant a l'ID en fonction de la clef primaire du camping et de la lang de navigation
        
         xhr.open( "GET",url, true);//ouverture du fichier
         xhr.onreadystatechange=function(){
          if(xhr.readyState  == 4)//une fois les données charger
                      {
                                
                              if (xhr.status == 200)//qu'il n'y a pas d'erreur
                              {
                                     var doc2=xhr.responseText;
                                  document.getElementById("contenu").innerHTML=doc2;//envoi les donnees dans le div avec l'ID 'contenu'                                
                              }
                              
                              for (i=0;i<compteur;i++)//la variable compteur qui a été initialiser au debut de la page onglet.php qui indique le nombre d'onglet
                              {
                                      if (tabu[i]==ID)//change la classe de l'onglet actif
                                     {
                                          document.getElementById(tabu[i]).className="active";
                                     }
                                     if (tabu[i]!=ID)//change la classe de l'onglet en innactif
                                     {
                                          document.getElementById(tabu[i]).className="eteint";
                                      }
                              }
                         }
                      };
         xhr.send("");//envoi des donnée au script requete.php (ici NULL)
     }

Voici le code de google map en flash placé dans le fichier google_map_mini.php :

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php print ( $google_map_key ); ?>"
       type="text/javascript"></script>
     <script type="text/javascript">

     //<![CDATA[

     function load() {
       if (GBrowserIsCompatible()) {
          
         var map = new GMap2(document.getElementById("map_mini"));
        
         map.addControl(new GSmallMapControl());
         map.addControl(new GMapTypeControl());
        
         var center = new GLatLng(<?php print ( $data['gps_lat'] ); ?>, <?php print ( $data['gps_long'] ); ?>);
         map.setCenter(center, 5);
        
         var marker = new GMarker(center, {draggable: false});
        
         GEvent.addListener(marker, "dragstart", function() {
           map.closeInfoWindow();
           });
        
         GEvent.addListener(marker, "dragend", function() {
           marker.openInfoWindowHtml("Just bouncing along...");
           });
        
         map.addOverlay(marker);

         }
     }

     //]]>
     </script>
    
<script type="text/javascript">
window.onload= load;
</script>

La page var url="../include/fonctions/requete.php?page="+ID+"&camp="+camp+"&lang="+lang requete.php appelle simplement le fichier suivant en fonction de l'ID de l'onglet.

Voici le code d'affichage du contenu de la page qui contient l'onglet :

<div class="presentation_fiche">

             <div class="description_fiche">

<?php
     //--On teste si présence de coordonnées GPS pour affichage mini map
     if ( $data['gps_lat'] != "" AND $data['gps_long'] != "" ) {
         include_once(__RACINE__.'include/include/map/google_map_mini.php');
         $map = "<div id='map_mini'></div><div class='map_mini_ombre'></div>";
     }
         else {
             $map = "<div class='absence_gps'>" . strtr ( $lang_absence_gps, $ascii ) . "</div>";
         }

     print("<h2>".stripslashes( ucfirst ( $data['nom_camp'] ) ) //--Affichage nom / nbre d'étoiles
      . "</h2>" . "&nbsp;".etoiles_big( $data['nbre_star'] ) );

            [...]

                 ?>
             </div>

             <div class="description_fiche_ombre"></div>

         </div>

     <div class="photo_fiche">

         <?php echo $map ?>

         <div class="photo_fiche_img">

         [....]

Si quelqu'un peut m'aider, ce serait sympa, parce que ça fait un moment que je sèche la dessus.

A+

 

[poulpe]

Salut.
Jai eu la flemme de lire tout le code... mais pourquoi ne pas récupérer toutes les infos de chaaque onglet, puis n'afficher que celui qui est sélectionné via Javascript / Css ?
Ca t'évite tous tes problèmes d'Ajax et ca te fait plus de contenu sur ta page...

 

[rudddy]

perso je fais comme cela, je charge tout et après je mets dans les onglets

 

[Mountain Magazin]

Salut.
Jai eu la flemme de lire tout le code... mais pourquoi ne pas récupérer toutes les infos de chaaque onglet, puis n'afficher que celui qui est sélectionné via Javascript / Css ?
Ca t'évite tous tes problèmes d'Ajax et ca te fait plus de contenu sur ta page...

Parce que j'avais prévu une version HTML sans javascript ni ajax pour ceux qui n'ont pas des navigateurs compatibles ou javascript activé.

C'est pour cela que je suis parti sur Ajax, mais maintenant que j'ai passé du temps à le développer, ça me fait suer de revoir toute cette rubrique juste à cause d'une map qui ne veut pas s'afficher.

Je suis obligé de tout refaire et en plus, n'étant pas très à l'aise avec javascript, je vais y passer des heures.

En plus ça changera rien dans le cas présent, parce que je charge bien l'onglet en question à l'ouverture de la page via une page .php, la même que celle appelée via ajax qui contient tout le code de la map ainsi que l'appel à la fonction de génération de la map.

 

[poulpe]

Ok.
Alors dans ce cas a tu essayé de :
1) afficher dans une alerte les paramètres que tu renvoies a chaque 'click' sur un onglet pour voir s''il ne manque pas quelquechose ?
2) afficher dans une alerte ce que renvoie ggmaps a ta requete ?
3) vérifier que tu mets à jour le bon div ? Dans ton exemple (cette fois j'ai lu le code ) dans ton code tu fais un getELementByid("contenu").innerHTML=... et je ne l'ai pas retrouvé dans ton code.
Si il existe un div contenu dans ton code, vérifie aussi que c'est une id et pas une class, c'est une erreur que je fais moi de temps en temps.
Regarde aussi dans ta console Javascript situ as Firefox...

 

[Mountain Magazin]

Salut,

Merci pour ta réponse, désolé pour le retard, je suis en vacances en Amérique du Sud jusqu'à Dimanche prochain, alors je suis de loin.

Je vais regarder tout ça attentivement et reprendre mon code, mais j'ai toujours pas de piste sérieuse.

Je donne des nouvelles dans ce fil dès que j'ai avancé.

Merci

 

[Mountain Magazin]

Je viens de trouver, c'est tout bête.

Il suffisait d'inclure une expression conditionnelle dans le fichier javascript pour tester la valeur de l'onglet.

Si elle correspond à l'onglet de la map, on appelle le fonction load, tout simplement.

if (ID == "page1") //On test l'onglet pour afficher ou non une map
{
load();
}

Je te remercie d'avoir pris le temps de me donner un coup de main, c'est sympa.
A+