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 charset="utf-8">
<title>Carte avec réinitialisation d'un nouveau centre</title>
<style>
#carte {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#goCenterUI, #setCenterUI {
background-color: #fff;
border: 2px solid #fff;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
cursor: pointer;
float: left;
margin-bottom: 15px;
text-align: center;
}
#goCenterText, #setCenterText {
color: rgb(25,25,25);
font-family: Roboto,Arial,sans-serif;
font-size: 15px;
line-height: 25px;
padding-left: 5px;
padding-right: 5px;
}
#setCenterUI {
margin-left: 12px;
}
</style>
</head>
<body>

<div id="carte"></div>
<script>
var macarte;
var Cordoba = {lat: 37.882774, lng: -4.774648};
/* CenterControl ajoute un contrôle pour recentrer la carte sur le centre */
function CenterControl(controlDiv, carte, center) {
var control = this;
control.center_ = center;
controlDiv.style.clear = 'both';
// parametres des 2 contrôles Centre et Enregistrement du nouveau Centre bord et intérieur
var goCenterUI = document.createElement('div');
goCenterUI.id = 'goCenterUI';
goCenterUI.title = 'Click pour recentrer la carte';
controlDiv.appendChild(goCenterUI);
var goCenterText = document.createElement('div');
goCenterText.id = 'goCenterText';
goCenterText.innerHTML = 'Recentrer';
goCenterUI.appendChild(goCenterText);
var setCenterUI = document.createElement('div');
setCenterUI.id = 'setCenterUI';
setCenterUI.title = 'Click pour enregistrer un nouveau centre pour la carte';
controlDiv.appendChild(setCenterUI);
var setCenterText = document.createElement('div');
setCenterText.id = 'setCenterText';
setCenterText.innerHTML = 'Enregistrer';
setCenterUI.appendChild(setCenterText);
// recentre la carte
goCenterUI.addEventListener('click', function() {
var currentCenter = control.getCenter();
macarte.setCenter(currentCenter);
});
// enregistre le centre de la carte
setCenterUI.addEventListener('click', function() {
var newCenter = macarte.getCenter();
control.setCenter(newCenter);
});
}
/** fonctions d'enregistrement du centre */
CenterControl.prototype.center_ = null;
CenterControl.prototype.getCenter = function() {
return this.center_;
};
CenterControl.prototype.setCenter = function(center) {
this.center_ = center;
};
/** fonction de construction de la carte */
function InitCarte() {
macarte = new google.maps.Map(document.getElementById('carte'), {
zoom: 12,
center: Cordoba
});
// creation de la Div contenant les contrôles
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, carte, Cordoba);
centerControlDiv.index = 1;
centerControlDiv.style['padding-top'] = '10px';
macarte.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
}
</script>

<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>