Kontrolki Google Maps

Google Maps - domyślne kontrolki

Kiedy wyświetla się standardowa mapa Google, oferuje domyślny zestaw kontrolki:

• Powiększenie (Zoom) - wyświetla suwak lub przyciski "+/-", aby kontrolować poziom powiększenia mapy
• Przesuwanie (Pan) - wyświetla kontrolkę do przesuwania mapy
• Typ mapy (MapType) - pozwala użytkownikom przełączać między typami map (mapą szarym i mapą satelitarną)
• Street View - wyświetla ikonę małego człowieka (Pegman icon), którą można przeciągnąć na mapę, aby włączyć Street View

Google Maps - więcej kontrolki

Oprócz domyślnych kontrolki, Google Maps oferuje również:

• Skala (Scale) - wyświetla elementy skali mapy
• Obrót (Rotate) - wyświetla mały okrągły ikonę, która pozwala obracać mapę
• Podgląd mapy (Overview Map) - wyświetla miniaturę mapy, która odzwierciedla aktualny widok mapy na szerszym obszarze

Możesz zdefiniować, które kontrolki będą wyświetlane przy tworzeniu mapy (w MapOptions) lub zmienić opcje mapy za pomocą wywołania setOptions().

Google Maps - wyłącz domyślne kontrolki

Możesz chcieć wyłączyć domyślne kontrolki.

W tym celu ustaw atrybut disableDefaultUI mapy (w obiekcie opcji mapy) na true:

przykład

var mapOptions {disableDefaultUI: true}

Google Maps - otwórz wszystkie kontrolki

Niektóre kontrolki są domyślnie wyświetlane na mapie; inne nie są wyświetlane, chyba że je ustawisz.

Proszę zdefiniować w obiekcie opcji mapy kontrolki do dodania lub usunięcia z mapy.

Ustawienie kontrolki na true sprawia, że jest widoczna - ustawienie na false ukrywa ją.

Ten przykład otwiera wszystkie kontrolki:

przykład

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

Google Maps - modyfikacja kontrolki

Niektóre kontrolki map są konfigurowalne.

Możesz zmodyfikować kontrolkę, określając pole opcji kontrolki.

Na przykład, pole zoomControlOptions określa opcje używane do modyfikacji kontrolki Zoom. Pole zoomControlOptions może zawierać:

• google.maps.ZoomControlStyle.SMALL - wyświetla mini kontroler skalowania (tylko przyciski + i -)
• google.maps.ZoomControlStyle.LARGE - wyświetla standardowy kontroler skalowania (pasek skalowania)
• google.maps.ZoomControlStyle.DEFAULT - wybiera najlepszy kontroler skalowania na podstawie urządzenia i rozmiaru mapy

przykład

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

Uwaga: Jeśli chcesz zmodyfikować kontrolkę, najpierw ją włącz (ustaw na true).

Inną konfigurowalną kontrolką jest kontrolka MapType.

Pole mapTypeControlOptions określa opcje używane do modyfikacji kontrolki. Pole mapTypeControlOptions może zawierać:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR - wyświetla przycisk dla każdego typu mapy
• google.maps.MapTypeControlStyle.DROPDOWN_MENU - wybiera typ mapy za pomocą menu rozwijanego
• google.maps.MapTypeControlStyle.DEFAULT - wyświetla zachowanie "domyślne" (zależy od rozmiaru ekranu)

przykład

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

Możesz również użyć atrybutu ControlPosition, aby ustawić pozycję kontrolki:

przykład

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