Sujet Précédent Sujet Suivant

Google Maps API

Fermé
Utilisateur anonyme - Modifié le 26 mai 2018 à 17:13
 Utilisateur anonyme - 26 mai 2018 à 21:19
Bonjour, je souhaiterais rendre un projet en informatique. Le but étant de créer un itinéraires entres différents lieux prédéfinis en utilisant l'API Google Maps et de calculer la distance. Malheureusement les emplacements choisis dans la liste déroulante ne suivent pas les emplacements indiqués sur les cartes.

Pour ce faire je vous laisse les codes 

<html>
  <head>
<title>Vélillers</title>
 <meta charset="UTF-8"/>
 <script type="text/javascript" src="vélo.js"></script><!-- lien js -->
 <link rel="stylesheet" href="style.css" />       <!-- lien css -->
<link rel="icon" href="fichiers/1.ico" />      <!-- lien icone -->
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBX4xVNa9qrlrB_ZX0QJSvMpSfvNRDJgQM"> </script> <!-- clé API maps -->
    
</head>


<body>
 

                    <!-- création d'un class header -->
 <h1 class="header">Itinéraire vélo</h1>
<br/><br/>
    <div id="map"></div> <!-- création d'un div qui contient la carte sur laquelle on choisirat la taille  -->
   
 <div id="menu">
 
  <p> De quel emplacement voulez-vous partir  :
   <select id="emplacement1">   <!-- Cela permet d'afficher une liste déroulante -->
    <option value="0"> Piscine </option>
    <option value="1"> Gare </option>
    <option value="2"> Lycée Anatole France </option>
    <option value="3"> Place </option>
    <option value="4"> Collège René Cassin </option>
    <option value="5"> Carrefour Market </option>
    <option value="6"> Collège Léo Lagrange </option>
   </select> 
   
  </p>

 <p>  De quel emplacement voulez-vous arriver  :
   <select id="emplacement2">   <!-- Cela permet d'afficher une liste déroulante -->
    <option value="0"> Piscine </option>
    <option value="1"> Gare </option>
    <option value="2"> Lycée Anatole France </option>
    <option value="3"> Place </option>
    <option value="4"> Collège René Cassin </option>
    <option value="5"> Carrefour Market </option>
    <option value="6"> Collège Léo Lagrange </option>
   </select> 
  </p>
<input id="button1"type="button"  class="bordure" value="calculer la distance" onClick="itineraire()"/>  <!-- création d'un bouton  avec un id et un onclick permettant de déclencher la fonction itineraire  -->
     
  
  <input id="repdistance" class="saisie">   
 
  
  </div>  
  
     
 
</body>
 </html>



alert ("Bienvenue sur notre site !");  // alert quand on arrive sur le site

 
var tab=new Array();
 tab[0] = [0,0,0,0,0,0,0,0,0,0,0,350,0,0];  // équivaut à la 1er ligne
 tab[1] = [0,0,0,0,0,0,0,0,120,0,0,0,0,0];
 tab[2] = [0,0,0,0,0,0,0,0,0,0,0,0,0,800];
 tab[3] = [0,0,0,0,0,0,0,0,0,450,0,0,0,0];
 tab[4] = [0,0,0,0,0,0,0,230,0,0,0,450,550,0];
 tab[5] = [0,0,0,0,0,0,0,0,0,0,0,0,350,0];
 tab[6] = [0,0,0,0,0,0,0,0,0,0,600,0,0,0];
 tab[7] = [0,0,0,0,230,0,0,0,360,160,0,0,0,0];
 tab[8] = [0,120,0,0,0,0,0,360,0,0,120,0,0,0]; 
 tab[9] = [0,0,0,450,0,0,0,160,0,0,0,0,0,0];
 tab[10] = [0,0,0,0,0,0,600,0,120,0,0,0,0,0];
 tab[11] = [350,0,0,0,450,0,0,0,0,0,0,0,0,0];
 tab[12] = [0,0,0,0,550,350,0,0,0,0,0,0,0,400];
 tab[13] = [0,0,800,0,0,0,0,0,0,0,0,0,400,0]; 
  
var coordonees=new Array(); // création d'un tableau avec coordonées

  
var laCarte;
var chemin=[];



function initialiseCarte(){
 // Coordonnées du centre de lillers (latitude et longitude).
 var x1 = 50.56412899999999,
  y1 = 2.480630900000051;
 

 
 // Récupère l'id de la carte dans le fichier HTML.
 var emplacement  = document.getElementById("map");
 // Les options.
 var Options = {
  center: new google.maps.LatLng(x1,y1),   //détermine le centre de la carte
  mapTypeId: google.maps.MapTypeId.HYBRID,
  zoom: 14    //déterminer le zoom de la carte compris entre 0 et 20.
 };
 
 // Lance la carte avec pour argument l'emplacement et les Options.
 var laCarte = new google.maps.Map(emplacement, Options);
 
 
 
 
    
 
 var m0 = new google.maps.Marker({
        position:  new google.maps.LatLng(50.5631013, 2.4900162000000137), // coordonees piscine
  map: laCarte,    //carte sur laquelle le marqueur est créé.
  title: 'Piscine'   //message qui s'affiche quand on s'arrête sur le marqueur
  
 });
  var m1 = new google.maps.Marker({
        position: new google.maps.LatLng( 50.5616145, 2.479062200000044), // coordonees gare
  map: laCarte,    //gare
  title: 'Gare',   //message qui s'affiche quand on s'arrête sur le marqueur
  
 });
 
 var m2 = new google.maps.Marker({
        position: new google.maps.LatLng( 50.5686141, 2.465342899999996), // coordonees carrefour market
  map: laCarte,    //carrefour
  title: 'Carrefour Market'   //message qui s'affiche quand on s'arrête sur le marqueur
  
 }); 
 var m3 = new google.maps.Marker({
        position: new google.maps.LatLng( 50.5555375, 2.478294699999992), // coordonees lycée
  map: laCarte,    //lycee
  title: 'Lycee'   //message qui s'affiche quand on s'arrête sur le marqueur
 }); 
 var m4 = new google.maps.Marker({
        position: new google.maps.LatLng( 50.56164286225398, 2.4823088049561193), // coordonees place
  map: laCarte,    //place
  title: 'Place'   //message qui s'affiche quand on s'arrête sur le marqueur
  
 }); 
 
 var m5 = new google.maps.Marker({
        position: new google.maps.LatLng( 50.56705290000001, 2.479745200000025), // coordonees college
  map: laCarte,    
  title: 'Collège Léo Lagrange '   //message qui s'affiche quand on s'arrête sur le marqueur
 })  
 
 var m6 = new google.maps.Marker({
        position: new google.maps.LatLng( 50.5595646, 2.471234299999992), // coordonees college cassin
  map: laCarte,    
  title: 'Collège René Cassin '   //message qui s'affiche quand on s'arrête sur le marqueur
 })  
 
 var m7=  new google.maps.Marker({
 
        position: new google.maps.LatLng( 50.56088227833832, 2.480517625808716), // coordonees innvisible
   visible: false,
  map: laCarte,    
  title: 'marqueur 1 '   //message qui s'affiche quand on s'arrête sur le marqueur
  
 })  
 
 var m8=  new google.maps.Marker({
 
        position: new google.maps.LatLng( 50.56090167427862, 2.4800503851292888), // coordonees innvisible
  visible: false,
  map: laCarte,    
  title: 'marqueur 2'   //message qui s'affiche quand on s'arrête sur le marqueur
 })  
  var m9=  new google.maps.Marker({
 
        position: new google.maps.LatLng( 50.559514684266595, 2.4796373249409953), // coordonees innvisible
  visible: false,
  map: laCarte,    
  title: 'marqueur 3'   //message qui s'affiche quand on s'arrête sur le marqueur
 })  
  var m10=  new google.maps.Marker({
 
        position: new google.maps.LatLng( 50.5604944, 2.47806), // coordonees innvisible
  visible: false,
  map: laCarte,    
  title: 'marqueur 4'   //message qui s'affiche quand on s'arrête sur le marqueur
 })  
  var m11=  new google.maps.Marker({
 
        position: new google.maps.LatLng( 50.56299591209326, 2.4863460659980774), // coordonees innvisible
  visible: false,
  map: laCarte,    
  title: 'marqueur 5'   //message qui s'affiche quand on s'arrête sur le marqueur
 })  
 
 var m12=  new google.maps.Marker({
 
        position: new google.maps.LatLng( 50.56537012312855, 2.478886842727661), // coordonees innvisible
  visible: false,
  map: laCarte,    
  title: 'marqueur 6'   //message qui s'affiche quand on s'arrête sur le marqueur
 })  
 
 var m13=  new google.maps.Marker({
 
        position: new google.maps.LatLng(50.56604536405496, 2.474300265312195), // coordonees innvisible
  visible: false,
  map: laCarte,    
  title: 'marqueur 7'   //message qui s'affiche quand on s'arrête sur le marqueur
 })  
 // création d'un tableau en js
coordonees[0] = new google.maps.LatLng(50.5631013, 2.4900162000000137); // correspond à la piscine
coordonees[1] = new google.maps.LatLng( 50.5616145, 2.479062200000044); // gare 
coordonees[2] = new google.maps.LatLng( 50.5686141, 2.465342899999996);// grand carrefour
coordonees[3] = new google.maps.LatLng( 50.5555375, 2.478294699999992);// Lycee Anatole Lillers
coordonees[4] = new google.maps.LatLng( 50.56164286225398, 2.4823088049561193);// carefour contact
coordonees[5] = new google.maps.LatLng( 50.56705290000001, 2.479745200000025);// Léo
coordonees[6] = new google.maps.LatLng( 50.5595646, 2.471234299999992);// grand carefour
coordonees[7] = new google.maps.LatLng( 50.56088227833832, 2.480517625808716);
coordonees[8] = new google.maps.LatLng( 50.56090167427862, 2.4800503851292888);
coordonees[9] = new google.maps.LatLng( 50.559514684266595, 2.4796373249409953);
coordonees[10] = new google.maps.LatLng( 50.5604944, 2.47806);
coordonees[11] = new google.maps.LatLng( 50.56299591209326, 2.4863460659980774);
coordonees[12] = new google.maps.LatLng( 50.56537012312855, 2.478886842727661);
coordonees[13] = new google.maps.LatLng(50.56604536405496, 2.474300265312195);


var lignesTrajet = new google.maps.Polyline({     //On crée le trajet avec ses options
  path: chemin,         //      le chemin du tracé
  strokeColor : 'DarkCyan',     // couleur du trajet
   strokeWeight : 5       // épaisseur du trajet
  });
  lignesTrajet.setMap(laCarte);   // trajet ibscrut sur la carte 

}

function itineraire(){
var balisedepart = document.getElementById("emplacement1").value;
var balisearrivee = document.getElementById("emplacement2").value;

var baliseselect = balisedepart;

var distint = 0;
var Liste = []; //liste vide utilisée pour l'algo
for ( var i=0; i<14 ; i++) {
 Liste[i] = [1000000,'X','N'];  //1ère valeur : distance par rapport au départ, 2ième valeur : prédecesseur, 3ième valeur : déjà atteint de manière optimale : O sinon N
}



//Algo de Moore Dijkstra
 while ( balisearrivee != baliseselect ) { 
  var min = 1000000;             //Infiniment grand (début forcément inférieur)
  for ( var n = 0 ; n<14 ; n++) {
   if (Liste[n][2] == 'N') {
    var dist = tab[baliseselect][n];      //récupére la distance au point n de la balise selectionnée
    var distTotal = distint+dist;       //calcule la distance totale -> distance entre les points précédent + distance entre les deux points concernés
     if (dist != 0 && distTotal < Liste[n][0]) {   // si la distance est inférieure à 0 (si on se déplace) et si la distance totale est inférieur à la distance au point suivant (chemin plus court)
      Liste[n][0] = distTotal;      // la distance n-o devient la distance totale
      Liste[n][1] = baliseselect;      // La ville 1 devient la ville concernée
     }
     if (Liste[n][0] < min) {
      min = Liste[n][0];
      var pbaliseselect = n;
     }
   }
  }
 baliseselect = pbaliseselect;            // balise select = ,
 Liste[baliseselect][2] = 'O';            // on crée une liste qui correspond à n 
 distint= Liste[baliseselect][0];           // balise selectionner = 0
 }

 

var repdistance = document.getElementById("repdistance");
var distancetotale = Liste[balisearrivee][0];
repdistance.value = " "+distancetotale+" m";

var trajet = [];
trajet[0] = balisearrivee;
var baliseinterm = balisearrivee;
while (baliseinterm != balisedepart )  {
 baliseinterm = Liste[baliseinterm][1];                                         // Liste qui commence à 1
 trajet.push(baliseinterm);                                                      //Je décale de 1
}


for ( var j=0 ; j<trajet.length ; j++){                                                   // J=Balis interm
     chemin[j] = coordonees[trajet[j]] ;             // on reorend les coordonees du tableau afin de tracer le chemin  
}

initialiseCarte();      // initialise qui permet de réinitialiser la page car malheureusement cela ne fonctionnait pas avec une fonction
}

 
 
 window.addEventListener("load",initialiseCarte);



/* CSS */

body{
background-image:url("fichiers/fond 4.jpg");  /* image de fond */
background-size:2700px;        /* taille de l'image */
background-position:center;       /* position image */
background-repeat:no-repeat;
 margin: 0; 
 padding: 0; 
}

 


 
 
.header {   /* classe */
    padding: 40px;
    text-align: center;         /* position du texte */
 background-image:url("fichiers/fond 3.png");
 background-repeat:no-repeat;     /* pour éviter que le fond se répéte */
 background-position:center;
 background-color:#C0C0C0;
  border-style: groove;
    border-width: 7px;
}


 
 #map {
   width: 80%;
   height: 500px;
   background-color: grey;
   margin: 100;
  padding: 25;
    border-radius:  30px;
 border-style:ridge;
 border-width: 13px;


 }
 p{
  font-style:bold;
  color:white;
 }
  
   

img{
 width:60px;
 height:60px;
position;left;
}

#button1{
 border:none;
 padding:6px 0 6px 0;
 border-radius:8px;
 background-color:#d34836;
 font:bold 13px Arial;
 color:#ffffff;
 display:block;
 float:right;

}
  

#saisie{
    color: blue;
 font-size:40px;
 
}

 
#emplacement1 {
 background-color:#40A497;
 font-family:American Typewriter, serif;
 }

#emplacement2{
  background-color:#40A497;
} 

#menu{
  max-width :100%;
 height:230px;
 background-color:#13334c;
 background-image:url("fichiers/fond 3");
 font-size:40px;
x padding:14px;
}
 #repdistance { 
  font-size:14px; 
 display:block;
 float:right;
 }

Cordialement
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
26 mai 2018 à 17:54
Bonjour,

Ton code est un peu brouillon.
Visiblement tu initialises deux fois les marker. Un coup "normalement" et un coup dans un array...

A part ça.. pourrais tu nous indiquer exactement ce qui ne fonctionne pas ( en détaillant ta réponse )
et nous indiquer si tu as des erreurs dans la console JS de ton navigateur.

Merci.
0
Réponse 2 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
26 mai 2018 à 18:06
Première correction
- Ne pas nommer tes fichiers (ni de variables...) avec des caractères accentués ou spéciaux.
Renomme ton fichier vélo.js en velo.js

- Charge le JS de google AVANT le velo.js

- Place les fichiers JS à la fin de ton html ( juste avant le </body> )

Comme ceci: 
<!DOCTYPE html>
<html>
  <head>
    <title>Véllillers</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="style.css" /> <!-- lien css -->
    <!-- <link rel="icon" href="fichiers/1.ico" /> -->      <!-- lien icone -->   
  </head>
  <body>
    <!-- création d'un class header -->
    <h1 class="header">Itinéraire vélo</h1>
    <br/><br/>
    <div id="map"></div> <!-- création d'un div qui contient la carte sur laquelle on choisirat la taille  -->
     
    <div id="menu">
      <p> De quel emplacement voulez-vous partir  :
        <select id="emplacement1">   <!-- Cela permet d'afficher une liste déroulante -->
          <option value="0"> Piscine </option>
          <option value="1"> Gare </option>
          <option value="2"> Lycée Anatole France </option>
          <option value="3"> Place </option>
          <option value="4"> Collège René cassin </option>
          <option value="5"> Carrefour Market </option>
          <option value="6"> Collège Léo Lagrange </option>
        </select> 
      </p>

      <p>  De quel emplacement voulez-vous arriver  :
        <select id="emplacement2">   <!-- Cela permet d'afficher une liste déroulante -->
          <option value="0"> Piscine </option>
          <option value="1"> Gare </option>
          <option value="2"> Lycée Anatole France </option>
          <option value="3"> Place </option>
          <option value="4"> Collège René Cassin </option>
          <option value="5"> Carrefour Market </option>
          <option value="6"> Collège Léo Lagrange </option>
       </select> 
      </p>
    
      <input id="button1"type="button"  class="bordure" value="calculer la distance" onClick="itineraire()"/>  <!-- création d'un bouton  avec un id et un onclick permettant de d꤬encher la fonction itineraire  -->
      <input id="repdistance" class="saisie">   
    </div>  
    <!-- include des JS -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBX4xVNa9qrlrB_ZX0QJSvMpSfvNRDJgQM"> </script> <!-- clé API maps -->   
    <script type="text/javascript" src="velo.js"></script><!-- lien js -->
  </body>
 </html>


En faisant cela... il semble que ton code fonctionne.
0
Utilisateur anonyme
Modifié le 26 mai 2018 à 19:05
Oui je suis d'accord pour dire que cela fonctionne mais malheureusement en fait quand on choisi dans les menus déroulants Piscine gare il l'affiche bien sur la carte le trajet. Et quand on fait un autre trajet comme par exemple Piscine place ça n'affiche pas le trajet qu'il faudrait sur la carte.Il n'y aucune erreur dans ma console.
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
26 mai 2018 à 19:06
Tu veux dire qu'il n'actualise pas ou qu'il ne trace pas du tout de trajet ?
Tu as qqchose dans la console ?
0
Utilisateur anonyme
Modifié le 26 mai 2018 à 21:21
Je n'ai aucune erreur dans la console , il trace le trajet mais pas en suivant les bon points ou une fois sur deux voilà. Je souhaiterai juste régler ce problème.
Merci beaucoup
0