Ovládací prvky Map Google


Mapy Google – výchozí ovládací prvky

Při zobrazení standardní mapy Google je dodávána s výchozí sadou ovládacích prvků:

  • Zoom – zobrazí posuvník nebo tlačítka „+/-“ pro ovládání úrovně přiblížení mapy
  • Posun – zobrazí ovládací prvek pro posouvání mapy
  • MapType – umožňuje uživateli přepínat mezi typy map (cestovní mapa a satelitní)
  • Street View – zobrazí ikonu panáčka, kterou lze přetažením na mapu aktivovat Street View

Mapy Google – více ovládacích prvků

Kromě výchozích ovládacích prvků mají Mapy Google také:

  • Měřítko - zobrazí prvek měřítka mapy
  • Otočit – zobrazí malou kruhovou ikonu, která vám umožní otáčet mapy
  • Orientační mapa – zobrazí miniaturní orientační mapu odrážející aktuální výřez mapy v širší oblasti

Můžete určit, které ovládací prvky se mají zobrazit při vytváření mapy (uvnitř MapOptions) nebo voláním setOptions() změnit možnosti mapy.


Mapy Google – deaktivace výchozích ovládacích prvků

Místo toho můžete chtít vypnout výchozí ovládací prvky.

Chcete-li tak učinit, nastavte vlastnost disableDefaultUI mapy (v objektu Možnosti mapy) na hodnotu true:

Příklad

var mapOptions {disableDefaultUI: true}


Mapy Google – Zapněte všechny ovládací prvky

Některé ovládací prvky se na mapě zobrazují ve výchozím nastavení; zatímco ostatní se nezobrazí, pokud je nenastavíte.

Přidání nebo odebrání ovládacích prvků z mapy je určeno v objektu Možnosti mapy.

Nastavte ovládací prvek na hodnotu true, aby byl viditelný – nastavením ovládacího prvku na hodnotu false jej skryjte.

Následující příklad zapíná všechny ovládací prvky:

Příklad

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

Google Maps – Úprava ovládacích prvků

Některé ovládací prvky mapy lze konfigurovat.

Ovládací prvky lze upravit zadáním polí možností ovládacích prvků.

Například možnosti pro úpravu ovládacího prvku Zoom jsou určeny v poli zoomControlOptions. Pole zoomControlOptions může obsahovat:

  • google.maps.ZoomControlStyle.SMALL – zobrazí ovládací prvek minizoomu (pouze tlačítka + a -)
  • google.maps.ZoomControlStyle.LARGE – zobrazí standardní posuvník přiblížení
  • google.maps.ZoomControlStyle.DEFAULT – vybírá nejlepší ovládání přiblížení podle zařízení a velikosti mapy

Příklad

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

Poznámka: Pokud upravíte ovládací prvek, vždy jej nejprve povolte (nastavte na hodnotu true).

Dalším konfigurovatelným ovládacím prvkem je ovládací prvek MapType.

Možnosti pro úpravu ovládacího prvku jsou uvedeny v poli mapTypeControlOptions. Pole mapTypeControlOptions může obsahovat::

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR – zobrazení jednoho tlačítka pro každý typ mapy
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU – vyberte typ mapy z rozbalovací nabídky
  • google.maps.MapTypeControlStyle.DEFAULT – zobrazí „výchozí“ chování (závisí na velikosti obrazovky)

Příklad

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

Ovládací prvek můžete také umístit pomocí vlastnosti ControlPosition:

Příklad

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