Explications Choisir son itinéraire sur Bing Maps

en noir : code obligatoire
en vert : explications
en rouge : code personnalisable
en grisé : construction d'une carte simple par défaut

<!DOCTYPE html>
<html>
<head>
<title>Choisir son itinéraire sur Bing Maps, pleine fenêtre</title>
<meta charset="utf-8" />
<style>
html, body{
padding:0;
margin:0;
height:100%;
}
.directionsContainer{
width:370px;
height:100%; /* container du formulaire même hauteur que la carte */
overflow-y:auto;
float:left;
}
#carte{
position:relative;
width:calc(100% - 370px);
height:100%;
float:left;
}
</style>
<script type="text/javascript">
var macarte;
var directionsManager;
function InitCarte()
{ macarte = new Microsoft.Maps.Map('#carte', { //si rien ici entre parenthèses, la carte centre sur votre emplacement
center: new Microsoft.Maps.Location(37.882774,-4.774648),
zoom: 12
});
//lancer le module d' itinéraire
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
//crée l'itinéraire choisi.
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(macarte);
//spécifie où montrer l'itineraire.
directionsManager.setRenderOptions({ itineraryContainer: '#directionsItinerary' });
//spécifie où faire le listing du trajet
directionsManager.showInputPanel('directionsPanel');
});
}
</script>

<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=InitCarte&key=Ma_Key" async defer></script>
</head>
<body>
<div class="directionsContainer">
<div id="directionsPanel"></div>
<div id="directionsItinerary"></div>
</div>
<div id="carte"></div>