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