Google Maps conjunto de controle

Anterior: Google Maps Evento

Seguinte: Tipos Google Mapa

Um mapa do Google - o conjunto de controle padrão está definido:

Google Maps - conjunto de controle padrão está definido:

Ao usar um mapa do Google padrão, as configurações padrão são as seguintes:

.Zoom- Exibe uma barra deslizante para controlar o mapa do nível de zoom
.PPan- Na exibição de mapa é um apartamento controles tigela-como, clique sobre os quatro cantos da panela o mapa
.MapType- Permite ao usuário selecionar entre os tipos de mapa (roteiro e Satallite) Alternar
.StreetView- Aparece como um ícone Pegman, você pode arrastá-lo para um ponto no mapa para abrir Street View

Google Maps - mais conjunto de controle

Além do conjunto de controle padrão acima, o Google também:

.Scale- Exibição escala do mapa
.Rotate- Mostrar uma pequena circunferência do ícone, você pode rodar o mapa
.verview vista do plano Map-a partir da perspectiva de um mapa de área ampla

Quando você cria um mapa que você pode especificar qual conjunto de controles é exibida, definindo a opção ou ligando setOptions () para alterar o mapa opções de configuração.

Google Maps - Desligue o conjunto de controle padrão

Você pode querer desligar o conjunto padrão de controles.

Para desligar o conjunto de controle padrão, defina a propriedade para mapear disableDefaultUI verdadeira:

Exemplos

disableDefaultUI:true

tente »

Google Maps - todos os controles estabelecidos para abrir

Alguns controles definem a exibição padrão no mapa, enquanto outros não, a menos que você configurá-los.

Definir o controle para torná-lo visível verdade - Definir o controle para false para escondê-lo.

Os exemplos a seguir estão abertos todos os controles:

Exemplos

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

tente »

Google Maps - modificar o conjunto de controle

Alguns controles mapas são configuráveis. Alterar o controle definido através do desenvolvimento de campo de opções de controle.

F Por exemplo, para modificar a opção de controle de zoom especifica zoomControlOptions. zoomControlOptions contém os seguintes três opções:

.google.maps.ZoomControlStyle.SMALL- exibição minimizar controle de zoom
.google.maps.ZoomControlStyle.LARGE- zoom padrão de apresentação de slides controles
.google.maps.ZoomControlStyle.DEFAULT- equipamentos e tamanho do mapa base, selecione o controle mais adequado

Exemplos

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

tente »

Nota: Se vocêprecisar modificar um controle, primeiro controle turno (configurá-lo para true).

Outro controle é o controle MapType.

MapType controle podem aparecer em uma das seguintes opções de estilo:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR, em uma barra horizontal aparece como um conjunto de botões de controle como mostrado no Google Maps.
google.maps.MapTypeControlStyle.DROPDOWN_MENU, para a exibição de um único controle de botão, permitindo que você selecione o tipo de mapa a partir do menu drop-down.
google.maps.MapTypeControlStyle.DEFAULT, para exibir o comportamento "default", que depende do tamanho da tela e pode mudar em versões futuras da API.

Exemplos

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

tente »

Da mesma forma, você pode usar o controle de propriedade localização ControlPosition especificado:

Exemplos

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

tente »

Google Maps - jogo de controle personalizado

Criar um controle personalizado para retornar a Londres para o evento Click: (Se o mapa é arrastado):

Exemplos

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);

tente »