Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1

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

Tutoriel publié le 25 Avril 2011 Mis à jour le 03 Février 2012

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 ou contrôle permettant de zoomer sur la carte.

Carte avec le bouton 'zoom' désactivé

Le contrôle de la carte à l'aide des touches du clavier est désactivé

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 version 3.6 de l'API		Apparence du contrôle depuis la version 3.7 de l'API
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.

Bouton Zoom en fonction de la taille de la carte

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>

API Google Maps JavaScript version 3

Afficher ou masquer le bouton pour zoomer

Google Maps API & Google Web Services