Explications recentrage de la carte par un contrôle

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 pleine fenêtre avec recentrage par un contrôle</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#carte {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="carte"></div>
<script>
var macarte;
var Cordoba = {lat: 37.882774, lng: -4.774648};
/*construction d'une div la variable recentrage utilisée est globale*/
function CenterControl(controlDiv, carte) {
// CSS pour le contrôle
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.height = '25px';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '15px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click pour recentrer la carte';
controlDiv.appendChild(controlUI);
// CSS pour l'intérieur du contrôle.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '25px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Centrer';
controlUI.appendChild(controlText);
// paramétrage du recentrage au click du bouton.
controlUI.addEventListener('click', function() {
macarte.setCenter(Cordoba);
});
}
function InitCarte(){
macarte = new google.maps.Map(document.getElementById('carte'),
{ center: Cordoba,
zoom: 12
//"disableDefaultUI: true" désactive tous les contrôles
});
// Creation du bouton pour appeler la fonction CenterControl()
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, carte);
centerControlDiv.index = 1;
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>