Vlastnosti a kontrolní prvky mapy v Google Maps

Nastavení vlastností mapy

V předchozím díle jsme si kromě lehkého teoretického úvodu ukázali, jak vložit mapu do obsahu stránek včetně základního nastavení výchozí polohy a úrovně přiblížení. V tomto díle se budeme podrobněji věnovat možnostem základního inicializačního nastavení mapy a nastavení ovládacích prvků.

Jen pro zopakování připomínám, že vlastní objekt mapy vytváříme voláním funkce google.maps.Map(), která očekává dva argumenty: kontejner, který bude mapu obsahovat a proměnnou výčtového typu, která nese vlastnosti inicializačního nastavení. Pro přehlednost tedy může volání konstruktoru objektu mapy vypadat následovně:

map = new google.maps.Map(document.getElementById('map'), prop);

Vlastnosti tedy budou vypsány zvlášť v deklaraci proměnné. Vše je ale opět součástí funkce initMap() jak jsme si ukázali předchozím díle:

var prop = {
    center: {lat: 50.047871, lng: 15.770581},
    zoom: 16
};

Některé užitečné vlastnosti

Nyní se tedy budeme věnovat některým vlastnostem podrobně:

• center – je to jedna ze dvou povinných vlastností. Nastavuje počáteční vycentrování mapy nad určitými souřadnicemi. Jako hodnotu očekává typ LatLng (instanci této třídy), který představuje zeměpisnou šířku a délku. Dá se zapsat buď v podobě uvedené výše na příkladu, nebo obšírněji voláním konstruktoru google.maps.Lat­Lng(). Latitude neboli zeměpisná šířka ve stupních nabývá hodnot (-90,90); Longitude, tedy zeměpisná délka nabývá hodnot (-180,180).
• zoom – další z povinných vlastností. Povolené hodnoty jsou závislé na druhu mapy. Nula představuje největší oddálení. Pro defaultní mapu ROADMAP je maximální zoom level 21 (někde se uvádí, že 18 - vyzkoušejte sami).
• mapTypeId – nastavuje typ základové mapy. Defaultně je nastaveno na ROADMAP, což je podkladová mapa, jež se vám zobrazí, když zapnete Google mapy. Ostatní vlastnosti jsou:
  • HYBRID – je to vlastně satelitní mapa, kde jsou pojmenované objekty,
  • SATELLITE – klasická satelitní mapa jak ji znáte z Google map,
  • TERRAIN – zde je zvýrazněn především horský reliéf a přírodní prvky. Volby HYBRID a TERRAIN jsou dostupné přes kontrolní prvek nastavení podkladové mapy (zpravidla vlevo nahoře) doplňkovou volbou Labels u satelitní mapy a Terrain u klasické mapy.
• draggable, scrollwheel – šikovné vlastnosti, které jsou defaultně nastaveny na hodnotu true, pokud je nastavíte na false, vypnete možnost posouvání mapy myší a scrollování kolečkem. To se může dost hodit obzvláště v situacích, kdy uživatel roluje stránku a najede myší do oblasti mapy.
• minZoom, maxZoom – nastavím maximální a minimální možné přiblížení (zoom level) mapy.

Vlastností je samozřejmě mnohem více. Většinou souvisejí s nastavením kontrolních (ovládacích) prvků mapy, kterým se budeme věnovat záhy. Kompletní seznam a popis v angličtině naleznete samozřejmě v referenci: https://developers.google.com/…pt/reference

Ovládací prvky mapy

Ovládacími prvky mapy se rozumí všechny komponenty na mapě, které mají co dočinění se základním ovládáním dynamického okna mapy a s dalšími službami. Jedná se tedy především o možnost přibližování a oddalování, StreetView panáčka a přepínání podkladové mapy.

Počet, podoba a rozmístění ovládacích prvků na Google mapách se několikrát měnil. Jejich podoba je také závislá na implementaci mapy a zobrazovacím zařízení. Mohlo by vás proto zaskočit, že na vámi přidané mapě nejsou ty stejné ovládací prvky. Pokud jste již ve zkoumání mapy byly trochu aktivní, možná jste zjistili, že při kliknutím pravým tlačítkem se nezobrazuje ani klasické kontextové menu. Nelekejte se, vše je možno nastavit, upravit a dodělat.

Na obrázku níže je podoba mapy s označenými základními kontrolními prvky, jejichž popis je pod obrázkem. Podobu mapy můžete porovnat s http://maps.google.cz/. Takto vypadá základní set pro API verze 3.21. Pokus i přejete pracovat se starší verzí je nutno ji specifikovat v parametru připojeném za odkaz na skript:

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXZ7qqffbc884NHqXm_oGRF35f5c3BjDU&callback=initMap&v=3.21">
</script>

Doporučuji verzi vždy specifikovat!

1. MapType – slouží k přepínání podkladové mapy
2. Street View – všem známé, přetáhněte si panáčka, kam je libo
3. Zoom – přibližujte a oddalujete. Hodí se zejména, když zakážete přibližování myší.

Defaultní kontrolní prvky lze vypnout nastavením vlastnosti disableDefaultUI na hodnotu true. Pro porovnání takto vypadá základní set ovládacích prvků a jejich rozmístění pro verzi 3.21:

Dalšími kontrolními prvky, jež je možno přidat jsou:

• scaleControl – přidá měřítkovou lištu. Velmi užitečná věc. Osobně mi není jasné, proč není součástí defaultního setu.
• rotateControl – umožní rotovat mapu o 90 stupňů. Prvek je ale dostupný pouze pro šikmé letecké snímky.
• overviewMapCon­trol – zobrazí přehledku, neboli malou mapku, kterou je třeba případně nastavit k obrazu svému. Tento kontrolní prvek od verze 3.22 není k dispozici. Ve starší verzi je mapka dostupná, ale defaultně je schovaná a otevře se malou šipečkou v pravém dolním rohu. Pozor, je snadno k přehlédnutí.

Samozřejmě všechny kontrolní prvky se dají dále upravovat, existují v mnoha variantách a mutacích. Úprava je možná přes příslušnou Options vlastnost, takže například: panControlOptions nebo rotateControlOp­tions. Jednou z vlastností je vždy vlastnost position, která specifikuje, kde má být prvek umístěn. Možné pozice jsou kombinace: LEFT, RIGHT, CENTER, TOP a BOTTOM (viz obrázek níže).

Takže například nastavení kontrolního prvku MapTYpe může vypadat následovně:

mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.LEFT_CENTER,
mapTypeIds: new Array(google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.ROADMAP)
}

Samozřejmě kompletní reference nejen ke kontrolním prvkům je dostupná:

https://developers.google.com/…xp/reference

Stejně tak seznam nejdůležitějších změn ve verzi 3.22. https://developers.google.com/…ontrols-diff

To je protentokrát vše a příště se podíváme na umisťování bodů a obrazců do mapy.