Úvod do tvorby mapových aplikácií v Google Maps API

K čomu je to dobré?

Možnosť pridávania mapového poľa do obsahu webových stránok rastie na obľube. Cesta, ako to docieliť je pomerne jednoduchá. Dnes pre priemerného webového vývojárov teda nie je problém využiť služby ponúkané niekoľkých najpopulárnejšími prevádzkovateľovi mapových portálov, ako sú napríklad Google Maps a Mapy.cz.

V tejto sérii článkov sa zameriame na prácu s mapovým poľom poskytovaným skrze Google Maps API for JavaScript. Výhodou využitia takejto služby je, že sa nemusíte starať o programovaní základných funkcií, ako sú posun po mape, približovanie a podobne. Jedná sa o intuitívne, užívateľsky prívetivé a známe prostredie pre prácu s mapou na webe. Google Maps API však ponúka oveľa viac než len obyčajné vloženie mapy do obsahu stránok, počnúc vkladaním vlastných bodov, cez prispôsobovanie ovládacích prvkov až po animované presuny medzi lokáciami. Ovládnutie tohto nástroja sa teda môže stať nielen užitočným pomocníkom pri doplnení obsahu stránok o dynamickú mapu, ale možno využiť pre tvorbu komplexné a rozsiahle mapové aplikácie na celú variáciu tém.

Google Maps API a ako na to?

V júni 2005 bola spustená služba Google Maps API, za účelom poskytnúť vývojárom možnosť integrácie Google máp do obsahu ich webových stránok. Tiež bola vydaná prvá verzia Google Maps for JavaScript API. Počas rokov dochádzalo k drobným zmenám licencie spravidla s príchodom novej verzie. V súčasnej dobe pri verzii Google Maps JavaScript API v3 je nekomerčné využitie zadarmo s limitom 25 000 načítanie mapy za deň.

K praktickému použitiu je nutná iba predchádzajúca znalosť základov HTML, JavaScriptu a hodí sa všeobecné povedomie o princípoch objektovo orientovaného programovania. Všetky vedomosti môžete hravo získať napríklad prezretím príslušných tutoriálov na ITnetwork.cz. Ďalej pre praktické použitie bude nutné vlastniť Google účet (ale kto ho dnes nemá, že? ).

Hello Map!

Je dobrým programátorským zvykom začínať prvý program vypísaním dialógové hlášky "Hello World!". Na účely tohto seriálu bude vhodnejšie našu prvú aplikáciu pomenovať rovnako ako názov tejto kapitolky, teda: "Hello Map!". Úlohou bude prosté vloženie mapy do obsahu našich stránok so zameraním východiskové lokácia napríklad na naše bydlisko alebo obľúbené miesto.

Než sa do toho pustíme, je potrebné vyriešiť posledný drobný problém. Najmä pre kontrolu počtu zobrazení je nutné nechať si vygenerovať unikátny kľúč API_KEY. Tento kľúč neskôr použijeme ako súčasť odkazu, cez ktorý budeme mapu do stránok vkladať. Kľúč možno vygenerovať jednoduchým procesom na príslušnej stránke: https://developers.google.com/.../get-api-key. Tu je nutné využiť prihlásenie na Váš Google účet. Vygenerovaný kľúč bude zviazaný s konkrétnym projektom na Vašom účte. Môžete ho tiež zviazať s konkrétnou webovou stránkou, ktorá bude službu využívať. To je najmä bezpečnostné opatrenia a vykonáte ho vyplnením do kolónky "* Accept requests from these HTTP referrers (web sites) *". Výsledok vyzerá napríklad takto (samozrejme Vy ho uvidíte bez zatmavenými znakov):

Teraz už nič nebráni tomu, aby sme vložili mapové pole do našich stránok. Vytvoríme alebo máme vytvorenú základnú štruktúru HTML stránky (odporúčam použiť doctype HTML5 štandardu). V tele stránky vytvoríme oddiel pre mapu pomocou tagu <div> a nastavíme mu príslušné id. Oddiel zatiaľ nebude mať žiadny vopred definovaný obsah, len si vytvárame miesto o ktorom, neskôr prehlásime: "Sem načítaj mapu."

<div id="map"></div>

Mape môžeme nastaviť konkrétnu podobu pomocou kaskádových štýlov napríklad nasledovne:

<style type="text/css">
    #map {  width:500px;
        height:380px; }
</style>

Ďalej do stránky vložíme odkaz na externý skript, ktorý obsahuje API pre JS. Namiesto API_KEY uveďte Váš vygenerovaný kľúč.

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

Nakoniec je potrebné pomocou skriptu mapu inicializovať. K tomu slúži kód uvedený nižšie:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 50.047871, lng: 15.770581},
    zoom: 16
  });
}

Ak vám nie je blízka práca s objektmi v JavaScripte, nevešajte hlavu. Na účely tohto seriálu postačí vedieť, že funkcia (konštruktor) Map () triedy Map očakáva ako argumenty jednak oddiel, ktorý bude mapové pole obsahovať (tu odovzdaný pomocou getElementById ()) a inicializačné parametre mapy (tu odovzdané ako objekt v podobe zoznamu parametrov) . V našom príklade sú povinné iba dva a to nastavenie miesta, kam bude mapa vycentrovaná a úrovne priblíženia.

Lokáciu, kam bude mapa vycentrovaná, nastavíme pomocou atribútu centier, čo je objekt typu súradnice. Pomocou atribútu lat (z angl. Latitude) nastavujeme zemepisnú šírku a pomocou lng (z angl. Longitude) zemepisnú dĺžku. V tomto prípade sú údaje v desatinných stupňoch. Spôsobov ako odovzdať parameter vycentrovanie mapy je viac a principiálne sa v podstate nelíši. Tento spôsob je uvedený priamo na stránkach s pokynmi od Googlu. Úroveň priblíženia je pomerne intuitívne. Nastavuje sa pomocou atribútu zoom. Väčšie číslo znamená väčšie priblíženie čiže mapu väčšieho merítka.

Výsledok môže vyzerať nasledovne:

A to je pre tentokrát všetko. Možností, ako výsledok prispôsobiť je veľká rad a Google Maps API je celkom bohaté. Nabudúce sa bližšie pozrieme na možnosti základného nastavenia mapy, súradníc a typov mapy.

A ak v texte márne hľadáte spomínané "Hello máp!" Môžete si ich pridať do tela funkcie initMap () napríklad takto:

function initMap () {
alert("Hello Map!");
…
}

A to už je naozaj všetko