Explications Auto rotation de la vue aérienne

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 Auto-Rotation de la vue aérienne</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#carte {
position:relative;
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.Container{
position:relative;
width:800px;
height:600px;
}
.maBarre {
position:absolute;
bottom: 5px;
left: 5px;
}
</style>
</head>
<body>
<div class="Container">
<div id="carte" style="width:800px;height:600px">
<script>
var macarte;
function InitCarte(){
macarte = new google.maps.Map(document.getElementById('carte'),
{
center: new google.maps.LatLng(37.882774,-4.774648), // ou {lat: 37.882774, lng: -4.774648}
mapTypeId: google.maps.MapTypeId.SATELLITE,
zoom: 20,
heading: 270, //oriente la vue aerienne au sud si le zoom >17
tilt: 45 //repère que c'est une vue aerienne si le zoom >17
});
}
/* ... fonctions rotation ... */
function rotate90() {
var heading = macarte.getHeading() || 0;
macarte.setHeading(heading + 90);
}
function autoRotate() {
// détermine s'il est possible de donner une photo aerienne
if (macarte.getTilt() != 0) {
window.setInterval(rotate90, 5000);
}
}
/* ... fin des fonctions rotation ... */
</script>
</div>
<div class="maBarre">
<input type="button" title="un seul clic, la rotaion démarre dans 5 secondes" value="Auto Rotation" onclick="autoRotate();"> </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=Ma_Key&callback=InitCarte"
async defer></script>
<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>