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>Contrôles types cartes perso sans conrôles par défaut - Pleine fenêtre</title>
<meta charset="utf-8" />
<style>
#carte {
position:relative;
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.Container{
position:relative;
height:100%;
}
.maBarre {
position:absolute;
top: 10px;
left: 10px;
}
</style>
<script type="text/javascript">
var macarte;
function InitCarte(){
macarte = new Microsoft.Maps.Map('#carte', {
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
//posibilités : road (défaut), aerial, canvasDark, canvasLight, birdseye (si possible), grayscale et streetside (si possible)
center: new Microsoft.Maps.Location(48.859423, 2.292668),
zoom: 14,
showDashboard: false //cacher les contrôles par défaut.
});
}
</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 id="carte"></div> <!-- style="width:800px;height:600px" -->
<div class="maBarre">
<input type="button" value="Plan" onclick="macarte.setView({mapTypeId:Microsoft.Maps.MapTypeId.road});"/>
<input type="button" value="Plan clair" onclick="macarte.setView({mapTypeId:Microsoft.Maps.MapTypeId.canvasLight});" />
<input type="button" value="Plan sombre" onclick="macarte.setView({mapTypeId:Microsoft.Maps.MapTypeId.canvasDark});" />
<input type="button" value="Plan grisé" onclick="macarte.setView({mapTypeId:Microsoft.Maps.MapTypeId.grayscale});" />
<input type="button" value="Satellite" onclick="macarte.setView({mapTypeId:Microsoft.Maps.MapTypeId.aerial});" />
<input type="button" value="Vue sol" onclick="macarte.setView({mapTypeId:Microsoft.Maps.MapTypeId.streetside});" /><!-- si possible -->
<input type="button" value="Aérien" onclick="macarte.setView({mapTypeId:Microsoft.Maps.MapTypeId.birdseye});" /><!-- si possible -->
</div>
</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>