Explications Carte avec Layer Trafic

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>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>carte avec Traffic Layer</title>
<style>
html, body, #carte {
height: 100%;
margin: 0px;
padding: 0px
}
.Container{
position:relative;
height:100%;
}
.maBarre {
position:absolute;
top: 05px;
left: 50%;
background-color: #fafafa;
padding: 2px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
}
</style>
</head>
<body>
<div class="Container">
<div id="carte"></div>
<div class="maBarre">
<input onclick="pastrafic();" type="button" value="Sans trafic">
<input onclick="InitCarte();" type="button" value="Avec trafic">
</div>
</div>
<script>
var trafic;
var velo;
function InitCarte() {
var map = new google.maps.Map(document.getElementById('carte'), {
zoom: 13,
center: {lat: 43.14519475222331, lng: 5.959945708911391}
});
trafic = new google.maps.TrafficLayer();
velo = new google.maps.BicyclingLayer(); //TransitLayer//BicyclingLayer
trafic.setMap(map);
velo.setMap(map);
}
function pastrafic() {
trafic.setMap(null);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-kiUMuFkRX4QxooRfbYSjiQCjvtPOTDQ&callback=InitCarte"
async defer></script>