Controles do Google Maps
Google Maps - Os controles padrão
Ao mostrar um mapa padrão do Google, ele vem com o conjunto de controle padrão:
- Zoom - exibe um controle deslizante ou botões "+/-" para controlar o nível de zoom do mapa
- Pan - exibe um controle panorâmico para mover o mapa
- MapType - permite que o usuário alterne entre os tipos de mapa (roteiro e satélite)
- Street View - exibe um ícone Pegman que pode ser arrastado para o mapa para ativar o Street View
Google Maps - Mais controles
Além dos controles padrão, o Google Maps também possui:
- Escala - exibe um elemento de escala do mapa
- Girar - exibe um pequeno ícone circular que permite girar mapas
- Mapa de visão geral - exibe um mapa de visão geral em miniatura refletindo a janela de visualização do mapa atual em uma área mais ampla
Você pode especificar quais controles mostrar ao criar o mapa (dentro de MapOptions) ou chamando setOptions() para alterar as opções do mapa.
Google Maps - Desativando os controles padrão
Em vez disso, você pode querer desativar os controles padrão.
Para isso, defina a propriedade disableDefaultUI do Map (dentro do objeto Map options) como true:
Exemplo
var mapOptions {disableDefaultUI: true}
Google Maps - Ative todos os controles
Alguns controles aparecem no mapa por padrão; enquanto outros não aparecerão a menos que você os defina.
Adicionar ou remover controles do mapa é especificado no objeto Opções do mapa.
Defina o controle como true para torná-lo visível - Defina o controle como false para ocultá-lo.
O exemplo a seguir ativa todos os controles:
Exemplo
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google Maps - Modificando controles
Vários dos controles do mapa são configuráveis.
Os controles podem ser modificados especificando campos de opções de controle.
Por exemplo, as opções para modificar um controle Zoom são especificadas 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 padrão
- google.maps.ZoomControlStyle.DEFAULT - escolhe o melhor controle de zoom com base no dispositivo e no tamanho do mapa
Exemplo
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
Nota: Se você modificar um controle, sempre habilite o controle primeiro (defina-o como true).
Outro controle configurável é o controle MapType.
As opções para modificar um controle são especificadas no campo mapTypeControlOptions. O campo mapTypeControlOptions pode conter::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - exibe um botão para cada tipo de mapa
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - selecione o tipo de mapa por meio de um menu suspenso
- google.maps.MapTypeControlStyle.DEFAULT - exibe o comportamento "padrão" (depende do tamanho da tela)
Exemplo
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
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
}