Controles de Mapas do Google

Google Maps - Controles padrão

Quando o Google Maps padrão é exibido, ele oferece a coleção de controles padrão:

• Zoom (Zoom) - Mostra o controle deslizante ou os botões "+/-" para controlar o nível de zoom do mapa
• Translação (Pan) - Mostra o controle de translação usado para mover o mapa
• Tipo de Mapa (MapType) - Permite que o usuário alternar entre os tipos de mapa (rotas e satélite)
• Street View - Mostra o ícone de小人 (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 oferece:

• Escala (Scale) - Mostra o elemento de escala do mapa
• Rotação (Rotate) - Mostra um pequeno ícone circular, permitindo que você gire o mapa
• Visão Geral do Mapa (Overview Map) - Mostra uma visão em miniatura do mapa, refletindo a visão atual do viewport do mapa em uma área mais ampla

Você pode especificar quais controles mostrar ao criar o mapa (dentro de MapOptions) ou alterar as opções do mapa chamando setOptions().

Google Maps - Desativa controles padrão

Você pode querer desativar os controles padrão.

Para isso, defina a propriedade disableDefaultUI do mapa (dentro do objeto de opções do mapa) como true:

exemplo

var mapOptions {disableDefaultUI: true}

Google Maps - Abre todos os controles

Alguns controles aparecem no mapa por padrão; outros não aparecem, a menos que você os configure.

Por favor, especifique no objeto de opções do mapa quais controles adicionar ou remover do mapa.

Definir o controle como true o torna visível - definir o controle como false o oculta.

Este exemplo abre todos os controles:

exemplo

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

Google Maps - Modificar controles

Alguns controles de mapa são configuráveis.

Você pode modificar o controle definindo o campo de opções do controle.

Por exemplo, no campo zoomControlOptions define as opções usadas para modificar o controle de zoom. O campo zoomControlOptions pode conter:

• google.maps.ZoomControlStyle.SMALL - Exibe o controle de zoom mini (apenas os botões + e -)
• google.maps.ZoomControlStyle.LARGE - Exibe o controle de zoom padrão (controle de deslize)
• google.maps.ZoomControlStyle.DEFAULT - Escolhe o controle de zoom mais adequado para o dispositivo e o tamanho do mapa

exemplo

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

Atenção: Se você quiser modificar o controle, primeiro habilite-o (defina como true).

Outro controle configurável é o controle MapType.

O campo mapTypeControlOptions define as opções usadas para modificar o controle. 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 através de um menu suspenso
• google.maps.MapTypeControlStyle.DEFAULT - Exibe o comportamento padrão “padrão” (depende do tamanho da tela)

exemplo

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

Você ainda pode usar a propriedade ControlPosition para posicionar o controle:

exemplo

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