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 ?.

Nous allons compléter ce code afin d'ajouter ou supprimer le bouton zoom ( ou contrôle zoom ) sur la carte.

Carte avec le bouton 'zoom' désactivé

Le contrôle Zoom de la carte est désactivé.
Par contre vous pouvez toujours zoomer et dézoomer à l'aide d'un double click gauche et droit.

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 la taille de la carte.

Apparence du contrôle jusqu'à la V 3.6		Apparence du contrôle depuis la V 3.7		Apparence du contrôle depuis la V 3.13
Taille Maxi	Taille Mini	Taille Maxi	Taille Mini	Taille Maxi	Taille Mini

La propriété zoomControl permet d'afficher ou de masquer le bouton 'zoom' sur la carte.

Pour activer ou désactiver le bouton 'zoom' sur une carte, il suffit d'utiliser la propriété zoomControl de l'objet google.maps.MapOptions.

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

Afficher le bouton 'zoom' - 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.

var optionsCarte = {
	.....
	zoomControl: true
}
var maCarte = new google.maps.Map(document.getElementById('EmplacementDeMaCarte'), optionsCarte);

Masquer le bouton 'zoom' - 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.

var optionsCarte = {
	.....
	zoomControl: false
}
var maCarte = new google.maps.Map(document.getElementById('EmplacementDeMaCarte'), optionsCarte);

Comportement par défaut du bouton 'zoom'

Par défaut le contrôle 'zoom' :

apparaît dans le coin supérieur gauche de la carte,
se présente sous la forme d'un curseur déplaçable le long d'une échelle pour les cartes de grande taille, ou de deux boutons [ + ] et [ - ] pour les cartes de petite taille.

Attention :

Même si le bouton pour zoomer sur la carte ne saffiche plus, il est toujours possible d'effectuer des zooms à l'aide de la roulette et/ou des boutons de votre souris :

Zoom avant : double click sur le bouton gauche de la souris,
Zoom arrière : double click sur le bouton droit de la souris.

Code final

Masque le bouton ou contrôle permettant de zoomer 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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					zoomControl: false
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</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>
	</body>
</html>

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