2 plans d'accès google maps sur la même pageRésolu

Question

Bonjour à tous,

je viens de suivre le tuto afin d'intégrer un plan d'accès google maps sur mon site. 
Tout c'est très bien passé. Or je voudrais intégrer 2 plans dans la même page. Seul soucis il n'y a que le deuxième plan qui s'affiche.
Y aurait-il une petite manip à faire afin d'afficher simultanément deux plans sur la même page ?
Merci

PetoleTeam · Accepted Answer

Bonjour, ----, mais le javascript est vraiment dur pour moi

comme pour tout le monde au début.. je t'ai concocté une petit exemple à partir du tutorial Voilou ! ----, A force de persévérance peut-être y arriverai-je ?

il ne te reste plus qu'a te jeter... ;O)

PetoleTeam · Answer

Bonjour, 
function loadMyMap() { 
// Teste si le 
navigateur est compatible avec l'API Gmaps 
if 
(GBrowserIsCompatible()) { 
  // Affecte la carte à la 
div "map_mezy" (voir tout en bas) 
  var divMap = 
document.getElementById("map_mezy");
si je m'en référe à ces quelques 
ligne, issues du tutorial, il te faut créer autant de divMap que tu as de cartes 
à afficher... 
;O)

Ludococo20 · Answer

C'est ce que je croyais aussi mais il n'y a que le dernier div qui s'affiche

PetoleTeam · Answer

il n'y a pas de raison sauf qu'il faut penser à lettre 
un ID différent à chaque DIV de chaque map 
peut être... 
var divMap = []; 
for( var i = 0; i 
<Nbr_Map; i++){ 
  divMap[i] = document.getElementById( "ID_MAP_" 
+i);
pas regardé de près le tutorial... 
;O)

Ludococo20 · Answer

Je ne suis vraiment pas doué en javascript donc je ne sais pas trop comment placer ton code.

En fait le script est à part dans un fichier .js.
J'ai créer un .js pour chaque plan et ils sont placés dans le <head>.
Ayant fait un copier/coller des deux codes (j'ai quand même changer les valeurs des div), je dois me retrouver avec les mêmes variables et je pense que le problème est là.
Qu'en penses-tu ?

PetoleTeam · Answer

----, je dois me retrouver avec les mêmes variables et je pense que le problème est là

il me semble qu'il est impératif de créer des objets différents... // Création des objets princiapux map[i] = new GMap2( divMap[i]); etc... ;O)

Ludococo20 · Answer

Merci beaucoup pour ton aide, mais le javascript est vraiment dur pour moi. 

J'ai fait des tests mais sans succès je dois me tromper quelque part. A force de persévérance peut-être y arriverai-je ?

Ludococo20 · Answer

Je me jette, je me jette mais j'ai quand même une petite question.
Tu utilises des longitudes-latitudes or je passe par des simples adresses postales. Dois-je passer obligatoirement par des longitudes-latitudes ? Sinon en regardant quelques cours lors de la création d'un tableau je vois souvent la valeur new Array or tu ne l'as pas mise donc est-il nécessaire de la mettre ?
Sinon je continue de bidouiller de mon côté, je sens que le résultat approche.
Merci en tout cas pour l'aide fournie.

PetoleTeam · Answer

Bonjour, ----, Tu utilises des longitudes-latitudes or je passe par des simples adresses postales. Dois-je passer obligatoirement par des longitudes-latitudes ?

ceci n'est qu'un exemple, tu peux donc initialiser avec des adresses mais dans ce cas il te faut utiliser un geocoder = new GClientGeocoder(); ----, ...création d'un tableau je vois souvent la valeur new Array...

meaculpa, même si cela revient au même, il est préférable de prendre l'habitude d'écrire correctement les syntaxes, donc var Tableau = new Array(); ;O)

Ludococo20 · Answer

Génial, le résultat est celui attendu. Encore merci pour toute ton aide apportée

Ludococo20 · Answer

J'ai rajouté une boucle afin d'afficher le marker sur la carte. Seul soucis il se retrouve positionner en haut à gauche (ce qui est déjà un bon début, mais pas du tout sur l'adresse souhaitée.

Je t'ai mis en rouge ce que j'ai rajouté

PS : le javascript commence à s'éclaircir





//-- Ici les coordonnes sous forme de tableau



var Param =  [[48.8371740,2.4163369],[48.8579902,2.5676173]];



//-- Meme Zoom pour tous



var Zoom = 15;



//-- Variable globale pour l'objet GMAP2 sous forme de tableau



var map=[];




var marker=[];



//-- Nbr de map a creer



var Nbr_Map = Param.length;



//-------------------



function initialize(){



  //-- Teste si le navigateur est compatible avec l'API Gmaps


    if (GBrowserIsCompatible()) {
         //-- pour chaque map on initialise 
        for( var i  = 0; i <Nbr_Map; i++){
            //-- Creation des objets princiapux
            map[i] =  new GMap2( document.getElementById('map_' +i));
             //-- personnalisation 
            map[i].setCenter ( new GLatLng( Param[i][0], Param[i][1]), Zoom);
            map[i].addControl( new GLargeMapControl());
            map[i].addControl( new GMapTypeControl());
            map[i].enableScrollWheelZoom();
                for( var j  = 0; j <Nbr_Map; j++){
                    marker[j] = new GMarker( Param[i][0], Param[i][1]);
                    map[i].addOverlay(marker[j]);
                }
        }
    }
}

PetoleTeam · Answer

Bonjour, 
tu n'utilises pas la bonne syntaxe pour 
la création de tes marqueurs 
GMarker( latlng:GLatLng, icon?:GIcon, inert?:Boolean)
dixit la 
doc Google, donc 
marker[i] =  
new GMarker( GLatLng( Param[i][0], Param[i][1]));

de plus ta 
façon de procéder tend à créer 2 marqueurs par map, ce qui n'est apparament pas 
ton souhait... 

Voila une correction possible 
//-- Variable 
globale pour les marqueurs sous forme de tableau 
var marker = new 
Array(); 
//------------------- 

function initialize(){ 
  //-- Teste si 
le navigateur est compatible avec l'API Gmaps 
  if 
(GBrowserIsCompatible()) { 
    //-- pour chaque map 
on initialise 
    for( var i = 0; i <Nbr_Map; i++){ 

       //-- Position du point  
      var 
Pos  = new GLatLng( Param[i][0], Param[i][1]); 
      //-- Creation des objets princiapux 
      map[i] 
=  new GMap2( document.getElementById('map_' +i)); 
       //-- personnalisation  
      map[i].setCenter ( 
Pos, Zoom); 
      map[i].addControl( new GLargeMapControl()); 

      map[i].addControl( new GMapTypeControl()); 
      //-- Creation du marqueur 
      marker[i]  = new 
GMarker( Pos); 
      //-- Ajout du marqueur 

      map[i].addOverlay(marker[i]); 
    } 
  } 

}
;O)

Ludococo20 · Answer

Encore un grand merci pour ton aide et tes conseils qui m'ont permis de réaliser cette petite partie de mon site.

2 plans d'accès google maps sur la même page

13 réponses

Votre réponse

Discussions similaires