Explications itinéraire simple

Navigation

en noir : code obligatoire
en rouge : explications
en vert : code personnalisable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>Itinéraire simple tout écran</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#positioncarte, #affichage {
height: 100% /* ... pour partage horizontal : 50% ... */
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var rendererOptions = {
draggable: true //false rien n'est draggable
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var macarte;
var toulon = new google.maps.LatLng(43.122053,5.934913);
function initialize() {
var mapOptions = { // aucune importance, priorité à la route
zoom: 7,
center: toulon
};
macarte = new google.maps.Map(document.getElementById('positioncarte'), mapOptions);
directionsDisplay.setMap(macarte);
directionsDisplay.setPanel(document.getElementById('affichage'));
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});
calcRoute();
}
function calcRoute() {
var request = {
origin: new google.maps.LatLng(43.122053,5.934913), //coordonnées ou adresse
destination: 'Sanchez Penas,14, Cordoba, Espana', //coordonnées ou adresse
waypoints:[{location : new google.maps.LatLng(38.9810296, -3.3813858)}],
// waypoints:[{location: 'Madrid, Espana'}, {location: 'Marseille, France'}], //ou plusieurs ;coordonnées ou adresse
travelMode: google.maps.TravelMode.DRIVING //BICYCLING, TRANSIT, WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var maroute = result.routes[0];
for (var i = 0; i < maroute.legs.length; i++) {
total += maroute.legs[i].distance.value;
}
total = total / 1000.0;
document.getElementById('total').innerHTML = total + ' km';
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="positioncarte" style="float:left;width:70%; height:100%"></div>
<div id="affichage" style="float:right;width:30%;height 100%"> 
<p>Distance totale des étapes : <span id="total"></span></p>
</div>
<noscript>
<p>Il semble que JavaScript soit désactivé ou qu'il ne soit 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>