Trouver un itinéraire avec google map

Soyez le premier à donner votre avis sur cette source.

Vue 26 992 fois - Téléchargée 2 448 fois

Description

Un petit programme en javascript utilisant l'API Google MAP (version 3) pour tracer un itinéraire entre 2 points. C'est qu'un début, mais on peut imaginer beaucoup d'amélioration à ce programme :)

Source / Exemple :


<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<!--importation de l'API google MAP Version 3-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var directionsService = new google.maps.DirectionsService();
  var map,geocoder, marker;
  var depart,arrivee,ptCheck;
  
  /*initialise google MAP V3*/
  function init() {
	/*gestion des routes*/
    directionsDisplay = new google.maps.DirectionsRenderer();
	/*emplacement par défaut de la carte (j'ai mis Paris)*/
    var maison = new google.maps.LatLng(48.873818, 2.29498386);
	/*option par défaut de la carte*/
    var myOptions = {
      zoom:6,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: maison
    }
	/*creation de la map*/
    map = new google.maps.Map(document.getElementById("divMap"), myOptions);
	/*connexion de la map + le panneau de l'itinéraire*/
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("divRoute"));
	/*intialise le geocoder pour localiser les adresses */
	geocoder = new google.maps.Geocoder();
	}
  
  
  function trouveRoute() {
  /*test si les variables sont bien initialisés*/
	if (depart && arrivee)
	{
	/*mode de transport*/
	var choixMode = document.getElementById("mode").value;
	
    var request = {
        origin:depart, 
        destination:arrivee,
        travelMode: google.maps.DirectionsTravelMode[choixMode]
    };
	/*appel à l'API pour tracer l'itinéraire*/
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
	}
  }
  
  function rechercher(src,code)
  {
    ptCheck = code; /*adresse de départ ou arrivée ? */
	if (geocoder) {
	  geocoder.geocode( { 'address': document.getElementById(src).value}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
		 
		  /*ajoute un marqueur à l'adresse choisie*/
		  map.setCenter(results[0].geometry.location);
		  if (marker) { marker.setMap(null);}
		  marker = new google.maps.Marker({
			  map: map, 			  
			  position: results[0].geometry.location
		  });
		  /*on remplace l'adresse par celle fournie du geocoder*/
		  document.getElementById(src).value = results[0].formatted_address;
		  if (ptCheck)
		  {
		  depart = results[0].formatted_address;
		  } else
		  {
		  arrivee = results[0].formatted_address;
		  }
		  /*trace la route*/
		  trouveRoute();
		} else {
		  alert("Geocode n'a rien trouvé !\n raison : " + status);
		}
	  });
	}
	
  }
  

</script> 
</head> 
<body onload="init();"> 
<div> 
<table>
<tr><td><b>départ: </b></td>
<td><input type="text" id="adrDep" value="" style="width:300px;"></td>
<td><input type="button" value="recherche" onclick="rechercher('adrDep',true)"></td>
<td rowspan="2">
<b>Transport: </b> 
<select id="mode" onchange="calcRoute();"> 
  <option value="DRIVING">voiture</option>
  <option value="WALKING">marche</option>
  <option value="BICYCLING">vélo</option>
</select></td></tr>
<tr><td><b>arrivée: </b></td><td><input type="text" id="adrArr" value="" style="width:300px;"></td><td><input type="button" value="recherche" onclick="rechercher('adrArr',false)"></td></tr>
</table>
</div> 
<div id="divMap" style="float:left;width:70%; height:80%"></div> 
<div id="divRoute" style="float:right;width:30%;height 80%"></div> 
<br/>
<center>
<div style="font-family:Tahoma;font-size:9px">dernière mise à jour sur mon site : <a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br>powered by <b>AmRouNiX</b> / <b>MaSTeR-KiLLeR</b> (<i>A. Selim</i>) <br> Toutes copies autorisées !</div>
</center>
</body> 
</html>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
krimo1971 Messages postés 1 Date d'inscription jeudi 14 juin 2012 Statut Membre Dernière intervention 14 juin 2012
14 juin 2012 à 13:38
Bonjour,

Comment faire pour remplacer les deux boutons "recherche" par un seul bouton par exemple, "calculer l’itinéraire".

Merci !
cs_horspiste Messages postés 2 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 24 juillet 2012
7 juin 2012 à 11:05
toujours d'actualité en 2012. Super, merci !
moaleboss Messages postés 19 Date d'inscription lundi 20 janvier 2003 Statut Membre Dernière intervention 24 juillet 2007
14 juil. 2010 à 10:51
Salut,
Simple implémentation des librairies Gmaps, rien de plus... Mais ça fonctionne bien ;-)
amrounix Messages postés 78 Date d'inscription lundi 10 mars 2003 Statut Membre Dernière intervention 12 juillet 2010
12 juil. 2010 à 11:35
Merci pour la note !
proftnj Messages postés 54 Date d'inscription lundi 10 juillet 2006 Statut Membre Dernière intervention 11 septembre 2011
12 juil. 2010 à 03:47
Sympa!
J'ai remplacé <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> par <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> pour éviter un problème d'affichage de caractères spéciaux (IE et FF). La syntaxe html est "hybride", mais le script (que je n'ai pas analysé) fonctionne bien.
Bonne continuation!

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.