Activer désactiver le contrôle ou bouton échelle

Contrôle Control exemples et tutoriels en Français

API Google Maps JavaScript version 3

#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 afficher ou masquer le contrôle échelle ?

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 affichant l'échelle de la carte.

Carte avec le bouton 'échelle' activé

Carte avec le contrôle échelle activé.

Propriété scaleControl

Le contrôle échelle permet d'afficher l'échelle de la carte. L'unité de mesure est indiquée en kilomètres et en miles. L'échelle est représentée sous cette forme :

La propriété scaleControl permet d'afficher ou de masquer le bouton 'échelle' sur la carte.

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

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

Afficher le bouton 'échelle' - scaleControl: true

Pour activer le contrôle 'échelle', il suffit de définir la propriété scaleControl sur true dans les options servant à la construction de la carte.

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

Masquer le bouton 'échelle' - scaleControl: false

Pour désactiver le contrôle 'échelle', il suffit de définir la propriété scaleControl sur false dans les options servant à la construction de la carte.

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

Comportement par défaut du bouton 'échelle'

Par défaut, le contrôle échelle est désactivé.

Une fois activé, il apparaît dans le texte du copyright.

Code final

Affichage du bouton ou contrôle échelle en bas à gauche de 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,
					scaleControl: true
				}
				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>