Activer désactiver le contrôle ou bouton pour zoomer

Contrôle Control exemples et tutoriels en Français

API Google Maps JavaScript version 3

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Comment afficher ou masquer le contrôle zoom ?

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 les boutons permettant de zoomer sur la carte.

Carte avec masquage ou affichage des boutons permettant de zoomer sur la carte

Cliquez sur le bouton ci-dessus afin d'afficher ou masquer les boutons de zoom sur la carte.
Afficher les boutons pour zoomer
Par contre, même lorsque les boutons pour zoomer sont masqués, vous pouvez toujours zoomer et dézoomer à l'aide d'un double click gauche et droit ou via la roulette de votre souris.

Propriété zoomControl

Le bouton pour zoomer permet d'effectuer des zooms avant ou arrière sur la carte. Son apparence varie en fonction de type d'appareil affichant la carte :

Zoom controle Google Maps API.

Pour activer ou désactiver le bouton pour zoomer sur une carte, il suffit d'utiliser la propriété zoomControl de l'objet MapOptions.
La propriété zoomControl est un booléen. Elle ne peut prendre que deux valeurs : true ou false

Afficher les boutons pour zoomer - zoomControl: true

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

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

Masquer les boutons pour zoomer - zoomControl: false

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

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

Comportement par défaut des boutons pour zoomer

Par défaut, le contrôle zoom :

  • apparaît dans le coin inférieur droit de la carte,
  • se présente sous la forme de deux boutons [ + ] et [ - ] alignés verticalement.
Boutons pour Zoomer sur une carte Google Maps

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

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

ou omettre la propriété zoomControl dans optionsCarte, affichera quand même les boutons pour zoomer 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);
}
Attention :
Même si les bouton pour zoomer ne saffichent plus sur la carte, il est toujours possible d'effectuer des zooms à l'aide de la roulette et/ou des boutons de votre souris :
  • Zoomer en avant : double click sur le bouton gauche de la souris,
  • Zoomer en arrière : double click sur le bouton droit de la souris.

Code final

L'exemple de code ci-dessous affiche une carte où le bouton ou contrôle permettant de zoomer est masqué.

<!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 },
					zoomControl: false
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>