...mon site tout sur API Google Maps et substituts retour à une carte simple par défaut ...me contacter

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 bouton plein écran</title>
<meta charset="utf-8" />
<style>
#carte {
position:relative;
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.standardMap {
position:relative;
width:800px;
height:600px;
}
.fullScreenMap {
position:relative;
width:100%;
height:100%;
}
</style>
<script type="text/javascript">
var macarte;
function InitCarte()
{
macarte = new Microsoft.Maps.Map('#carte', {
center: new Microsoft.Maps.Location(37.882774,-4.774648),
zoom: 12
});
if (fullScreenEnabled) {
//évenement pour entrer ou sortir du plein écran.
addFullScreenEvent(function (e) {
var Container = document.getElementById('Container');
if (isFullScreen()) {
//changement d'unetaille réduite au plein écran.
Container.classList.remove('standardMap');
Container.classList.add('fullScreenMap');
} else {
//retour à la taille originale.
Container.classList.remove('fullScreenMap');
Container.classList.add('standardMap');
}
});
} else { document.getElementById('fullScreenToggle').disabled = true;}
}

function toggleFullScreen() {
var Container = document.getElementById('Container');
if (isFullScreen()) {
//sortir du plein écran.
var closeFullScreenFn = document.cancelFullScreen
|| document.webkitCancelFullScreen
|| document.mozCancelFullScreen
|| document.msExitFullscreen;
closeFullScreenFn.call(document);
} else {
//faire le plein écran.
var openFullScreenFn = Container.requestFullScreen
|| Container.webkitRequestFullScreen
|| Container.mozRequestFullScreen
|| Container.msRequestFullscreen;
openFullScreenFn.call(Container);
}
}

function addFullScreenEvent(callback) {
var changeEventName;
if (document.cancelFullScreen) {
changeEventName = 'fullscreenchange'
} else if (document.webkitCancelFullScreen) {
changeEventName = 'webkitfullscreenchange'
} else if (document.mozCancelFullScreen) {
changeEventName = 'mozfullscreenchange'
} else if (document.msExitFullscreen) {
changeEventName = 'MSFullscreenChange'
}
if (changeEventName) {
document.addEventListener(changeEventName, callback);
}
}

function isFullScreen() {
return !(!document.fullscreenElement &&
!document.msFullscreenElement &&
!document.mozFullScreenElement &&
!document.webkitFullscreenElement);
}

//détermine si le plein écran est possible.
function fullScreenEnabled() {
return document.fullscreenEnabled ||
document.msFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled;
}
</script>

<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=InitCarte&key=Ma_Key" async defer></script>
</head>
<body>
<div id="Container" class="standardMap">
<div id="carte"></div>
<input id="fullScreenToggle" type="button" value="plein écran" onclick="toggleFullScreen()" style="position:absolute;bottom:5px;left:5px;"/>
</div>
<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>