Comment afficher ou masquer le contrôle imagerie 45° ?
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 permettant d'afficher l'imagerie à 45°.
Carte de Clermont-Ferrand avec le bouton imagerie 45° activé
Propriété rotateControl
Le contrôle imagerie à 45° permet d'afficher des images aériennes haute résolution prises à 45° dans les quatre principales directions : Nord, Est, Sud et Ouest. Ces images sont disponibles pour des niveaux de zoom plus élevés que pour les types de cartes habituelles et uniquement pour les types de carte Satellite ou Hybride.
Apparence du contrôle jusqu'à la V 3.6 | Apparence du contrôle depuis la V 3.7 | Apparence du contrôle depuis la V 3.13 |
---|---|---|
La propriété rotateControl permet d'afficher ou de masquer le bouton 'imagerie 45°' sur la carte.
Pour activer ou désactiver le bouton 'imagerie 45°' sur une carte, il suffit d'utiliser la propriété rotateControl de l'objet google.maps.MapOptions.
La propriété rotateControl est un booléen. Autrement dit elle ne peut prendre que deux valeurs : true ou false
Afficher le bouton 'imagerie 45°' - rotateControl: true
Pour activer le contrôle 'imagerie 45°', il suffit de définir la propriété rotateControl sur true dans les options servant à la construction de la carte.
var optionsCarte = { ..... rotateControl: true } var maCarte = new google.maps.Map(document.getElementById('EmplacementDeMaCarte'), optionsCarte);
Masquer le bouton 'imagerie 45°' - rotateControl: false
Pour désactiver le contrôle 'imagerie 45°', il suffit de définir la propriété rotateControl sur false dans les options servant à la construction de la carte.
var optionsCarte = { ..... rotateControl: false } var maCarte = new google.maps.Map(document.getElementById('EmplacementDeMaCarte'), optionsCarte);
Comportement par défaut du bouton 'imagerie 45°'
Par défaut, le contrôle 'imagerie 45°' :
- est activé mais il ne s'affiche sur la carte que dans les zones où le service est disponible, uniquement pour des cartes de types Satellite ou Hybride, et lorsque le niveau de zoom est suffisamment élevé,
- apparaît dans le coin supérieur gauche de la carte, entre Pegman et le Zoom.
Pour connaître la liste des villes ou le service imagerie 45° est diponible veuillez consulter ces liens :
- Couverture API Google Maps : Imagerie aérienne 45°
- Carte des villes disponibles pour l'Imagerie aérienne 45°
Attention : L'imagerie 45° n'est disponible que pour certaines villes de France. En voici une liste non exhaustive :
Angers, Arcachon, Avignon, Besançon, Béziers, Bordeaux, Bourges, Clermont-Ferrand, Colmar, Dijon, Grenoble, La Roche-sur-Yon, La Rochelle, Lille, Limoges, Lyon, Marseille, Montpellier, Nancy, Nantes, Nîmes, Perpignan, Poitiers, Rennes, Reims, Rouen, Saint-Étienne, Strasbourg, Toulouse, Troyes.
Code final
Affichage du bouton ou contrôle imagerie à 45° en haut à 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(45.777185,3.087033); var optionsCarte = { zoom: 18, center: centreCarte, mapTypeId: google.maps.MapTypeId.SATELLITE, rotateControl: 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>