Značky a kreslení do Google Maps

Obrázkové vrstvy

V této kapitole se budeme věnovat problematice vkládání obrazových prvků do mapy. Jedná se tedy převážně o známé Markery a dále různé další geometrické obrazce. Pro všechny tyto prvky existuje v angličtině souhrnné označení overlays, kterého se budeme nadále držet.

Overlays chápeme jako objekty na mapě (překrývající základní mapu), které jsou vázány k zeměpisným souřadnicím. V Google Maps API rozlišujeme následující:

• Marker - reprezentuje bod v mapě, kterému lze mu přiřadit různý symbol. Může se tedy jednat o reprezentaci různých zájmových bodů s konkrétní lokací (významná místa, restaurace, budovy, výškové kóty,…)
• Polyline – jedná se o skupinu rovných linií. Mohou reprezentovat typické liniové prvky, jako jsou například řeky nebo silnice.
• Polygon – polygony reprezentují vyjádření plošných jevů v mapě (územní celky, lesy, sídla,…). Jedná se vlastně o Polyline, která je však uzavřená a představuje tak mnohoúhelník.
• Circle a Rectangle – neboli kruh a obdélník. Platí pro ně to co pro Polygon, ale někdy je vhodnější nebo dokonce žádoucí použít některý z těchto tvarů. Kruhem můžeme například reprezentovat obalové zóny, dosahy různých jevů a podobně.
• Informační okna – anglicky Info Windows. Jedná se o trochu speciální případ overlay. Je to vlastně kombinace labelu (popisku) s Markerem. Společné s Markerem má to, že je vztaženo k jednomu konkrétnímu bodu.
• Vlastní overlays – v rámci jistých omezení lze vytvářet i jiné než tyto předpřipravené overlays.

Ke všem Overlays je přistupováno jako k objektům v JavaScriptu. To znamená, že pokaždé vytváříme instanci příslušné třídy. Těm jsou buď přímo v konstruktoru, nebo později, přiřazeny určité vlastnosti, chování a události. O některých se podrobněji zmíním u jednotlivých prvků. Prvním z nich bude Marker.

Marker

Marker si můžeme představit jako takové "ukazovátko" v mapě, slouží nám k označení určitého jednoho místa na mapě a má nepřeberně možných využití. Hlavní výhodou je, že si Markeru můžete nastavit vlastní symbol. Objekt neboli instance třídy google.maps.Marker disponuje opravdu mnoha metodami a vlastnostmi. Výčet vlastností můžete specifikovat přímo v konstruktoru, přičemž pouze vlastnost position je povinná. Kompletní výčet vlastností je k dispozici v referenci.

Předpokládejme, že máme napsanou inicializační funkci a vytvořenou proměnnou map, které je přiřazen objekt třídy google.maps.Map (viz minulé díly).

K tomu, aby byl Marker na mapě zobrazen, je nutné vytvořit instanci Markeru a přiřadit ji požadované vlastnosti. Marker se přiřadí mapě buď přímo v inicializaci mapy anebo (a to je mnohem užitečnější) se přiřadí objektu mapy později pomocí funkce setMap(). Oba způsoby jsou demonstrovány níže.

1. přímo v těle funkce initMap() (pro jistotu ještě jednou uvádím i s kódem inicializace mapy), kdy Marker propojíme s mapou již přímo v jeho definici pomocí vlastnosti map.

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
  });
}

2. Propojení s mapou provedeme ex-post pomocí volání funkce setMap() například ve funkci spuštěné na základě události.

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

Markery mají opravdu bohaté využití. Jak bylo řečeno, lze pro ně použít jinou než defaultní ikonu. Jako ikonu lze použít externí obrázek. V tom případě je vlastnost typu string a představuje cestu k souboru:

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

Alternativou je pak vlastnosti icon předat objekt typu google.maps.Icon nebo google.maps.Symbol, kde lze kromě cesty k obrázku nastavovat i velikost a další vlastnosti. Další zajímavou možností je nechat Marker animovat pomocí vlastnosti animation. Jako hodnotu pak očekává konstantu navázanou k třídě google.maps.A­nimation. Existují pouze dvě hodnoty a to BOUNCE a DROP. Marker pak může vypadat následovně:

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

Na markery stejně jako na další overlays a objekty mapy obecně lze navazovat všemožné události, o těch si povíme ale až příště.

Polyline

Jak bylo napsáno výše, Polyline neboli linie představuje množinu úseček. Z toho vyplývá, že pro zakreslení do mapy na rozdíl od Markeru potřebujeme více než jednu souřadnici. Podobně jako u markeru linii vytvoříme jako objekt třídy google.maps. Polyline, jejíž kompletní reference je opět k dispozici v referenci

Z mnoha návazných vlastností nás budou zajímat především vlastnost path, kde specifikujeme množinu bodů, jimiž linie prochází. Dále pak vlastnosti, pomocí nichž specifikujeme vzhledem linie tedy: barvu, průhlednost a tloušťku. Deklarace linie tedy může vypadat následovně (opět v těle funkce 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
  });

Zajímavostí je vlastnost geodesic, která určuje, zda má linie respektovat zakřivení Země, což se projeví, zejména u velmi dlouhých linií, kde zakřivení hraje svou roli.

Polygon

Polygon má s linii společné to, že k jeho vykreslení je potřeba množina souřadnic. Rozdíl je v tom, že polygon je uzavřený obrazec reprezentující plošný útvar na mapě, poslední souřadnice je tedy shodná s tou první. Polygon disponuje ještě větším množstvím nastavitelných vlastností, protože se v podstatě jedná o linii a plochu, jež linie obklopuje. Můžeme si vykreslit například známý Bermudský trojúhelní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
  });
}

Jak si můžete povšimnout, k vytvoření polygonu není třeba uvádět poslední bod, který by byl shodný s prvním, uzavírací linie je doplněna automaticky.

Kruh

Kruh ke svému vykreslení potřebuje souřadnici svého středu a rádius představující poloměr v metrech. Vykreslení kruhu může tedy vypadat následovně:

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élník

Obdélník je k dispozici až od verze 3.22. Většina vlastností obdélníku je shodná nebo podobná jako u předchozích obrazců. Rohy jsou však specifikovány jako pole souřadnic předávané vlastnosti bounds a to například následovně:

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
    }
  });

Doporučuji použít zápis souřadnic pomocí literálů - klíčových slov pro světové strany, jak je uvedeno v příkladu.

Informační okna

Informační okna nás pomyslně vrací zpět k Markerům. Právě na ně jsou totiž vázány (ale nemusí). Metoda open() jako volitelný atribut očekává objekt, na který je popisek vázán.

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 se ale obejde i bez ukotvení:

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

Pro inspiraci je možné prozkoumat příklady uvedené přímo na stránkách Googe Developers.

V další lekci, Úvod do Google Apps Script, se seznámíme se základy Google Apps Script a napíšeme si svou první funkci.