Um mapa Google - com o conjunto de controle padrão:
Google Maps - os controles padrão
Ao mostrar um mapa padrão do Google, ele vem com o conjunto de controle padrão:
- Zoom - mostra um controle deslizante ou "+/-" botões para controlar o nível de zoom do mapa
- Pan - exibe um controle de pan de rolagem do mapa
- MapType - permite que o usuário alterne entre diferentes tipos de mapas (roadmap and satellite)
- Street View - exibe um ícone Pegman que pode ser arrastado para o mapa para permitir Street View
Google Maps - Mais controlos
Além dos controles padrão, o Google Maps também tem:
- Scale - exibe um elemento escala do mapa
- Rodar - exibe um pequeno ícone circular que permite girar mapas
- Visão Geral mapa - exibe um mapa visão geral de miniaturas refletindo a janela de exibição atual do mapa dentro de uma área mais ampla
Você pode especificar que controla a mostrar ao criar o mapa (inside MapOptions) ou ligando para setOptions() para alterar as opções do mapa.
Google Maps - Desativar os controles padrão
Você pode, em alternativa deseja desativar os controles padrão.
Para fazer isso, defina o Mapa disableDefaultUI propriedade (entre as opções Mapa do objeto) como true:
Google Maps - Ligue todos os controles
Alguns controles aparecer no mapa por padrão; enquanto outros não aparecerá a menos que você configurá-los.
Adicionar ou remover controles do mapa é especificado no Mapa opções objeto.
Ajuste o controle para true para torná-lo visível - Definir o controle para false para escondê-lo.
O exemplo a seguir transforma "on" todos os controles:
Exemplo
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true Tente você mesmo " Google Maps - Controles Modificando
Vários dos controles do mapa são configuráveis.
Os controlos podem ser modificado especificando campos de opções de controlo.
Por exemplo, opções para modificar um controle de zoom são especificados no campo zoomControlOptions. O campo zoomControlOptions pode conter:
- google.maps.ZoomControlStyle.SMALL - exibe um controle de mini-zoom (apenas botões + e -)
- google.maps.ZoomControlStyle.LARGE - exibe o controle deslizante de zoom standard
- google.maps.ZoomControlStyle.DEFAULT - escolhe o melhor controle de zoom com base no dispositivo e tamanho do mapa
Exemplo
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
Tente você mesmo " Note: Se você modificar um controle, sempre ative o controle primeiro (set it to true) .
Outro controle configurável é o controle MapType.
Opções para modificar um controlo está especificado no campo mapTypeControlOptions. O campo pode conter :: mapTypeControlOptions
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - exibição de um botão para cada tipo de mapa
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - selecione o tipo de mapa através de um menu dropdown
- google.maps.MapTypeControlStyle.DEFAULT - exibe o "default" comportamento (depends on screen size)
Exemplo
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
} Tente você mesmo " Você também pode posicionar um controle, com a propriedade ControlPosition:
Exemplo
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
} Tente você mesmo " Google Maps - controles personalizados
Criar um controle personalizado que sempre o leva de volta a Londres, quando clicado (if the map is dragged) :
Exemplo
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 você mesmo " Google Maps - Controles de Referência
Google Maps API de referência .