Activer désactiver le controle de la carte par clavier

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 autoriser ou interdire le contrôle de la carte par le clavier ?

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 contrôle de la carte (zoom et déplacement) à l'aide des touches clavier.

Carte dont le contrôle via le clavier est désactivé

Cliquez sur le bouton ci-dessus afin d'activer ou désactiver le contrôle de la carte (zoom et déplacement) à l'aide des touches de votre clavier.
Activer le contrôle par le clavier

Le contrôle de la carte par le clavier est actuellement désactivé.
Désormais, après avoir cliqué sur la carte avec votre souris, il vous sera impossible de déplacer et de zoomer sur votre carte avec votre clavier :

  • Touche [+] : Zoom en avant,
  • Touche [-] : Zoom en arrière,
  • Touche [direction] : déplace d'un écran la carte dans le sens indiqué par la touche pressée (les 4 directions cardinales),
  • Touche [Home] : déplace la carte vers l'Ouest,
  • Touche [End] : déplace la carte vers l'Est,
  • Touche [Page up] : déplace la carte vers le Nord,
  • Touche [Page down] : déplace la carte vers le Sud.

Propriété keyboardShortcuts

Lorsque le contrôle de la carte par le clavier est activé, vous pouvez zoomer, dézoomer et déplacer la carte à l'aide des touches de votre clavier.

Pour activer ou désactiver le controle de la carte via le clavier, il suffit d'utiliser la propriété keyboardShortcuts de l'objet MapOptions.

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

Activer le contôle de la carte par clavier - keyboardShortcuts: true

Pour activer le contrôle d'une carte via les touches clavier il suffit de définir la propriété keyboardShortcuts 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 },
		keyboardShortcuts: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Désactiver le contôle de la carte par clavier - keyboardShortcuts: false

Pour désactiver le contrôle d'une carte via les touches clavier il suffit de définir la propriété keyboardShortcuts 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 },
		keyboardShortcuts: false
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Comportement par défaut du contrôle de carte par clavier

Par défaut, le contrôle de la carte par clavier :

  • est activé,
  • nécessite de cliquer une fois sur la carte, afin de pouvoir zommer et déplacer celle-ci via les touches de votre clavier.

Liste des touches calvier utilisables :

  • Touche [+] : Zoom en avant,
  • Touche [-] : Zoom en arrière,
  • Touche [direction] : déplace d'un écran la carte dans le sens indiqué par la touche pressée (les 4 directions cardinales),
  • Touche [Home] : déplace la carte vers l'Ouest,
  • Touche [End] : déplace la carte vers l'Est,
  • Touche [Page up] : déplace la carte vers le Nord,
  • Touche [Page down] : déplace la carte vers le Sud.

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

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

ou omettre la propriété keyboardShortcuts dans optionsCarte, activera systématiquement le contrôle de la carte via votre clavier :

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 contrôle de la carte à l'aide des touches de votre clavier 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 },
					keyboardShortcuts: 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>