Explications réinitialisation d'un nouveau centre

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 image Overlay et boutons de contrôles pleine fenêtre</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="addOverlay();" type="button" value="avec">
<input type="text" id="opacity" value="0.5" size="4">
<input type="button" value="Opacité (0 à 1)" onclick="setOpacity();">
<input onclick="removeOverlay();" type="button" value="sans">

</div>
</div>
<script>
var monImage;
var macarte;

function InitCarte() {
macarte = new google.maps.Map(document.getElementById('carte'), {
zoom: 17,
center: {lat: 43.11645, lng: 5.93832},
mapTypeId: google.maps.MapTypeId.SATELLITE
});

var imageBounds = {
north: 43.1191912,
south: 43.113920,
east: 5.941515,
west: 5.9353078
};

var overlayOpts = {
opacity:0.5
} ;

monImage = new google.maps.GroundOverlay(
'http://moreau.fr.free.fr/mescartes/images/ToulonSudFrance.jpg',
imageBounds,overlayOpts);

addOverlay();
}

function addOverlay() {
monImage.setMap(macarte);
}

function removeOverlay() {
monImage.setMap(null);
}

function setOpacity() {
var opacityStr = document.getElementById('opacity').value;
var opacity = parseFloat(opacityStr);
monImage.setOpacity(opacity);
}

</script>

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