Explications Carte avec OverView de navigation

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 avec une carte overview de navigation</title>
<meta charset="utf-8" />
<style>
#carte {
position:relative;
height: 100%;
z-index:1;
}
html, body {
margin: 0;
padding: 0;
}
.Container{
position:relative;
}
/* définition de l'overview de navigation*/
#overviewmap {
position:absolute;
top:10px;
left:10px;
width:200px;
height:200px;
overflow:hidden;
z-index:2;
box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
</style>
<script type="text/javascript">
function InitCarte() {
var macarte = new Microsoft.Maps.Map('#carte', {//si rien ici entre parenthèses, la carte centre sur votre emplacement
center: new Microsoft.Maps.Location(43.122115, 5.934907),
zoom: 14
});
var overviewMap = new Microsoft.Maps.Map('#overviewmap', {
showMapTypeSelector: false,
showScalebar: false,
showLocateMeButton: false,
showZoomButtons: false,
disablePanning: true,
disableScrollWheelZoom: true,
disableZooming: true,
mapTypeId: Microsoft.Maps.MapTypeId.grayscale,
center: macarte.getCenter(),
zoom: macarte.getZoom() - 5
});

Microsoft.Maps.Events.addHandler(macarte, 'viewchange', function () {
overviewMap.setView({
center: macarte.getCenter(),
zoom: (macarte.getZoom() - 5) < 1 ? 1 : (macarte.getZoom() - 5)
});
plotRectangle();
});
var plotRectangle = function () {
overviewMap.entities.clear();
var rectangle = getRectangle();
overviewMap.entities.push(rectangle);
};
var getRectangle = function () {
var locations = [];
var bounds = macarte.getBounds();
locations.push(new Microsoft.Maps.Location(bounds.getSouth(), bounds.getWest())); //sw
locations.push(new Microsoft.Maps.Location(bounds.getNorth(), bounds.getWest())); //nw
locations.push(new Microsoft.Maps.Location(bounds.getNorth(), bounds.getEast())); //ne
locations.push(new Microsoft.Maps.Location(bounds.getSouth(), bounds.getEast())); //se
locations.push(new Microsoft.Maps.Location(bounds.getSouth(), bounds.getWest())); //sw
console.log(locations);
return new Microsoft.Maps.Polygon(locations, {
fillColor: 'rgba(0, 0, 0, 0.2)', //0.2 définit la transparence
strokeThickness: 0
});
}
plotRectangle();
};
</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="Container">
<div>

<div id="overviewmap" ></div>
<div id="carte"></div>
</div>
</div>