Bonjour à tous, je voudrais ajouter un code pour connaitre le kilomètre (en voiture et non pas a vole d'oiseau) entre 2 villes préalablement renseignées.

J'ai vu qu'il existait google API mais il y a tellement de fonction que je m'y perds...

Je fais donc appel à vous pour avoir une grande et précieuse aide.

Je vous remercie d'avance pour votre réponse et votre patience.

PS: je ne sais pas si je suis dans le bon forum...

-
Edité par lau2a 3 septembre 2014 à 15:16:38

Up svp une aide de quelqu'un pleaseeeeee!!

je voudrais faire comme sur ce site svp

-
Edité par lau2a 3 septembre 2014 à 15:16:13

help help help

Bonjour, déjà, il faudra utiliser du PHP.

Pour commencer, créer deux inputs text dans un formulaire POST. Un input "départ", et un "destination".

Quand tu cliqueras sur le bouton recherche(submit), ces deux inputs enverront leur données vers ta nouvelle page, itineraire.php par exemple.

code (index.php)

<form action="itineraire.php" method="post">

<input type="text" name="depart" value="Départ" />
<input type="text" name="destination" value="Destination" /><br>
<input type="submit" value="Rechercher" />

</form>

Maintenant, dans itineraire.php, il faut ajouter l'iframe de Google en précisant les variables de départ et de destination. Il faut également remplacer les espaces par des + car les variables seront placées dans une URL.

code(itineraire.php)

<?php
$depart = str_replace(' ','+',$_POST['depart']);
$destination = str_replace(' ','+',$_POST['destination']); 
?>

<iframe width="600" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?key=API_KEY&origin=<?php echo $depart; ?>&destination=<?php echo $destination; ?>&avoid=tolls|highways&mode=driving">
</iframe>

Et là, normalement... Ça marche pas ! Tu devrais avoir l'erreur "The Google Maps API server rejected your request. The provided API key is invalid." Tout simplement parce-que tu n'as pas ton api key (voir key=API_KEY dans la source de l'iframe).

Par en obtenir, c'est très simple. Connecte toi sur ton compte Google et suis ces explications relativement courtes.

Après, normalement tu devrais remplacer API_KEY par ton api key et théoriquement ça devrait fonctionner.

La seule contrainte c'est que tu as une limite de requête/jour, mais tu as tout de même de la marge.

Voilà, j’espère t'avoir aider en t'expliquant le principe

Si tu as un problème, consulte la doc Google ou expose-nous le.

Salut planeto66 et merciiiiii pour ton aide

j'ai fais exactement ce que tu m'as proposé de faire et j'ai tout de même une erreur google même après avoir mis la API_KEY...

voici l'erreur : The Google Maps API server rejected your request. This API project is not authorized to use this API. Please ensure that this API is activated in the APIs Console: Learn more: https://code.google.com/apis/console

La lumière du bout du tunnel n'est pas encore visible...

-
Edité par lau2a 6 septembre 2014 à 12:12:18

Ok. On va essayer d'y remédier en plusieurs étapes.

1. Ouvre cette page.

2. Clique sur "Api access"

3. Cette fois clique sur "Edit allowed referers..." à droite

4. Dans le champ de texte, mets "*" (sans les guillemets)

Ça devrait fonctionner.

planeto66 a écrit:

Bonjour, déjà, il faudra utiliser du PHP.

Pas besoin de php, javascript suffit.

je ne trouve pas edit allowed referers...

moi j'ai edit allowed IPs...

c'est ça??

Oui, essaye avec pour voir.

Avec la version 3 de l'api plus besoin de clé.

je ne trouve pas edit allowed referers...

moi j'ai edit allowed IPs...

c'est ça??

@Lau2a: Essaye sans l'api key d'abord comme dit rigs. Enlève "key=ta_clé&" dans la source de l'iframe.

Sut Touraineverte il y a de bon tuto

http://www.touraineverte.com/google-maps-api-version-3/exemple-tutoriel-cartes-maps/creer-une-carte-avec-api-google-maps-version-3.html

http://www.touraineverte.com/google-maps-api-version-3/exemple-tutoriel-itineraires-directions/index.html

La clé est obligatoire parce que quand je l'enlève jai un message d'erreur qui me dit qu'il manque la key

et en faisant comme tu as dit planeto66 le edit allowed referers et * mais rien n'y fait même message d'erreur que le precedent : 

regzrdez ici

c'est bien le projet Key for browser apps (with referers) qu'il faut creer??

-
Edité par lau2a 6 septembre 2014 à 13:49:33

Alors tu n'as pas la dernière API.

non ... quelle est le lien de la dernière api stp

Faut pas pousser.

C'est une api google alors tu cherche sur google.

En plus cela tombe bien Google a un très bon moteur de recherche.

Planeto66 va peut-être continuer de t'aider mais pour ma part... bye, bye

On va faire plus simple:

à télécharger

les explications, parce que comprendre une bonne fois pour toute évite de refaire des recherches.

rigs merci a toi même si le lien verstouraine verte n'est pas accessible au personne qui ne sont pas membre (aucun moyen de s'enregistrer...)

Planeto66 tu as une idée du lien de la v3 car je ne trouve pas en faisant des recherches sur google comme m'a si "gentiment" proposé rigs (comme si je n'avais pas cherché avant de demander de l'aide...) 

Merci a vous deux

planeto66 j'avais déjà trouvé ce site mais commeèt faire pour enlever le detail de l'itinéraire et récupérer les varibles de temps et de km entre les 2points 

Edit: j'ai trouvé que le détail de l'itinéraire se trouvait dans ce code :

 direction = new google.maps.DirectionsRenderer({
    map   : map,
    panel : panel // Dom element pour afficher les instructions d'itinéraire
  });

du coup quand je mets la ligne en commentaire il m'affiche que la carte et plus du tout le temps ni les km... je cherche encore mais si quelqu'un à un solution 

-
Edité par lau2a 6 septembre 2014 à 14:59:24

lau2a a écrit:

rigs merci a toi même si le lien verstouraine verte n'est pas accessible au personne qui ne sont pas membre (aucun moyen de s'enregistrer...)

Planeto66 tu as une idée du lien de la v3 car je ne trouve pas en faisant des recherches sur google comme m'a si "gentiment" proposé rigs (comme si je n'avais pas cherché avant de demander de l'aide...) 

Merci a vous deux

Bah non tu ne cherche pas du tout. La preuve que tu ne fais aucun effort : je ne suis pas enregistré au site touraineverte et pourtant j'ai tout appris la bas.

P.S : évite tes insinuation avec ton "gentillement". Mon post était une critique très claire alors pas la peine d'utiliser la langue de bois.

-
Edité par rigs 6 septembre 2014 à 14:57:33

bref tu sais apparemment mieux que moi si je cherche ou pas... 

avec ton site j'arrive sur cette page... donc je vois paas comment trouver les réponses à mes questions ....

Bref je CONTINUE mes RECHERCHES 

EDIT: j'ai trouvé quelque chose pour le nombre de km mais j'ai encore un petit soucis : directionsDisplay is not defined pour le code suivant :

// La fonction
function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
    }
    total = total / 1000.
    document.getElementById("total").innerHTML = total + " km";
}  
 
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.directions);
});

où j'ai ajouté : 

var directionsDisplay = new google.maps.DirectionsRenderer();

car une erreur me disait que directionsDisplay n'était pas définit 

mais maintenant reste a savoir où placer mon code dans ma page :

var map;
var panel;
var initialize;
var calculate;
var direction;

initialize = function(){
  var latLng = new google.maps.LatLng(42.2, 8.9); // Correspond au coordonnées de Lille
  var myOptions = {
    zoom      : 8, // Zoom par défaut
    center    : latLng, // Coordonnées de départ de la carte de type latLng 
    mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
    maxZoom   : 20
  };
  
  map      = new google.maps.Map(document.getElementById('map'), myOptions);
  panel    = document.getElementById('panel');
  
  
  var contentMarker = [
      '<div id="containerTabs">',
      '<div id="tabs">',
      '<ul>',
        '<li><a href="#tab-1"><span>Lorem</span></a></li>',
        '<li><a href="#tab-2"><span>Ipsum</span></a></li>',
        '<li><a href="#tab-3"><span>Dolor</span></a></li>',
      '</ul>',
      '<div id="tab-1">',
        '<h3>Lille</h3><p>Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, <a href="http://www.google.fr">google</a> sit amet mauris. In sit amet nisi mauris. Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
      '</div>',
      '<div id="tab-2">',
       '<h3>Aliquam vestibulum</h3><p>Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
      '</div>',
      '<div id="tab-3">',
        '<h3>Pretium suscipit</h3><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Amectus</li></ul>',
      '</div>',
      '</div>',
      '</div>'
  ].join('');

  var infoWindow = new google.maps.InfoWindow({
    content  : contentMarker,
    position : latLng
  });
  
  
  google.maps.event.addListener(infoWindow, 'domready', function(){ // infoWindow est biensûr notre info-bulle
    jQuery("#tabs").tabs();
  });
  
  
  direction = new google.maps.DirectionsRenderer({
    map   : map,
    panel : null, // Dom element pour afficher les instructions d'itinéraire
});

};



calculate = function(){
    origin      = document.getElementById('origin').value; // Le point départ
    destination = document.getElementById('destination').value; // Le point d'arrivé
    if(origin && destination){
        var request = {
            origin      : origin,
            destination : destination,
            travelMode  : google.maps.DirectionsTravelMode.DRIVING // Mode de conduite
        }
        var directionsService = new google.maps.DirectionsService(); // Service de calcul d'itinéraire
        directionsService.route(request, function(response, status){ // Envoie de la requête pour calculer le parcours
            if(status == google.maps.DirectionsStatus.OK){
                direction.setDirections(response); // Trace l'itinéraire sur la carte et les différentes étapes du parcours
            }
        });
    }
};

initialize();

-
Edité par lau2a 6 septembre 2014 à 15:56:44

Je pique ton code mais je ne peut hélas pas t'aider ...

lau2a a écrit:

bref tu sais apparemment mieux que moi si je cherche ou pas... 

avec ton site j'arrive sur cette page... donc je vois paas comment trouver les réponses à mes questions ....

Bref je CONTINUE mes RECHERCHES 

EDIT: j'ai trouvé quelque chose pour le nombre de km mais j'ai encore un petit soucis : directionsDisplay is not defined pour le code suivant :

// La fonction
function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
    }
    total = total / 1000.
    document.getElementById("total").innerHTML = total + " km";
}  
 
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.directions);
});

où j'ai ajouté : 

var directionsDisplay = new google.maps.DirectionsRenderer();

car une erreur me disait que directionsDisplay n'était pas définit 

mais maintenant reste a savoir où placer mon code dans ma page :

var map;
var panel;
var initialize;
var calculate;
var direction;

initialize = function(){
  var latLng = new google.maps.LatLng(42.2, 8.9); // Correspond au coordonnées de Lille
  var myOptions = {
    zoom      : 8, // Zoom par défaut
    center    : latLng, // Coordonnées de départ de la carte de type latLng 
    mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
    maxZoom   : 20
  };
  
  map      = new google.maps.Map(document.getElementById('map'), myOptions);
  panel    = document.getElementById('panel');
  
  
  var contentMarker = [
      '<div id="containerTabs">',
      '<div id="tabs">',
      '<ul>',
        '<li><a href="#tab-1"><span>Lorem</span></a></li>',
        '<li><a href="#tab-2"><span>Ipsum</span></a></li>',
        '<li><a href="#tab-3"><span>Dolor</span></a></li>',
      '</ul>',
      '<div id="tab-1">',
        '<h3>Lille</h3><p>Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, <a href="http://www.google.fr">google</a> sit amet mauris. In sit amet nisi mauris. Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
      '</div>',
      '<div id="tab-2">',
       '<h3>Aliquam vestibulum</h3><p>Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
      '</div>',
      '<div id="tab-3">',
        '<h3>Pretium suscipit</h3><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Amectus</li></ul>',
      '</div>',
      '</div>',
      '</div>'
  ].join('');

  var infoWindow = new google.maps.InfoWindow({
    content  : contentMarker,
    position : latLng
  });
  
  
  google.maps.event.addListener(infoWindow, 'domready', function(){ // infoWindow est biensûr notre info-bulle
    jQuery("#tabs").tabs();
  });
  
  
  direction = new google.maps.DirectionsRenderer({
    map   : map,
    panel : null, // Dom element pour afficher les instructions d'itinéraire
});

};



calculate = function(){
    origin      = document.getElementById('origin').value; // Le point départ
    destination = document.getElementById('destination').value; // Le point d'arrivé
    if(origin && destination){
        var request = {
            origin      : origin,
            destination : destination,
            travelMode  : google.maps.DirectionsTravelMode.DRIVING // Mode de conduite
        }
        var directionsService = new google.maps.DirectionsService(); // Service de calcul d'itinéraire
        directionsService.route(request, function(response, status){ // Envoie de la requête pour calculer le parcours
            if(status == google.maps.DirectionsStatus.OK){
                direction.setDirections(response); // Trace l'itinéraire sur la carte et les différentes étapes du parcours
            }
        });
    }
};

initialize();

-
Edité par lau2a il y a 31 minutes

Salut à tout le monde

je essai de vous partager ce que j'ai utilisé comme html: (après je importé ce code sur joomla)

VOTREKEYAPI= votre key

VILLE1= inserez le nom d'une ville

VILLEDESTINATION= inserez le nom de la ville de destination

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Advanced Directions</title>
    <script src="http://maps.google.com/?file=api&amp;v=2.x&amp;key=VOTREKEYAPI"
      type="text/javascript"></script>
    <style type="text/css">
      body {
        font-family: Verdana, Arial, sans serif;
        font-size: 12px;
        margin: 2px;
      }
      table.directions th {
  background-color:#EEEEEE;
  width: 100%;
      }

      img {
        color: #000000;
      }
    </style>
    <script type="text/javascript">
 
    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;

    function initialize() {
      if (GBrowserIsCompatible()) {      
        map = new GMap2(document.getElementById("map_canvas"));
        gdir = new GDirections(map, document.getElementById("directions"));
        GEvent.addListener(gdir, "load", onGDirectionsLoad);
        GEvent.addListener(gdir, "error", handleErrors);

        setDirections("VILLE1", "VILLEDESTINATION");
      }
    }
    
    function setDirections(fromAddress, toAddress, locale) {
      gdir.load("from: " + fromAddress + " to: " + toAddress,
                { "locale": locale });
    }

    function handleErrors(){
     if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
       alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
       alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
     
     else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
       alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

  //   else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong
  //     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);
       
     else if (gdir.getStatus().code == G_GEO_BAD_KEY)
       alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

     else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
       alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
      
     else alert("An unknown error occurred.");
     
  }

  function onGDirectionsLoad(){
      // Use this function to access information about the latest load()
      // results.

      // e.g.
      // document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
    // and yada yada yada...
  }
    </script>

  </head>
  <body onload="initialize()" onunload="GUnload()">
 
  <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">

  <table class="formathis" >

   <tr><th align="right">De:&nbsp;</th>

   <td><input type="text" size="25" id="fromAddress" name="from"
     value="VILLE1"/></td>

   <th align="right">&nbsp;&nbsp;A:&nbsp;</th>
   <td align="right"><input type="text" size="25" id="toAddress" name="to"
     value="VILLEDESTINATION" /></td></tr>

   <tr><th>Langue:&nbsp;</th>
   <td colspan="3"><select id="locale" name="locale">

    <option value="en" >English</option>
 
    <option value="fr" selected >French</option>

    <option value="de">German</option>
    <option value="ja">Japanese</option>
    <option value="es">Spanish</option>
    </select>

    <input name="submit" type="submit" value="Obtenez les indications!" />

   </td></tr>

   </table>

    
  </form>

    <br/>
    <table class="directions">
    <tr><th>Formatted Directions</th><th>Map</th></tr>

    <tr>

    <td valign="top"><div id="directions" style="width: 450px"></div></td>
    <td valign="top"><div id="map_canvas" style="width: 690px; height: 500px"></div></td>

    </tr>
    </table>

  </body>
</html>