Comment afficher ou masquer le bouton type de carte ?

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'ajouter ou supprimer le bouton ou contrôle permettant de modifier le type de carte.

Carte avec le contrôle 'type de carte' désactivé

Cliquez sur le bouton ci-dessous afin d'afficher ou masquer le bouton permettant de modifier le type de carte.

Afficher le bouton type de carte

Propriété mapTypeControl

Le contrôle type de carte permet de modifier le type de carte à afficher. Quatre types de carte existent :

Plan : Cliquer sur le bouton Plan,
Relief : Cliquer sur le bouton Plan puis cocher la case Relief,
Satellite : Cliquer sur le bouton Satellite,
Hybride ou Satellite avec légendes : Cliquer sur le bouton Satellite puis cocher la case Légendes.

Pour afficher ou masquer le bouton 'type de carte' sur une carte, il suffit d'utiliser la propriété mapTypeControl de l'objet MapOptions.

La propriété mapTypeControl est un booléen. Autrement dit elle ne peut prendre que deux valeurs : true ou false.

Afficher le bouton 'type de carte' - mapTypeControl: true

Pour activer le contrôle 'type de carte', il suffit de définir la propriété mapTypeControl 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 },
		mapTypeControl: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Masquer le bouton 'type de carte' - mapTypeControl: false

Pour désactiver le contrôle 'type de carte', il suffit de définir la propriété mapTypeControl 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 },
		mapTypeControl: false
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Comportement par défaut du bouton 'type de carte'

Par défaut, le contrôle 'type de carte' :

est activé,
apparaît dans le coin supérieur gauche de la carte,
se présente sous la forme de deux boutons [ Plan ] et [ Satellite ] situés côte à côte.

Par conséquent, définir la propriété mapTypeControl sur true dans optionsCarte :

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

ou omettre la propriété mapTypeControl dans optionsCarte, affichera systématiquement le bouton type de carte sur la carte :

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

Code final

Voici un exemple de code complet ou le bouton ou contrôle 'type de carte' n'est pas affiché sur la carte.

<!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 },
					mapTypeId: false
				}
				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>

Activer désactiver le contrôle ou bouton type de carte

Contrôle Control exemples et tutoriels en Français

API Google Maps JavaScript version 3