Le but est d'insérer un formulaire dans une info-bulle, afin de calculer, via Google-Maps, un itinéraire routier.
Le client saisit son adresse de départ, puis valide en cliquant sur le bouton "Calculer l'tinéraire avec Google Maps". Une nouvelle fenêtre, générée par Google Maps, s'ouvre à l'intérieur de laquelle s'affiche l'itinéraire demandé.
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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [2] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> [3] <head> [4] <title>Google Maps - Itinéraire dans une info-bulle</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] <script type='text/javascript'> [8] //<![CDATA[ [9] var NomSociete = 'Société FadaMaps37 & Co'; [10] var Adresse = 'rue Bretonneau'; [11] var CodePostal = '37000'; [12] var Ville = 'TOURS'; [13] var LatitudeDestination = '47.394921'; [14] var LongitudeDestination = '0.680401'; [15] function load() { [16] if (GBrowserIsCompatible()) { [17] // Fonction permettant la création du marker // [18] function createMarker(point) { [19] var marker = new GMarker(point); [20] GEvent.addListener(marker, 'click', function() { [21] // formulaire_itineraire [22] var formulaire_itineraire ='<div style="width:350px; height:200px; border: 1px solid #ccc; text-align:center; background:#efffef; font: 14px \'trebuchet ms\',verdana, helvetica, sans-serif;">' + [23] '<br /><b>Indiquez votre adresse de départ ci-dessous : </b>' + [24] '<form action="http://maps.google.com/maps" method="get" target="_blank" style="margin:0;padding;0">' + [25] '<input type="text" name="saddr" id="saddr" value="" style="width:300px; height:20px; border:1px solid grey;" /><br /><br />' + [26] '<b>Adresse d\'arrivée : </b><br />'+NomSociete+'<br />'+Adresse+'<br />'+CodePostal+' '+Ville+'<br /><br />' + [27] '<input value="Calculez votre itinéraire avec Google Maps" type="submit">' + [28] '<input type="hidden" name="daddr" value="'+LatitudeDestination+','+LongitudeDestination+'"/>'+ [29] '</form>' + [30] '</div>'; [31] marker.openInfoWindowHtml(formulaire_itineraire); [32] }); [33] return marker; [34] } [35] var MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte')); [36] MaCarte.addControl(new GSmallMapControl()); [37] MaCarte.addControl(new GMapTypeControl()); [38] MaCarte.setCenter(new GLatLng(47.394921,0.680401), 13); [39] var point = new GLatLng(47.394921,0.680401); [40] MaCarte.addOverlay(createMarker(point)); [41] }else{ [42] alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps'); [43] } [44] } [45] //]]> [46] </script> [47] </head> [48] [49] <body onload="load()" onunload="GUnload()"><center> [50] <div style="width: 740px; text-align: left;"> [51] <div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div> [52] <br /> [53] <div align="center">Cliquez sur le marqueur, saisissez votre adresse dans l'info-bulle et validez pour obtenir l'itinéraire.</div> [54] <div align="center">( PS : La société FadaMaps37 & Co n'existe pas ! )</div> [55] [56] </center> [57] </body> [58] </html>
Adresse d'arrivée : mettre une adresse postale au lieu des coordonnées GPS
Remplacez la Ligne [28] par :
'<input type="hidden" name="daddr" value="'Votre adresse de destination complète ici'"/>' +
Et supprimez les lignes Ligne [13] et Ligne [14]
Insérez vos paramètres personnels :
Ligne [9] à Ligne [14]
Ligne [9] : var NomSociete = 'Votre Nom'Adaptez le style de l'info-bulle à votre goût :
Ligne [22]width:350px : Lageur de la <div> contenue dans l'info-bulle
height:200px : Hauteur de la <div> contenue dans l'info-bulle
border: 1px solid #ccc : paramètres de la bordure : épaisseur = 1px - type : solid - #cccccc : couleur du trait (gris clair)
text-align:center : Le texte est aligné au centre
background:#efffef : Couleur de fond du formulaire (vert clair)
font: 14px \'trebuchet ms\',verdana, helvetica, sans-serif; : Police de caractère : Taille et police.