Logo TouraineVerte

API Google Maps JavaScript version 3

Autoriser ou interdire le zoom via la roulette de souris

Google Maps API & Google Web Services

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

Activer ou désactiver le zoom via la roulette de souris

Tutoriel publié le Mis à jour le
Tutoriel en Français

Comment autoriser ou interdire le zoom sur la carte à l'aide de la roulette souris ?

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'activer ou désactiver le zoom sur la carte à l'aide de la roulette de souris.

Carte avec le contrôle de zoom via la roulette de souris désactivé

Le zoom de la carte à l'aide de la roulette de votre souris est désactivé

Propriété scrollwheel

Une fois activée la propriété scrollwheel permet de zoomer, dézoomer sur la carte à l'aide de la molette de votre souris.

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

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

Activer le zoom via la roulette de souris - scrollwheel: true

Pour activer le zoom d'une carte via la roulette de souris il suffit de définir la propriété scrollwheel sur true dans les options servant à la construction de la carte.

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

Désactiver le zoom via la roulette de souris - scrollwheel: false

Pour désactiver le zoom d'une carte via la roulette de votre souris il suffit de définir la propriété scrollwheel sur false dans les options servant à la construction de la carte.

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

Comportement par défaut du zoom via la roulette de souris

Par défaut, le zoom de la carte via la roulette souris :

  • est activé.

Code final

Le zoom à l'aide de la molette de la souris (ou scrollwheel) est désactivé 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,
					scrollwheel: 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>