CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 11:41:50

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

TROUVER UN ITINÉRAIRE AVEC GOOGLE MAP

Information sur la source

Note :

10,00 / 10

Catégorie :Divers Classé sous :google, map, itinéraire, javascript, route Niveau :Débutant Date de création :08/07/2010 Date de mise à jour :12/07/2010 16:20:52 Vu / téléchargé :7 882 / 535

Auteur : amrounix

Ecrire un message privé

Site perso

Commentaire sur cette source (3)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<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>

<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&eacute;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&eacute;lo</option>
</select></td></tr>
<tr><td><b>arriv&eacute;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&egrave;re mise &agrave; 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&eacute;es !</div>
</center>
</body> 
</html>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

itineraire - arrivee fixe.htm 3 690 octets
itineraire.htm 3 913 octets

Télécharger le zip

Historique

12 juillet 2010 16:20:52 :: -j'ai fait une inversion départ/arrivée -ajout d'un exemple avec une adresse d'arrivée fixe

Sources du même auteur

DEBLOCK ME - CASSE TÊTE

CRYPTOR - PROTEGEZ VOS CODES SOURCES !

CODE UTF-8

QUIZZ MASTER : 2000 QUESTIONS POUR TESTER VOTRE CULTURE

BILLARD EN JAVASCRIPT C'EST POSSIBLE !

Toutes les sources de amrounix

Sources de la même categorie

SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth

INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges

TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

FORMULAIRE TABLEAU par vic511

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

CALCULATRICE HEURE par m22001111

GOOGLE MAP API V3 CARTE, MARQUEUR, INFOWINDOWS par varfendell

GESTIONNAIRE DE CONTACTS LOCALISÉS SUR UNE CARTE GOOGLE MAP par nacedo57400

Commentaires et avis

Commentaire de proftnj le 12/07/2010 03:47:42 10/10

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!

Commentaire de amrounix le 12/07/2010 11:35:28

Merci pour la note !

Commentaire de moaleboss le 14/07/2010 10:51:36

Salut,
Simple implémentation des librairies Gmaps, rien de plus... Mais ça fonctionne bien ;-)

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

itinéraire+ street view google map dotnet c# [ par omezzineibtissem ] bonjour, je travaille avec dotnet c# et j'ai voulu faire un itinéraire avec street view, j arrive à faire l itinéraire(affichage des routes sur une ma google map [ par azahiri ] Bonjour, Je suis entrain de créer des pages web "html/css" sur Dreamweaver et j'aimerai intégrer une carte google map, seulement je n'ai pas encore dé Api Google Maps ok en local mais pas en online [ par prachou ] Bonjour à tous ! Après avoir parcouru en vain la toile je me décide a créer un post pour mon problème auquel je n'ai toujours trouvé aucune solution. marker google map [ par am1ra2 ] bonjour, comment assurer que le markeur google map reste même je ferme la page merci pour votre aide Recupération d'une adresse d'établissement pour google maps [ par math567 ] Bonjour, Je souhaiterai récupéré dans une variable javascript le contenu de la valeur d'un champ pour l'utiliser afin de situer le lieu d'un établisse Info bulle Google Map [ par Tipatt ] Bonjour !Je réalise actuellement un projet informatique utilisant l'API Google Map. Dans mon code source, j'ai fait en sorte que la carte Google Map s API GOOGLE MAP [ par tropik34 ] bONJOUR ya kek chose qui cloche dans ce script. La map ne s'affiche pas. Une idée Merci [code=html] <html xmlns="http://ww problème de validation W3C avec le code Google Map [ par valentines ] Bonsoir, ça fait un bail que je cherche comment valider le code de Google Map en W3C. Il me met un erreur sur la boucle javascript [code]for (var i = [CS]google earth api/ javascript [ par math11 ] Bonjour, Ayant déjà posté des questions a propos de google earth api (javascript), j'ai été étonné de ne pas trouver de thème pour mes questions, mêm Probleme actualisation .js [ par woutwout ] Bonjour, j'essaye de coder une page html qui fait apparaitre une carte de google map, et j'aimerai grâce à un script .js pouvoir changer la position d

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP