Itineraire
Insérer un formulaire pour calculer un itinéraire routier dans une info-bulle.
Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
Le but, ici, est d'insérer un formulaire dans une info-bulle, afin de calculer, via Google-Maps, un itinéraire routier.
Le client, après avoir cliqué sur la marqueur, accède à un formulaire pour calculer son itinéraire. Il saisit son adresse de départ, puis valide en cliquant sur le bouton "Calculer l'itiné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.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<title>TouraineVerte.com - Insérer un formulaire dans une info-bulle pour calculer un itinéraire routier</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- Chargement du script Google Maps API, version 2.x, en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Les variables */
var maCarte;
var marker;
var NomSociete = 'Société FadaMaps37 & Co';
var Adresse = 'rue Bretonneau';
var CodePostal = '37000';
var Ville = 'TOURS';
var LatitudeDestination = '47.394921';
var LongitudeDestination = '0.680401';
/* Fonction permettant la création du marker */
function createMarker(point) {
marker = new google.maps.Marker(point);
google.maps.Event.addListener(marker, 'click', function() {
/* formulaire_itineraire */
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;">' +
'<br /><b>Indiquez votre adresse de départ ci-dessous : </b>' +
'<form action="http://maps.google.com/maps" method="get" target="_blank" style="margin:0;padding;0">' +
'<input type="text" name="saddr" id="saddr" value="" style="width:300px; height:20px; border:1px solid grey;" /><br /><br />' +
'<b>Adresse d\'arrivée : </b><br />'+NomSociete+'<br />'+Adresse+'<br />'+CodePostal+' '+Ville+'<br /><br />' +
'<input value="Calculez votre itinéraire avec Google Maps" type="submit">' +
'<input type="hidden" name="daddr" value="'+LatitudeDestination+','+LongitudeDestination+'"/>'+
'</form>' +
'</div>';
marker.openInfoWindowHtml(formulaire_itineraire);
});
return marker;
}
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... 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" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.394921, la Longitude 0.680401, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new google.maps.LatLng(47.394921,0.680401), 13);
/* ... Ajout des boutons Déplacement et Zoom en haut à gauche de la carte nommée maCarte ... */
maCarte.addControl(new google.maps.SmallMapControl());
/* ... Ajout du bouton Type de carte sous forme de menu déroulant en haut à droite de la carte nommée maCarte ... */
maCarte.addControl(new google.maps.MenuMapTypeControl());
/* ... Création d'un point à la latitude : 47.394921 et longitude : 0.680401 ... */
var point = new google.maps.LatLng(47.394921,0.680401);
/* ... On ajoute, par l'intermédiaire de la fonction "createMarker", un marqueur ancré sur le point ... */
maCarte.addOverlay(createMarker(point));
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<title>TouraineVerte.com - Insérer un formulaire dans une info-bulle pour calculer un itinéraire routier</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
/* Les variables */
var marker;
var maCarte;
var NomSociete = 'Société FadaMaps37 & Co';
var Adresse = 'rue Bretonneau';
var CodePostal = '37000';
var Ville = 'TOURS';
var LatitudeDestination = '47.394921';
var LongitudeDestination = '0.680401';
/* Fonction permettant la création du marker */
function createMarker(point) {
marker = new GMarker(point);
GEvent.addListener(marker, 'click', function() {
/* formulaire_itineraire */
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;">' +
'<br /><b>Indiquez votre adresse de départ ci-dessous : </b>' +
'<form action="http://maps.google.com/maps" method="get" target="_blank" style="margin:0;padding;0">' +
'<input type="text" name="saddr" id="saddr" value="" style="width:300px; height:20px; border:1px solid grey;" /><br /><br />' +
'<b>Adresse d\'arrivée : </b><br />'+NomSociete+'<br />'+Adresse+'<br />'+CodePostal+' '+Ville+'<br /><br />' +
'<input value="Calculez votre itinéraire avec Google Maps" type="submit">' +
'<input type="hidden" name="daddr" value="'+LatitudeDestination+','+LongitudeDestination+'"/>'+
'</form>' +
'</div>';
marker.openInfoWindowHtml(formulaire_itineraire);
});
return marker;
}
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... 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" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.394921, la Longitude 0.680401, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new GLatLng(47.394921,0.680401), 13);
/* ... Ajout des boutons Déplacement et Zoom en haut à gauche de la carte nommée maCarte ... */
maCarte.addControl(new GSmallMapControl());
/* ... Ajout du bouton Type de carte sous forme de menu déroulant en haut à droite de la carte nommée maCarte ... */
maCarte.addControl(new GMenuMapTypeControl());
/* ... Création d'un point à la latitude : 47.394921 et longitude : 0.680401 ... */
var point = new GLatLng(47.394921,0.680401);
/* ... On ajoute, par l'intermédiaire de la fonction "createMarker", un marqueur ancré sur le point ... */
maCarte.addOverlay(createMarker(point));
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
</script>
</head>
<!-- Une fois la page chargée la fonction initialize() est exécutée. -->
<!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
<body onload="initialize()" onunload="GUnload()">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
Insérez vos paramètres personnels :
: var NomSociete = 'Votre Nom'
: var Adresse = 'Votre Adresse'
: var CodePostal = 'Votre Code Postal'
: var Ville = 'Votre Ville'
: var LatitudeDestination = 'Latitude du lieu de destination'
: var LongitudeDestination = 'Longitude du lieu de destination'Adaptez le style de l'info-bulle à votre goût :
Modifiez 
:
Adresse d'arrivée : mettre une adresse postale au lieu des coordonnées GPS
par :
et 