Comment afficher ou masquer le bouton permettant de basculer une carte google maps en plein écran ?

Ce tutoriel est basé sur le code de l'exemple intitulé : Comment créer une carte avec l'API Google Maps Version 3 ?.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 }
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Nous allons compléter ce code afin d'afficher ou masquer le contrôle ou bouton permettant d'afficher notre carte Google Maps en plein écran.

Carte avec ou sans bouton permettant de l'afficher en plein écran

Cliquez sur le bouton ci-dessous afin d'afficher ou masquer le bouton permettant d'afficher la carte en plein écran.

Afficher le bouton permettant d'afficher la carte en plein écran

Le bouton permettant d'afficher la carte en plein écran est actuellement masqué.

Propriété fullscreenControl

Le bouton pour basculer la carte en plein écran permet de modifier la taille de la carte afin qu'elle occupe la totalité de l'écran ou qu'elle retrouve sa taille initiale.
Son apparence varie en fonction du terminal sur lequel il s'affiche :
.

La propriété fullscreenControl de l'objet MapOptions permet d'afficher ou de masquer le bouton permettant de basculer la carte Google Maps en plein écran.

La propriété fullscreenControl est un booléen. Elle ne peut prendre que deux valeurs : true ou false.

Afficher le bouton pour basculer la carte en plein écran - fullscreenControl: true

Pour activer le contrôle zoom, il suffit de définir la propriété fullscreenControl sur true dans les options optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		fullscreenControl: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Autres écritures équivalentes :

utilisation de la méthode setOptions de la classe Map

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		fullscreenControl: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.setOptions( optionsCarte );
}

La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode set

function initialisation(){
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.set( "center", new google.maps.LatLng( 47.389982, 0.688877 ) );
		maCarte.set( "zoom", 8 );
		maCarte.set( "fullscreenControl", true );
}

La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode setValues

function initialisation(){
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.setValues( {
			center : { lat: 47.389982, lng: 0.688877 },
			zoom: 8,
			fullscreenControl: true
		} );
}

Masquer le bouton pour afficher la carte en plein écran - fullscreenControl: false

Pour désactiver le contrôle zoom, il suffit de définir la propriété fullscreenControl sur false dans les options optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		fullscreenControl: false
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Autres écritures équivalentes :

utilisation de la méthode setOptions de la classe Map

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		fullscreenControl: false
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.setOptions( optionsCarte );
}

La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode set

function initialisation(){
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.set( "center", new google.maps.LatLng( 47.389982, 0.688877 ) );
		maCarte.set( "zoom", 8 );
		maCarte.set( "fullscreenControl", false );
}

La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode setValues

function initialisation(){
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.setValues( {
			center : { lat: 47.389982, lng: 0.688877 },
			zoom: 8,
			fullscreenControl: false
		} );
}

Comportement par défaut du bouton pour afficher la carte en plein écran

Par défaut, le contrôle permettant d'afficher la carte en plein écran est masqué. Lorsqu'il est affiché, il est positionné en haut à droite de la carte.

Par conséquent, définir la propriété fullscreenControl sur false dans optionsCarte :

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		fullscreenControl: false
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

ou omettre la propriété fullscreenControl dans optionsCarte, masquera systématiquement le bouton permettant de basculer la carte en plein écran :

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 }
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Exemple de code avec la propriété fullscreenControl

Dans l'exemple de code ci-dessous le bouton permettant d'afficher la carte Google Maps en plein écran s'affichera en haut à droite (emplacement par défaut).

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est 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>
		<script>
			function initialisation(){
				var optionsCarte = {
					zoom: 8,
					center: { lat: 47.389982, lng: 0.688877 },
					fullscreenControl: true
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
		</script>
		<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>

Afficher ou masquer le bouton pour afficher une carte en plein écran

Contrôle Control exemples et tutoriels en Français

API Google Maps JavaScript version 3