Comment afficher ou masquer l'échelle sur la carte ?

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'ajouter ou supprimer l'échelle sur la carte.

Carte avec l'échelle affichée ou masquée

Cliquez sur le bouton ci-dessus afin d'afficher ou masquer l'échelle sur la carte.

Afficher l'échelle de la carte

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

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

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

Afficher l'échelle - scaleControl: true

Pour activer l'affichage de l'échelle sur la carte, il suffit de définir la propriété scaleControl 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 },
		scaleControl: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Masquer l'échelle - scaleControl: false

Pour désactiver l'affichage de l'échelle' sur la carte, il suffit de définir la propriété scaleControl 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 },
		scaleControl: false
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Comportement par défaut de l'échelle sur la carte

Par défaut, l'échelle est désactivé.

Une fois activée, elle apparaît dans le texte du copyright, en bas à droite de la carte.

Par conséquent, définir la propriété scaleControl sur false dans optionsCarte :

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

ou omettre la propriété scaleControl dans optionsCarte, n'affichera pas l'échelle de 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 pour activer l'affichage de l'échelle sur la carte

L'exemple de code ci-dessous affiche l'échelle en bas à droite 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>
			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 },
					scaleControl: true
				}
				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>

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

Contrôle Control exemples et tutoriels en Français

API Google Maps JavaScript version 3