Le but est d'insérer un formulaire dans une info-bulle, afin de calculer un itinéraire routier.
Dans cet exemple, l'itinéraire routier ainsi que sa carte sont insérés directement dans le site.
Le client saisit son adresse de départ, puis valide en cliquant sur le bouton "Afficher l'itinéraire".
L'itinéraire demandé s'affiche sous la carte, dans un tableau à deux colones.
La colonne de droite, intitulée "Itinéraire" contient le descriptif de l'itinéraire.
La colonne de gauche, intitulée "Carte" contient une carte retraçant l'itinéraire.
L'adresse d'arrivée est fixe.
Elle est paramétrée sous la forme de coordonnées GPS ( Latitude - Longitude ).
Elle peut être également paramétrée sous la forme d'une adresse postale.
[1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> [2] <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr"> [3] <head> [4] <title>Google Maps - Itinraire dans une info-bulle et rsultat intgr</title> [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> [6] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script> [7] <style type="text/css"> [8] v\:* { [9] behavior:url(#default#VML); [10] } [11] table#resultat {margin:0; padding:0; border-collapse: collapse; width:740px;} [12] table#resultat th {height:15px; background-color:#EEEEEE; border: 1px solid #999999; text-align:center; color: #444444;} [13] table#resultat td.encadrement {width:370px; height:410px; border: 1px solid #999999; vertical-align: top;} [14] #EmplacementCarteItineraire{height:410px; width:370px;} [15] #EmplacementTexteItineraire{margin:0; padding:0; width:auto; height:100%; overflow:auto; text-align:left;} [16] #EmplacementTexteItineraire b{color: #03f; text-decoration: underline;} [17] #cadre {margin: 0; padding:10px 0 5px 0; width: 740px; height: auto; border: 1px solid #B8D6C2;text-align:center; background-color: #F6FCEC;} [18] </style> [19] [20] <script type='text/javascript'> [21] //<![CDATA[ [22] var CarteItineraire; [23] var gdir; [24] var geocoder = null; [25] var addressMarker; [26] [27] Définition des variables caractérisant la société ... [28] var NomSociete = 'Société FadaMaps37 & Co'; [29] var Adresse = 'rue Bretonneau'; [30] var CodePostal = '37000'; [31] var Ville = 'TOURS'; [32] var LatitudeDestination = '47.394921'; [33] var LongitudeDestination = '0.680401'; [34] [35] Fonction load() [36] function load() { [37] [38] Si le navigateur est compatible avec l'API de Google Maps ... [39] if (GBrowserIsCompatible()) { [40] [41] ... Création d'une nouvelle carte ayant pour nom "MaCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant (id) "EmplacementDeMacarte" ... [42] MaCarte = new GMap2(document.getElementById("EmplacementDeMacarte")); [43] [44] ... La carte "MaCarte" est centrée sur la Latitude 47.394921, la Longitude 0.680401, avec un niveau de zoom égal à 13 ... [45] MaCarte.setCenter(new GLatLng(47.394921,0.680401), 13); [46] [47] ... Création d'un nouveau point ayant pour Latitude : 47.394921 et Longitude : 0.680401 ... [48] var point = new GLatLng(47.394921,0.680401); [49] [50] ... Création d'un nouveau marker par appel de la fonction CreationDuMarqueur ... [51] var marker = CreationDuMarqueur(point); [52] [53] ... Ajout du marqueur "marker" sur la carte nommée "MaCarte" ... [54] MaCarte.addOverlay(marker); [55] [56] [57] Si le navigateur n'est pas compatible avec l'API de Google Maps ... [58] }else{ [59] [60] ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". [61] alert("Désolé, mais votre navigateur n'est pas compatible avec Google Maps"); [62] } [63] } [64] [65] Fonction permettant la création d'un marqueur [66] function CreationDuMarqueur(point) { [67] [68] Création d'un nouveau marqueur nommé "marker" [69] var marker = new GMarker(point); [70] [71] ... Un observateur d'événement est ajouté au marqueur appelé "marker". L'évenement détecté est "click" (Détecte si un click est effectué sur le marqueur appelé "marker"). Si un click a été effectué sur le marqueur appelé "marker", la fonction située entre les {} sera alors executée ... [72] GEvent.addListener(marker, 'click', function() { [73] [74] Création du formulaire au format HTML contenu dans l'info-bulle [75] var formulaire_itineraire ='<div style="width:350px; height:200px; border: 1px solid #ccc; background:#efffef; font: 1em \'trebuchet ms\',verdana, helvetica, sans-serif;">' + [76] '<form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">' + [77] ' <table align="center">' + [78] ' <tr>' + [79] ' <td colspan="2" align="center"><b>Indiquez votre adresse de départ ci-dessous</b></td>' + [80] ' </tr>' + [81] ' <tr>' + [82] ' <td colspan="2" align="center"><input type="text" size="25" id="fromAddress" name="from" value=" " style="width:300px; height:20px; border:1px solid grey;" /></td>' + [83] ' </tr>' + [84] ' <tr>' + [85] ' <td colspan="2" align="center"><b>Adresse d\'arrivée</b></td>' + [86] ' </tr>' + [87] ' <tr>' + [88] ' <td colspan="2" align="center">'+NomSociete+'<br />'+Adresse+'<br />'+CodePostal+' '+Ville+'</td>' + [89] ' </tr>' + [90] ' <tr>' + [91] ' <td align="right" colspan="2" align="center"><input type="hidden" id="toAddress" name="to" value="'+LatitudeDestination+', '+LongitudeDestination+'" /></td>' + [92] ' </tr>' + [93] ' <tr>' + [94] ' <td>Réponse en : </td>' + [95] ' <td>' + [96] ' <select id="locale" name="locale">' + [97] ' <option value="fr" selected>Franais</option>' + [98] ' <option value="en">Anglais</option>' + [99] ' <option value="de">Allemand</option>' + [100] ' <option value="ja">Japonais</option>' + [101] ' <option value="es">Espagnol</option>' + [102] ' </select>' + [103] ' <input name="submit" type="submit" value="Afficher l\'itinéraire" />' + [104] ' </td>' + [105] ' </tr>' + [106] ' </table>' + [107] '</form>' + [108] '</div>'; [109] marker.openInfoWindowHtml(formulaire_itineraire); [110] }); [111] return marker; [112] [113] } [114] [115] Fonction permettant le calcul de l'itinéraire (Carte + description de l'itinraire) [116] function setDirections(fromAddress, toAddress, locale) { [117] [118] Déclenche l'affichage du détail de l'itinéraire (texte) [119] var resultat = document.getElementById("ReponseItineraire").style; [120] resultat.display = ''; [121] [122] Si gdir existe déjà, gdir est effacé [123] if(gdir){gdir.clear();} [124] [125] ... Création d'une nouvelle carte ayant pour nom "CarteItineraire" et qui se situera en lieu et place de la <div> ayant pour identifiant (id) "EmplacementCarteItineraire" ... [126] CarteItineraire = new GMap2(document.getElementById("EmplacementCarteItineraire")); [127] [128] ... Création d'une nouvelle direction ayant pour nom "gdir", dont le texte de l'itinraire se situera en lieu et place de la <div> ayant pour identifiant (id) "EmplacementTexteItineraire" et la carte de l'itinraire se situera en lieu et place de la <div> ayant pour identifiant (id) "EmplacementCarteItineraire"... [129] gdir = new GDirections(CarteItineraire, document.getElementById("EmplacementTexteItineraire")); [130] [131] ... Un observateur d'événement est ajouté la direction ayant pour nom "gdir". L'évenement détecté est "error" (Détecte si une erreur est intervenue lors du calcul de l'itinéraire). Si une erreur a été détectée lors du calcul de l'itinéraire "gdir", "EnCasdErreur" sera alors executée ... [132] GEvent.addListener(gdir, "error", EnCasdErreur); [133] [134] Chargement de l'itinraire "gdir" - fromAddress : Adresse de Dpart - toAddress : Adresse d'arrive - locale : Langue dans laquelle la rponse doit apparatre [135] gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale }); [136] } [137] [138] Fonction détectant les erreurs lors du calcul de l'itinéraire [139] function EnCasdErreur(){ [140] [141] Si l'adresse transmise à la direction "gdir" est inconnue ... [142] if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS){ [143] [144] Affichage du message d'alerte " Aucun endroit géographique ne correspond. Code d erreur : " suivi du code erreur [145] alert('Aucun endroit géographique ne correspond. Code d erreur : ' + gdir.getStatus().code); [146] [147] ... Sinon ... [148] }else{ [149] [150] Affichage du message d'alerte " Une erreur inconnue s\'est produite." [151] alert('Une erreur inconnue s\'est produite.'); [152] } [153] } [154] //]]> [155] </script> [156] </head> [157] [158] Au chargement de la page, la fonction load() est executée. A la fermeture de la page, la fonction GUnload() est exécutée [159] <body onload="load()" onunload="GUnload()"><center> [160] [161] <div id="centre"> [162] [163] La <div> ayant pour id "EmplacementDeCarteGlobale" fait 740 pixels de largeur et 400 pixels de haut. C'est à cet endroit que va venir s'afficher la carte "MaCarte". [164] <div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div> [165] [166] <br /> [167] <br /> [168] <div id="cadre"> [169] Cliquez sur le marqueur, saisissez votre adresse dans l'info-bulle et validez.<br /> [170] L'itinéraire va s'afficher ci-dessous.<br /> [171] ( PS : La socit FadaMaps37 & Co n'existe pas ! )<br /> [172] Cet exemple est extrait du site <a href="http://www.touraineverte.com/Google-Maps/itineraire-dans-une-info-bulle/exemple3/calcul-itineraire-info-bulle-resultat-inclus-dans-site.php">Tutoriels et exemples sur Google Maps</a><br /> [173] </div> [174] <br /> [175] [176] La <div> ayant pour id "ReponseItineraire" est par défaut masquée (style="display:none"). C'est dans cette <div> que va venir s'afficher l'itinéraire (texte + carte). [177] <div id="ReponseItineraire" style="display:none"> [178] [179] Le résultat est affiché sous la forme d'un tableau à deux colonnes. [180] <table id="resultat"> [181] <tr> [182] [183] Titre de la colonne de gauche : Carte. [184] <th>Carte</th> [185] [186] Titre de la colonne de droite : Itinéraire. [187] <th>Itinéraire</th> [188] </tr> [189] <tr> [190] Colonne de gauche : La <div> ayant pour id "EmplacementCarteItineraire" va contenir l'itinéraire sous la forme d'une carte. [191] <td class="encadrement"><div id="EmplacementCarteItineraire"></div></td> [192] [193] Colonne de droite : La <div> ayant pour id "EmplacementTexteItineraire" va contenir l'itinéraire sous sa forme textuelle. [194] <td class="encadrement"><div id="EmplacementTexteItineraire"></div></td> [195] </tr> [196] </table> [197] </div> [198] </div> [199] </body> [200] </html>
Néant