Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Značky a kreslení do Google Maps

JavaScript Google API Značky a kreslení do Google Maps

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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


 

 

Článek pro vás napsal Miroslav Pásler
Avatar
Jak se ti líbí článek?
2 hlasů
Autor vyučuje programování a webové technologie na SŠIS Dvůr Králové. Současně vyučuje Geografické informační systémy na Univerzitě v Pardubicích, kde studuje doktorské studium. Autor se věnuje tvorbě webu, GIS, dálkovému průzkumu Země a umělé inteligenci
Miniatura
Všechny články v sekci
Google API
Miniatura
Následující článek
Google Apps Scripty - Kalendář
Aktivity (4)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!