Commandes de Google Maps
Google Maps - Les contrôles par défaut
Lors de l'affichage d'une carte Google standard, elle est livrée avec le jeu de commandes par défaut :
- Zoom - affiche un curseur ou des boutons "+/-" pour contrôler le niveau de zoom de la carte
- Pan - affiche une commande de panoramique pour faire un panoramique de la carte
- MapType - permet à l'utilisateur de basculer entre les types de carte (feuille de route et satellite)
- Street View - affiche une icône Pegman qui peut être déplacée vers la carte pour activer Street View
Google Maps - Plus de contrôles
En plus des commandes par défaut, Google Maps propose également :
- Échelle - affiche un élément d'échelle de la carte
- Rotation - affiche une petite icône circulaire qui vous permet de faire pivoter les cartes
- Carte d'ensemble - affiche une carte d'ensemble miniature reflétant la fenêtre d'affichage actuelle de la carte dans une zone plus large
Vous pouvez spécifier les contrôles à afficher lors de la création de la carte (dans MapOptions) ou en appelant setOptions() pour modifier les options de la carte.
Google Maps - Désactiver les contrôles par défaut
Vous pouvez à la place souhaiter désactiver les contrôles par défaut.
Pour ce faire, définissez la propriété disableDefaultUI de Map (dans l'objet Map options) sur true :
Exemple
var mapOptions {disableDefaultUI: true}
Google Maps - Activer toutes les commandes
Certaines commandes apparaissent sur la carte par défaut ; tandis que d'autres n'apparaîtront que si vous les définissez.
L'ajout ou la suppression de contrôles de la carte est spécifié dans l'objet Options de la carte.
Définissez le contrôle sur true pour le rendre visible - Définissez le contrôle sur false pour le masquer.
L'exemple suivant active tous les contrôles :
Exemple
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google Maps - Modification des contrôles
Plusieurs des contrôles de la carte sont configurables.
Les contrôles peuvent être modifiés en spécifiant des champs d'options de contrôle.
Par exemple, les options de modification d'un contrôle Zoom sont spécifiées dans le champ zoomControlOptions. Le champ zoomControlOptions peut contenir :
- google.maps.ZoomControlStyle.SMALL - affiche un contrôle de mini-zoom (uniquement les boutons + et -)
- google.maps.ZoomControlStyle.LARGE - affiche le curseur de zoom standard
- google.maps.ZoomControlStyle.DEFAULT - sélectionne le meilleur contrôle de zoom en fonction de l'appareil et de la taille de la carte
Exemple
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
Remarque : Si vous modifiez un contrôle, activez toujours le contrôle en premier (définissez-le sur true).
Un autre contrôle configurable est le contrôle MapType.
Les options de modification d'un contrôle sont spécifiées dans le champ mapTypeControlOptions. Le champ mapTypeControlOptions peut contenir ::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - affiche un bouton pour chaque type de carte
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - sélectionnez le type de carte via un menu déroulant
- google.maps.MapTypeControlStyle.DEFAULT - affiche le comportement "par défaut" (dépend de la taille de l'écran)
Exemple
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
Vous pouvez également positionner un contrôle, avec la propriété ControlPosition :
Exemple
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}