Značky a kreslenie do Google Maps

Obrázkové vrstvy

V tejto kapitole sa budeme venovať problematike vkladanie obrazových prvkov do mapy. Ide teda prevažne o známej Markery a ďalej rôzne ďalšie geometrické obrazce. Pre všetky tieto prvky existuje v angličtine súhrnné označenie Overlays, ktorého sa budeme naďalej držať.

Overlays chápeme ako objekty na mape (prekrývajúce základnú mapu), ktoré sú viazané k zemepisným súradniciam. V Google Maps API rozlišujeme nasledujúce:

• Marker - reprezentuje bod v mape, ktorému možno mu priradiť rôzny symbol. Môže teda ísť o reprezentáciu rôznych záujmových bodov s konkrétnou lokácií (významné miesta, reštaurácie, budovy, výškové kóty, ...)
• Polyline - jedná sa o skupinu rovných línií. Môžu reprezentovať typické líniové prvky, ako sú napríklad rieky alebo cesty.
• Polygon - polygóny reprezentujú vyjadrenie plošných javov v mape (územné celky, lesy, sídla, ...). Jedná sa vlastne o polyline, ktorá je však uzavretá a predstavuje tak mnohouholník.
• Circle a Rectangle - čiže kruh a obdĺžnik. Platí pre nich to čo pre Polygon, ale niekedy je vhodnejšie alebo dokonca žiaduce použiť niektorý z týchto tvarov. Kruhom môžeme napríklad reprezentovať obalové zóny, dosahy rôznych javov a podobne.
• Informačné okná - anglicky Info Windows. Jedná sa o trochu špeciálny prípad overlay. Je to vlastne kombinácia labelu (popisku) s Markér. Spoločné s Markér má to, že je vztiahnuté k jednému konkrétnemu bodu.
• Vlastné Overlays - v rámci istých obmedzení možno vytvárať aj iné ako tieto predpripravené Overlays.

Ku všetkým Overlays sa zaobchádza ako s objektom v JavaScripte. To znamená, že zakaždým vytvárame inštanciu príslušnej triedy. Tým sú buď priamo v konstruktoru, alebo neskôr, priradené určité vlastnosti, správanie a udalosti. O niektorých sa podrobnejšie zmienim pri jednotlivých prvkov. Prvým z nich bude Marker.

Marker

Marker si môžeme predstaviť ako také "ukazovátko" v mape, slúži nám na označenie určitého jedného miesta na mape a má nepreberne možných využití. Hlavnou výhodou je, že si marker môžete nastaviť vlastný symbol. Objekt čiže inštancie triedy google.maps.Marker disponuje naozaj mnohými metódami a vlastnosťami. Výpočet vlastností môžete špecifikovať priamo v konstruktoru, pričom iba vlastnosť position je povinná. Kompletný zoznam vlastností je k dispozícii v referenciu.

Predpokladajme, že máme napísanú inicializačnú funkciu a vytvorenú premennú máp, ktoré je priradený objekt triedy google.maps.Map (pozri minulé diely).

K tomu, aby bol Marker na mape zobrazený, je nutné vytvoriť inštanciu markery a priradiť ju požadované vlastnosti. Marker sa priradí mape buď priamo v inicializácii mapy alebo (a to je oveľa užitočnejšie) sa priradí objektu mapy neskôr pomocou funkcie setMap (). Oba spôsoby sú demonštrované nižšie.

1. priamo v tele funkcie initMap () (pre istotu ešte raz uvádzam aj s kódom inicializácia mapy), kedy Marker prepojíme s mapou už priamo v jeho definícii pomocou vlastnosti máp.

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

  var marker = new google.maps.Marker({
    position: {lat: 50.047871, lng: 15.770581},
    map: map
  });
}

1. Prepojenie s mapou prevedieme ex-post pomocou volanie funkcie setMap () napríklad vo funkcii spustenej na základe udalosti.

function mark(){
    var marker = new google.maps.Marker({
    position:{lat: 50.047871, lng: 15.770581}
    });
    marker.setMap(map);
}

Markery majú naozaj bohaté využitie. Ako bolo povedané, možno pre nich použiť inú ako defaultný ikonu. Ako ikonu možno použiť externý obrázok. V tom prípade je vlastnosť typu string a predstavuje cestu k súboru:

var marker = new google.maps.Marker({
    position:{lat: 50.047871, lng: 15.770581},
    map: map,
    icon: 'images/marker.png'
  });

Alternatívou je potom vlastnosti icon odovzdať objekt typu google.maps.Icon alebo google.maps.Symbol, kde možno okrem cesty k obrázku nastavovať aj veľkosť a ďalšie vlastnosti. Ďalšou zaujímavou možnosťou je nechať Marker animovať pomocou vlastnosti animation. Ako hodnotu potom očakáva konštantu naviazanú k triede google.maps.A­nimation. Existujú iba dve hodnoty a to BOUNCE a DROP. Marker potom môže vyzerať nasledovne:

var marker=new google.maps.Marker({
  position:myCenter,
map: map,
  animation:google.maps.Animation.BOUNCE
  });

Na markery rovnako ako na ďalší Overlays a objekty mapy všeobecne možno nadväzovať všemožné udalosti, o tých si povieme ale až nabudúce.

Polyline

Ako bolo napísané vyššie, polyline čiže línie predstavuje množinu úsečiek. Z toho vyplýva, že pre zakreslenie do mapy na rozdiel od markery potrebujeme viac ako jednu súradnicu. Podobne ako u markeru líniu vytvoríme ako objekt triedy google.maps. Polyline, ktorej kompletné referencie je opäť k dispozícii v referenciu

Z mnohých náväzných vlastností nás budú zaujímať predovšetkým vlastnosť path, kde špecifikujeme množinu bodov, ktorými línie prechádza. Ďalej potom vlastnosti, pomocou ktorých špecifikujeme vzhľadom línie teda: farbu, priehľadnosť a hrúbku. Deklarácia línie teda môže vyzerať nasledovne (opäť v tele funkcie initMap ()):

var flightPath = new google.maps.Polyline({
    path: [ {lat: 50.048526, lng: 15.770113},
            {lat: 50.048116, lng: 15.765970},
            {lat: 50.046635, lng: 15.766365},
            {lat: 50.046713, lng: 15.766016}],
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map
  });

Zaujímavosťou je vlastnosť geodesic, ktorá určuje, či má línie rešpektovať zakrivenie Zeme, čo sa prejaví, najmä u veľmi dlhých línií, kde zakrivenie hrá svoju rolu.

Polygón

Polygón má s líniu spoločné to, že k jeho vykreslenie je potreba množina súradníc. Rozdiel je v tom, že polygón je uzavretý obrazec reprezentujúci plošný útvar na mape, posledný súradnice je teda zhodná s tou prvou. Polygon disponuje ešte väčším množstvom nastaviteľných vlastností, pretože sa v podstate jedná o línii a plochu, ktorá línie obklopuje. Môžeme si vykresliť napríklad známy Bermudský trojuholník :

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    scaleControl:true,
streetViewControl:true,
overviewMapControl:true
  });

   var bermudaTriangle = new google.maps.Polygon({
    paths: [{lat: 25.774, lng: -80.190},
            {lat: 18.466, lng: -66.118},
            {lat: 32.321, lng: -64.757}],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FFFF00',
    fillOpacity: 0.45,
    map: map
  });
}

Ako si môžete všimnúť, na vytvorenie polygónu netreba uvádzať posledný bod, ktorý by bol zhodný s prvým, uzatváracie línia je doplnená automaticky.

Kruh

Kruh k svojmu vykreslenie potrebuje súradnicu svojho stredu a rádius predstavujúce polomer v metroch. Vykreslenie kruhu môže teda vyzerať nasledovne:

var kruh = new google.maps.Circle({
  center:{lat: 50.047871, lng: 15.770581},
  radius:200,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#00FFFF",
  fillOpacity: 0.5,
  map: map
});

Obdĺžnik

Obdĺžnik je k dispozícii až od verzie 3.22. Väčšina vlastností obdĺžnika je rovnaká alebo podobná ako u predchádzajúcich obrazcov. Rohy sú však špecifikované ako pole súradníc odovzdávané vlastnosti bounds a to napríklad nasledovne:

var ctverec = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 50.052,
      south: 50.047,
      east: 15.780,
      west: 15.770
    }
  });

Odporúčam použiť zápis súradníc pomocou literálov - kľúčových slov pre svetové strany, ako je uvedené v príklade.

Informačné okná

Informačné okná nás pomyselne vracia späť k Markerům. Práve na ne sú totiž viazané (ale nemusí). Metóda open () ako voliteľný atribút očakáva objekt, na ktorý je popisok viazaný.

var marker = new google.maps.Marker({
    position: {lat: 50.047871, lng: 15.770581},
    map: map
  });
    var infowindow = new google.maps.InfoWindow({
    content: "Popisek!"
  });
  infowindow.open(map,marker);

Informačné okno sa ale zaobíde aj bez ukotvenia:

var infowindow = new google.maps.InfoWindow({
    content: "Popisek!",
    position: {lat: 50.047871, lng: 15.770581}
  });
  infowindow.open(map);

Pre inšpiráciu je možné preskúmať príklady uvedené priamo na stránkach GOOG Developers.