Google Maps contrôle mis

Précédent: Google Maps Event

Suivant: Google Map Types

Une carte Google - le jeu de contrôle par défaut est réglé:

Google Maps - ensemble de commande par défaut est réglé:

Lorsque vous utilisez une carte standard Google, ses paramètres par défaut sont les suivants:

.Zoom- Affiche une barre de défilement pour contrôler le niveau map Zoom
.PPan- Sur l'affichage de la carte est un appartement de contrôle de bol comme, cliquez sur les quatre coins de la casserole la carte
.MapType- Permet à l'utilisateur de choisir entre les types de carte (feuille de route et satallite) commutateur
.StreetView- Apparaît comme une icône Pegman, vous pouvez le faire glisser vers un point sur la carte pour ouvrir Street View

Google Maps - plus set de contrôle

En plus de l'ensemble de contrôle par défaut ci-dessus, Google a également:

.Scale- Affichage échelle de la carte
.Rotate- Afficher une petite circonférence de l'icône, vous pouvez faire pivoter la carte
.verview Map- vue en plan dans la perspective d'un plan étendu

Lorsque vous créez une carte, vous pouvez spécifier quel ensemble de contrôles est affiché en définissant l'option ou en appelant setOptions () pour modifier la configuration des options de la carte.

Google Maps - désactiver l'ensemble de contrôle par défaut

Vous pouvez désactiver l'ensemble des commandes par défaut.

Pour désactiver l'ensemble de contrôle par défaut, définissez la propriété sur la carte disableDefaultUI vrai:

Exemples

disableDefaultUI:true

Essayez »

Google Maps - tous les contrôles prévus pour ouvrir

Certaines commandes définissent l'affichage par défaut sur la carte, tandis que d'autres ne seront pas, sauf si vous les définissez.

Réglez la commande pour le rendre visible vrai - Régler la commande à false pour le masquer.

Les exemples suivants sont ouverts tous les contrôles:

Exemples

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

Essayez »

Google Maps - modifier l'ensemble de commande

Certains contrôles de cartes sont configurables. Changer contrôle mis en développant le champ des options de contrôle.

F Par exemple, pour modifier l'option de commande Zoom spécifie zoomControlOptions. zoomControlOptions contient les trois options suivantes:

.google.maps.ZoomControlStyle.SMALL- affichage minimiser le contrôle du zoom
.google.maps.ZoomControlStyle.LARGE- diaporama commandes de zoom norme
.google.maps.ZoomControlStyle.DEFAULT- équipement et la taille de la carte en fonction, sélectionnez le contrôle le plus approprié

Exemples

zoomControl : true ,
zoomControlOptions : {
style : google . maps . ZoomControlStyle . SMALL
}

Essayez »

Remarque: Si vous avezbesoin de modifier une commande, contrôle de premier tour (mis à true).

Un autre contrôle est le contrôle MapType.

MapType contrôle peut apparaître dans l'une des options de style suivantes:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR, dans une barre horizontale apparaît comme un ensemble de boutons de commande comme indiqué dans Google Maps.
google.maps.MapTypeControlStyle.DROPDOWN_MENU, pour afficher un seul bouton de commande, vous permettant de sélectionner le type dans le menu déroulant la carte.
google.maps.MapTypeControlStyle.DEFAULT, pour afficher le comportement "par défaut", qui dépend de la taille de l'écran et peut changer dans les futures versions de l'API.

Exemples

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Essayez »

De même, vous pouvez utiliser le contrôle de la propriété emplacement ControlPosition spécifié:

Exemples

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}

Essayez »

Google Maps - définir contrôle personnalisé

Créer un contrôle personnalisé pour retourner à Londres pour l'événement Click: (Si la carte est traîné):

Exemples

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 »