2 plans d'accès google maps sur la même page [Résolu]

Ludococo20 9 Messages postés jeudi 5 mars 2009Date d'inscription 15 mars 2009 Dernière intervention - 9 mars 2009 à 11:15 - Dernière réponse : Ludococo20 9 Messages postés jeudi 5 mars 2009Date d'inscription 15 mars 2009 Dernière intervention
- 15 mars 2009 à 14:45
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
Afficher la suite 

Votre réponse

13 réponses

Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 11 mars 2009 à 17:56
3
Merci
Bonjour,
<table bgcolor= "#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, mais le javascript est vraiment dur pour
moi</td>
</td></tr></tbody></table>comme pour
tout le monde au début..

je t'ai concocté une petit exemple à partir du
tutorial
<html>

<head>
<style type="text/css">
.gmap {
  margin :
10px;
  width : 400px;
  height : 400px;
  border : 1px solid blue;

  float : left;
  display : block;
}
</style>

<script src="http:/
/maps.google.com/maps?file=api&v=2.x&key=votre_clé_ici"
type="text/javascript"></script>
<script
type="text/javascript">
//-- Ici les coordonnes
sous forme de tableau
var Param =
[[45.038254,5.052681],[45.380608,5.539513]];
//--
Meme Zoom pour tous
var Zoom = 13;
//-- Variable globale pour l'objet GMAP2 sous forme de tableau

var map=[];
//-- 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());

    }
  }
}
</script>
</head>

  



  




</html>

Voilou !
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, A force de persévérance peut-être y
arriverai-je ?</td>
</td></tr></tbody></table>il
ne te reste plus qu'a te jeter...
;O)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 95 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 13 mars 2009 à 15:04
3
Merci
Bonjour,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, Tu utilises des longitudes-latitudes or je
passe par des simples adresses postales. Dois-je passer obligatoirement par des
longitudes-latitudes
?</td>
</td></tr></tbody></table>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();

<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, ...création d'un tableau je vois souvent la
valeur new
Array...</td>
</td></tr></tbody></table>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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 95 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 14 mars 2009 à 11:52
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 95 internautes ce mois-ci

Commenter la réponse de PetoleTeam
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 9 mars 2009 à 17:37
0
Merci
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)
Commenter la réponse de PetoleTeam
Ludococo20 9 Messages postés jeudi 5 mars 2009Date d'inscription 15 mars 2009 Dernière intervention - 9 mars 2009 à 18:45
0
Merci
C'est ce que je croyais aussi mais il n'y a que le dernier div qui s'affiche
Commenter la réponse de Ludococo20
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 9 mars 2009 à 18:53
0
Merci
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)
Commenter la réponse de PetoleTeam
Ludococo20 9 Messages postés jeudi 5 mars 2009Date d'inscription 15 mars 2009 Dernière intervention - 9 mars 2009 à 20:50
0
Merci
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 ?
Commenter la réponse de Ludococo20
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 9 mars 2009 à 22:18
0
Merci
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">

----,

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


</td>

</td>
</tr>
</tbody>
</table>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)
Commenter la réponse de PetoleTeam
Ludococo20 9 Messages postés jeudi 5 mars 2009Date d'inscription 15 mars 2009 Dernière intervention - 10 mars 2009 à 10:42
0
Merci
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 ?
Commenter la réponse de Ludococo20
Ludococo20 9 Messages postés jeudi 5 mars 2009Date d'inscription 15 mars 2009 Dernière intervention - 12 mars 2009 à 18:04
0
Merci
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.
Commenter la réponse de Ludococo20
Ludococo20 9 Messages postés jeudi 5 mars 2009Date d'inscription 15 mars 2009 Dernière intervention - 13 mars 2009 à 17:48
0
Merci
Génial, le résultat est celui attendu. Encore merci pour toute ton aide apportée
Commenter la réponse de Ludococo20
Ludococo20 9 Messages postés jeudi 5 mars 2009Date d'inscription 15 mars 2009 Dernière intervention - 13 mars 2009 à 18:27
0
Merci
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]);
                }
        }
    }
}
Commenter la réponse de Ludococo20
Ludococo20 9 Messages postés jeudi 5 mars 2009Date d'inscription 15 mars 2009 Dernière intervention - 15 mars 2009 à 14:45
0
Merci
Encore un grand merci pour ton aide et tes conseils qui m'ont permis de réaliser cette petite partie de mon site.
Commenter la réponse de Ludococo20

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.