Vlastnosti a kontrolné prvky mapy v Google Maps

Nastavenie vlastností mapy

V predchádzajúcom diele sme si okrem ľahkého teoretického úvode ukázali, ako vložiť mapu do obsahu stránok vrátane základného nastavenia východiskovej polohy a úrovne priblíženia. V tomto diele sa budeme podrobnejšie venovať možnostiam základného inicializačného nastavenia mapy a nastavenie ovládacích prvkov.

Len pre zopakovanie pripomínam, že vlastný objekt mapy vytvárame volaním funkcie google.maps.Map (), ktorá očakáva dva argumenty: kontajner, ktorý bude mapu obsahovať a premennú vymenovaného typu, ktorá nesie vlastnosti inicializačného nastavenia. Pre prehľadnosť teda môže volanie konstruktoru objektu mapy vyzerať nasledovne:

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

Vlastnosti teda budú vypísané zvlášť v deklarácii premennej. Všetko je ale opäť súčasťou funkcie initMap () ako sme si ukázali predchádzajúcom diele:

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

Niektoré užitočné vlastnosti

Teraz sa teda budeme venovať niektorým vlastnostiam podrobne:

• centier - je to jedna z dvoch povinných vlastností. Nastavuje počiatočné vycentrovanie mapy nad určitými súradnicami. Ako hodnotu očakáva typ LatLng (inštanciu tejto triedy), ktorý predstavuje zemepisnú šírku a dĺžku. Dá sa zapísať buď v podobe uvedenej vyššie na príklade, alebo obšírnejšie volaním konstruktoru google.maps.LatLng (). Latitude čiže zemepisná šírka v stupňoch nadobúda hodnoty (-90,90); Longitude, teda zemepisná dĺžka nadobúda hodnoty (-180,180).
• zoom - ďalšia z povinných vlastností. Povolené hodnoty sú závislé na druhu mapy. Nula predstavuje najväčší oddialenie. Pre defaultný mapu Roadmap je maximálny zoom level 21 (niekde sa uvádza, že 18 - vyskúšajte sami).
• mapTypeId - nastavuje typ základové mapy. Defaultne je nastavené na roadmap, čo je podkladová mapa, ktorá sa vám zobrazí, keď zapnete Google mapy. Ostatné vlastnosti sú: HYBRID - je to vlastne satelitná mapa, kde sú pomenované objekty,

  SATELLITE - klasická satelitná mapa ako ju poznáte z Google máp,

  TERRAIN - tu je zvýraznený predovšetkým horský reliéf a prírodné prvky. Voľby HYBRID a TERRAIN sú dostupné cez kontrolné prvok nastavenia podkladovej mapy (spravidla vľavo hore) doplnkovú voľbou Labels u satelitné mapy a Terrain u klasickej mapy.

• HYBRID - je to vlastne satelitná mapa, kde sú pomenované objekty,
• SATELLITE - klasická satelitná mapa ako ju poznáte z Google máp,
• TERRAIN - tu je zvýraznený predovšetkým horský reliéf a prírodné prvky. Voľby HYBRID a TERRAIN sú dostupné cez kontrolné prvok nastavenia podkladovej mapy (spravidla vľavo hore) doplnkovú voľbou Labels u satelitné mapy a Terrain u klasickej mapy.
• draggable, scrollwheel - šikovné vlastnosti, ktoré sú defaultne nastavené na hodnotu true, ak ich nastavíte na false, vypnete možnosť posúvanie mapy myšou a scrollovanie kolieskom. To sa môže dosť hodiť obzvlášť v situáciách, kedy užívateľ roluje stránku a nabehne myšou do oblasti mapy.
• minZoom, maxZoom - nastavím maximálne a minimálne možnej priblíženie (zoom level) mapy.

Vlastnosťou je samozrejme oveľa viac. Väčšinou súvisia s nastavením kontrolných (ovládacích) prvkov mapy, ktorým sa budeme venovať vzápätí. Kompletný zoznam a popis v angličtine nájdete samozrejme v referenciu: https://developers.google.com/...pt/reference

Ovládacie prvky mapy

Ovládacími prvkami mapy sa rozumejú všetky komponenty na mape, ktoré majú čo dočinenia so základným ovládaním dynamického okna mapy as ďalšími službami. Ide teda predovšetkým o možnosť približovanie a odďaľovanie, StreetView panáčika a prepínanie podkladovej mapy.

Počet, podoba a rozmiestnenie ovládacích prvkov na Google mapách sa niekoľkokrát menil. Ich podoba je tiež závislá na implementáciu mapy a zobrazovacom zariadení. Mohlo by vás preto zaskočiť, že na vami pridanej mape nie sú tie isté ovládacie prvky. Ak ste už vo skúmaní mapy boli trochu aktívny, možno ste zistili, že pri kliknutím pravým tlačidlom sa nezobrazuje ani klasické kontextové menu. Neľakajte sa, všetko je možné nastaviť, upraviť a dorobiť.

Na obrázku nižšie je podoba mapy s označenými základnými kontrolnými prvkami, ktorých opis je pod obrázkom. Podobu mapy môžete porovnať s http://maps.google.cz/. Takto vyzerá základný set pre API verzie 3.21. Pokus aj prajete pracovať so staršou verziou je nutné ju špecifikovať v parametri pripojenom za odkaz na skript:

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

Odporúčam verziu vždy špecifikovať!

1. MapType - slúži na prepínanie podkladovej mapy
2. Zobrazenie ulíc - všetkým známe, pretiahnite si panáčika, kam je libo
3. Zoom - približujte a odďaľujete. Hodí sa najmä, keď zakážete približovanie myšou.

Defaultný kontrolné prvky možno vypnúť nastavením vlastnosti disableDefaultUI na hodnotu true. Pre porovnanie takto vyzerá základný set ovládacích prvkov a ich rozmiestnenie pre verziu 3.21:

Ďalšími kontrolnými prvkami, ktoré je možné pridať sú:

• scaleControl - pridá Mierkové lištu. Veľmi užitočná vec. Osobne mi nie je jasné, prečo nie je súčasťou defaultného setu.
• rotateControl - umožní rotovať mapu o 90 stupňov. Prvok je ale dostupný len pre šikmé letecké snímky.
• overviewMapCon­trol - zobrazí Navigátor, čiže malú mapku, ktorú treba prípadne nastaviť k obrazu svojmu. Tento kontrolný prvok od verzie 3.22 nie je k dispozícii. V staršej verzii je mapka dostupná, ale defaultne je schovaná a otvorí sa malou sipecka v pravom dolnom rohu. Pozor, je ľahko k prehliadnutiu.

Samozrejme všetky kontrolné prvky sa dajú ďalej upravovať, existujú v mnohých variantoch a mutáciách. Úprava je možná cez príslušnú Options vlastnosť, takže napríklad: panControlOptions alebo rotateControlOp­tions. Jednou z vlastností je vždy vlastnosť position, ktorá špecifikuje, kde má byť prvok umiestnený. Možné pozície sú kombinácie: LEFT, RIGHT, CENTER, TOP a BOTTOM (viď obrázok nižšie).

Takže napríklad nastavenie kontrolného prvku MapTYpe môže vyzerať nasledovne:

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

Samozrejme kompletný referencie nielen ku kontrolným prvkom je dostupná:

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

Rovnako tak zoznam najdôležitejších zmien vo verzii 3.22. https://developers.google.com/...ontrols-diff

To je tentokrát všetko a nabudúce sa pozrieme na umiestňovanie bodov a obrazcov do mapy.