Migrer le code javascript pour créer un itinéraire de la V2 vers la V3
Voici un exemple de migration de code, de l'API Google Maps JavaScript version 2 vers la version 3.
- Code pour calculer un itinéraire avec l'API Google Maps Javascript Version 2
- Code pour calculer un itinéraire avec l'API Google Maps Javascript Version 3
Ce code vous permet de calculer un itinéraire routier, dont le point de départ est Tours, et le point d'arrivée Loches.
La carte est centrée et zoomée automatiquement, de façon à pouvoir visualiser, en totalité, le tracé de l'itinéraire sur la carte.
Le descriptif détaillé de l'itinéraire est affiché sous la carte.
Les boutons et contrôles sont ceux qui s'affichent par défaut.
- les points de départ et d'arrivée sont fixés dans le code,
- l'itinéraire est affiché sous la forme d'une carte et d'un descriptif textuel,
- la description de l'itinéraire est en Français.
Carte Google itinéraire
Code calculer un itinéraire : API Google Maps JavaScript Version 2
<!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">
<head>
<title>Titre de votre page</title>
<style type="text/css">
<!--
html{height: 100%}
body{height: 100%; margin: 0px; padding: 0px}
#EmplacementDeMaCarte{float:left; width:59%; height: 100%}
#EmplacementItineraireTexte{float:right; width:39%; height: 100%}
-->
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=VOTRE_CLE_API_GOOGLE_ICI" type="text/javascript"></script>
<script type="text/javascript">
var maCarte;
var itineraireTexte;
var itineraire;
function initialisation() {
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
maCarte.setCenter(new GLatLng(47.390251,0.688877), 15);
itineraireTexte = document.getElementById("EmplacementItineraireTexte");
itineraire = new GDirections(maCarte, itineraireTexte);
itineraire.load("from: Tours, fr to: Loches, fr");
}
</script>
</head>
<body onload="initialisation()" onunload="GUnload()">
<div id="EmplacementDeMaCarte"></div>
<div id="EmplacementItineraireTexte"></div>
<br/>
</body>
</html>
Code calculer un itinéraire : API Google Maps JavaScript Version 3
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Calculer un itinéraire avec l'API Google Maps Javascript V3</title>
<style type="text/css">
<!--
html{height: 100%}
body{height: 100%; margin: 0px; padding: 0px}
#EmplacementDeMaCarte{float:left; width:59%; height: 100%}
#EmplacementItineraireTexte{float:right; width:39%; height: 100%}
-->
</style>
<link href="standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=fr"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var maCarte;
function initialisation() {
directionsDisplay = new google.maps.DirectionsRenderer();
var tours = new google.maps.LatLng(47.390251,0.688877);
var optionsCarte = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: tours
}
maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
directionsDisplay.setMap(maCarte);
directionsDisplay.setPanel(document.getElementById("EmplacementItineraireTexte"));
var requeteItineraire = {
origin: "Tours, fr",
destination: "Loches, fr",
region: "fr",
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(requeteItineraire, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialisation);
</script>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
<div id="EmplacementItineraireTexte"></div>
</body>
</html>