#PanamaPapers: En finir avec le secret, sanctionnons les banques !

Les Panama Papers ont révélé la façon dont certaines élites utilisent le secret pour cacher leurs activités financières. Ce secret permet à de riches individus de ne pas payer leur part normale d’impôts, mais il permet également à la grande criminalité de se financer, de l’esclavage humain à la vente d’armes illégales en passant par le financement du terrorisme.

Eva Joly - Députée européenne. Rejoignez-nous ! Signez la pétition et partagez-la !

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

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'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 molette de souris activé ou désactivé

Cliquez sur le bouton ci-dessus afin d'activer ou désactiver le zoom sur la carte à l'aide de la roulette de souris.

Activer le zoom à l'aide de la roulette de souris

Le zoom sur la carte via la molette de souris est actuellement désactivé.
Désormais, après avoir cliqué sur la carte avec votre souris, il vous sera impossible de zoomer sur votre carte avec votre roulette de souris.

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 zoom sur une carte grace à la molette de souris, il suffit d'utiliser la propriété scrollwheel de l'objet 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 optionsCarte servant à la construction de la carte.

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

Désactiver le zoom via la molette 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 optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		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 via la roulette souris est activé sur la carte.

Par conséquent, définir la propriété scrollwheel 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é scrollwheel dans optionsCarte, autorisera systématiquement le zoom à l'aide de la molette de souris 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

Dans l'exemple de code ci-dessous le zoom sur la carte à l'aide de la molette de la souris est désactivé.

<!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 },
					scrollwheel: 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 ou désactiver le zoom via la roulette de souris

Contrôle Control exemples et tutoriels en Français

API Google Maps JavaScript version 3