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

Activer désactiver le controle de la carte par clavier

Tutoriel publié le 03 Mai 2011 Mis à jour le 19 Février 2012

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

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é

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

Propriété keyboardShortcuts

Une fois activée la propriété keyboardShortcuts permet de zoomer, dézoomer et déplacer la carte à l'aide des touches de votre clavier.

Pour activer ou désactiver le keyboardShortcuts sur une carte, il suffit d'utiliser la propriété keyboardShortcuts de l'objet google.maps.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 servant à la construction de la carte.

var optionsCarte = {
	.....
	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 servant à la construction de la carte.

var optionsCarte = {
	.....
	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 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.

Code final

Dans ce code 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 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,
					keyboardShortcuts: 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

Activer désactiver le contrôle de la carte par clavier

Google Maps API & Google Web Services