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