Úvod do tvorby mapových aplikací v Google Maps API

K čemu je to dobré?

Možnost přidávání mapového pole do obsahu webových stránek roste na oblibě. Cesta, jak toho docílit je poměrně snadná. Dnes pro průměrného webového vývojáře tedy není problém využít služeb nabízených několika nejpopulárnějšími provozovateli mapových portálů, jako jsou například Google Maps a Mapy.cz.

V této sérii článků se zaměříme na práci s mapovým polem poskytovaným skrze Google Maps API for JavaScript. Výhodou využití takové služby je, že se nemusíte starat o programování základních funkcí, jako jsou posun po mapě, přibližování a podobně. Jedná se o intuitivní, uživatelsky přívětivé a známé prostředí pro práci s mapou na webu. Google Maps API však nabízí mnohem více než jen pouhé vložení mapy do obsahu stránek, počínaje vkládáním vlastních bodů, přes přizpůsobování ovládacích prvků až po animované přesuny mezi lokacemi. Ovládnutí tohoto nástroje se tedy může stát nikoli pouze užitečným pomocníkem při doplnění obsahu stránek o dynamickou mapu, ale lze využít pro tvorbu komplexní a rozsáhlé mapové aplikace na celou variaci témat.

Google Maps API a jak na to?

V červnu roku 2005 byla spuštěna služba Google Maps API, za účelem poskytnout vývojářům možnost integrace Google map do obsahu jejich webových stránek. Také byla vydána první verze Google Maps for JavaScript API. Během let docházelo k drobným změnám licence zpravidla s příchodem nové verze. V současné době při verzi Google Maps JavaScript API v3 je nekomerční využití zdarma s limitem 25 000 načtení mapy za den.

K praktickému použití je nutná pouze předchozí znalost základů HTML, JavaScriptu a hodí se obecné povědomí o principech objektově orientovaného programování. Všechny znalosti můžete hravě získat například projitím příslušných tutoriálů na ITnetwork.cz. Dále pro praktické použití bude nutné vlastnit Google účet (ale kdo ho dnes nemá, že? ).

Hello Map!

Je dobrým programátorským zvykem začínat první program vypsáním dialogové hlášky „Hello World!“. Pro účely tohoto seriálu bude vhodnější naši první aplikaci pojmenovat stejně jako název této kapitolky, tedy: „Hello Map!“. Úkolem bude prosté vložení mapy do obsahu našich stránek se zaměřením výchozí lokace například na naše bydliště nebo oblíbené místo.

Než se do toho pustíme, je třeba vyřešit poslední drobný problém. Zejména pro kontrolu počtu zobrazení je nutné nechat si vygenerovat unikátní klíč API_KEY. Tento klíč později použijeme jako součást odkazu, přes který budeme mapu do stránek vkládat. Klíč lze vygenerovat jednoduchým procesem na příslušné stránce: https://developers.google.com/…/get-api-key. Zde je nutné využít přihlášení na Váš Google účet. Vygenerovaný klíč bude svázán s konkrétním projektem na Vašem účtu. Můžete ho také svázat s konkrétní webovou stránkou, která bude službu využívat. To je zejména bezpečnostní opatření a provedete ho vyplněním do kolonky „*Accept requests from these HTTP referrers (web sites)*“. Výsledek vypadá například takto (samozřejmě Vy ho uvidíte bez zatmavených znaků):

Nyní už nic nebrání tomu, abychom vložili mapové pole do našich stránek. Vytvoříme nebo máme vytvořenou základní strukturu HTML stránky (doporučuji použít doctype HTML5 standardu). V těle stránky vytvoříme oddíl pro mapu pomocí tagu <div> a nastavíme mu příslušné id. Oddíl zatím nebude mít žádný předem definovaný obsah, pouze si vytváříme místo o kterém, později prohlásíme: „Sem načti mapu.“

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

Mapě můžeme nastavit konkrétní podobu pomocí kaskádových stylů například následovně:

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

Dále do stránky vložíme odkaz na externí skript, který obsahuje API pro JS. Místo API_KEY uveďte Váš vygenerovaný klíč.

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

Nakonec je třeba pomocí skriptu mapu inicializovat. K tomu slouží kód uvedený níže:

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

Pokud vám není blízká práce s objekty v JavaScriptu, nevěšte hlavu. Pro účely tohoto seriálu postačí vědět, že funkce (konstruktor) Map() třídy Map očekává jako argumenty jednak oddíl, který bude mapové pole obsahovat (zde předán pomocí getElementById()) a inicializační parametry mapy (zde předané jako objekt v podobě seznamu parametrů). V našem příkladu jsou povinné pouze dva a to nastavení místa, kam bude mapa vycentrována a úrovně přiblížení.

Lokaci, kam bude mapa vycentrována, nastavíme pomocí atributu center, což je objekt typu souřadnice. Pomocí atributu lat (z angl. latitude) nastavujeme zeměpisnou šířku a pomocí lng (z angl. longitude) zeměpisnou délku. V tomto případě jsou údaje v desetinných stupních. Způsobů jak předat parametr vycentrování mapy je více a principiálně se v podstatě neliší. Tento způsob je uveden přímo na stránkách s pokyny od Googlu. Úroveň přiblížení je poměrně intuitivní. Nastavuje se pomocí atributu zoom. Větší číslo znamená větší přiblížení neboli mapu většího měřítka.

Výsledek může vypadat následovně:

A to je pro tentokrát vše. Možností, jak výsledek přizpůsobit je velká řada a Google Maps API je celkem bohaté. Příště se blíže podíváme na možnosti základního nastavení mapy, souřadnic a typů mapy.

A pokud v textu marně hledáte zmiňované „Hello map!“ můžete si je přidat do těla funkce initMap() třeba takto:

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

A to už je opravdu vše