Une carte Google - avec le jeu de contrôle par défaut:
Google Maps - Les contrôles par défaut
En montrant une carte standard de Google, il est livré avec le jeu de contrôle par défaut:
- Zoom - affiche un curseur ou "+/-" boutons pour contrôler le niveau de zoom de la carte
- Pan - affiche une commande de panoramique pour le panoramique de la carte
- MapType - permet à l'utilisateur bascule entre les types de carte (roadmap and satellite) de (roadmap and satellite) par (roadmap and satellite)
- Street View - affiche une icône Pegman qui peut être traîné à la carte pour permettre Street View
Google Maps - Autres contrôles
En plus des contrôles par défaut, Google Maps a aussi:
- Scale - affiche un élément plan à l'échelle
- Rotation - affiche une petite icône circulaire qui vous permet de faire pivoter les cartes
- Vue générale Carte - affiche une carte de présentation des miniatures reflétant la carte actuelle viewport dans une zone plus large
Vous pouvez spécifier qui contrôle à montrer lors de la création de la carte (inside MapOptions) à l' setOptions() (inside MapOptions) ou en appelant setOptions() pour modifier les options de la carte.
Google Maps - Désactivation Les contrôles par défaut
Vous pouvez plutôt vouloir désactiver les contrôles par défaut.
Pour ce faire, définissez la propriété de la Carte disableDefaultUI (dans les Options de la carte objet) true:
Google Maps - Mettez tous les contrôles
Certains contrôles apparaissent sur la carte par défaut; tandis que d'autres ne seront pas apparaître sauf si vous les définissez.
Ajout ou suppression des contrôles de la carte est spécifiée dans le Plan d'options d'objet.
Réglez la commande sur true pour rendre visible - Régler la commande à false pour le masquer.
L'exemple suivant se "on" tous les contrôles:
Exemple
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true Essayez - le vous - même » Google Maps - Contrôles Modification
Plusieurs des commandes de la carte sont configurables.
Les commandes peuvent être modifiées en spécifiant les champs d'options de contrôle.
Par exemple, les options pour la modification d'une commande de zoom sont spécifiées dans le champ zoomControlOptions. Le champ zoomControlOptions peut contenir:
- google.maps.ZoomControlStyle.SMALL - affiche un contrôle mini-zoom (seulement boutons + et -)
- google.maps.ZoomControlStyle.LARGE - affiche le contrôle du curseur de zoom norme
- google.maps.ZoomControlStyle.DEFAULT - prend le meilleur contrôle de zoom en fonction du périphérique et de taille de la carte
Exemple
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
Essayez - le vous - même » Note: Si vous modifiez un contrôle, toujours d'abord activer le contrôle (set it to true) .
Un autre contrôle configurable est le contrôle de MapType.
Options pour la modification d'une commande sont spécifiées dans le champ mapTypeControlOptions. Le champ mapTypeControlOptions peut contenir ::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - affichage d'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 "default" comportement (depends on screen size) de (depends on screen size) l' (depends on screen size)
Exemple
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
} Essayez - le vous - même » Vous pouvez également placer une commande avec la propriété ControlPosition:
Exemple
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
} Essayez - le vous - même » Google Maps - Commandes personnalisées
Créer un contrôle personnalisé qui vous emmène toujours à Londres, lorsque vous cliquez dessus (if the map is dragged) :
Exemple
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText); Essayez - le vous - même » Google Maps - Contrôles de référence
Google Maps API de référence .