Trouver un itinéraire avec google map

Soyez le premier à donner votre avis sur cette source.

Vue 22 820 fois - Téléchargée 2 118 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

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

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

Salut,
Simple implémentation des librairies Gmaps, rien de plus... Mais ça fonctionne bien ;-)
amrounix
Messages postés
79
Date d'inscription
lundi 10 mars 2003
Statut
Membre
Dernière intervention
12 juillet 2010

Merci pour la note !
proftnj
Messages postés
54
Date d'inscription
lundi 10 juillet 2006
Statut
Membre
Dernière intervention
11 septembre 2011

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.