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>Carte Bing avec différents type d'infobulle pleine fenêtre</title>
<meta charset="utf-8" />
<style>
#carte {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var macarte, infoCentre;
function InitCarte() {
macarte = new Microsoft.Maps.Map('#carte', {
center: new Microsoft.Maps.Location(43.122095354316315, 5.935000602549123),
zoom: 10 });
//créer une infobulle au centre de la carte, sans créer de marque (pushpin).
infoCentre = new Microsoft.Maps.Infobox(macarte.getCenter(), {
title: 'Bienvenue au centre de la Carte !',
description: '68, Le Cours Lafayette',
visible: true });
//place l'infobulle sur la carte.
infoCentre.setMap(macarte);
//Créer 2 marques (pushpin) avec leurs propriétés,leurs infobulles respectives et les place sur la carte
var rougePin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(43.120754105562746, 6.126714543309806),/* { color: '#f00' }*/);
macarte.entities.push(rougePin);
rougePin.metadata = {
title: 'Hyères',
description: 'Centre Ville' };
var bleuPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(43.24179933895366, 5.374788320969377),{ color: '#00f', draggable: true });
macarte.entities.push(bleuPin);
bleuPin.metadata = {
title: 'Marseille',
description: 'La Pointe Rouge' };
//ajoute un évenement Clic sur le pushpin faisant apparaitre l'infobulle avec une fonction .
Microsoft.Maps.Events.addHandler(rougePin, 'click', pinClic);
Microsoft.Maps.Events.addHandler(bleuPin, 'click', pinClic);
} //fin d'InitCarte, on peut regrouper ou non les données d'un même pin

function pinClic(e) { //faire apparaitre les infobulles.
if (e.target.metadata) { //reinitialise les données de l'infobulle demandée.
infoCentre.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
} // fin de pinClic
</script>

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