Původně jsem to chtěl nazvat nějak úderněji, jako třeba „Jak pracovat s Google Maps“, „Google Maps a jak na ně“ nebo „Tipy a triky s Google Maps“. No a pak jsem se kouknul, co s nimi vlastně umím a raději to nazval tak nějak normálně, abych nebyl za hvězdu, když toho zas tolik neumím. Pro ty, kteří rázem ztratili zájem alespoň pár odkazů – popis API, krásně udělaný tutorial se spoustou příkladů a ve finále použití automatického programu pro rozházení fotografií na správná místa na mapě (ve spojení s GPS).
Je to už pár týdnů (možná měsíců), co jsem se rozhodl Google Maps zaintegrovat do článků na těchto stránkách a trochu jsem si s tím hrál. No a teď nastal čas se pochlubit s tím, jak je snadno zaintegrovat i do jiných stránek. Metod je totiž více, od těch jednoduchých po ty složitější až po ty dokonalé.
My Maps
Tato možnost je asi ta úplně nejjednodušší – v Google Maps si může každý uživatel, který má Google účet, vytvářet svoje vlastní mapy, které mohou být jak veřejné tak privátní (ty veřejné snad Google umožňuje prohledávat, ale jinak je výsledek stejný). Takže se stačí přihlásit, přepnout se na záložku My Maps, vytvořit si novou mapu a kreslit si čáry nebo celé plochy a přidávat body. Všechno umožňuje mít vyskakovací okno s popiskem, který může být jak pouze textový, tak dokonalé HTML, do kterého si napíšete cokoliv chcete. No a pokud chcete odkaz na mapu přidat na svoje stránky, tak vpravo nahoře je odkaz „Link to this page“, jeho adresu si zkopírujete a vložíte kamkoliv chcete. Jednoduché, rychlé a funkční, jediná nevýhoda asi je, že nemůžete odkázat na konkrétní bod (nebo minimálně nevím jak na to).
KML soubor
Druhá možnost je o fous složitější, pořád může využívat My Maps, ale dá se použít i pro automatické generování bodů na mapě. Google totiž umožňuje zpracovat informace z KML souborů. Tohle je věc, kterou používám i já – v My Maps si napíchám body, kde je chci mít, uložím KML (pomocí odkazu KML v My Maps) a toto KML upravím jak potřebuji – ručně si dopíšu texty, přeházím si to do jednoho souboru a uložím na server. Použití KML souboru má totiž jednu zásadu – musí být dostupný na internetu pro servery Google. A má jednu výhodu – Google tyhle soubory indexuje, takže díky nim můžete zlepšit informací z vašich stránek. Vlastní použití KML souboru má pak opět jednodušší a složitější variantu (o té více v části s programováním). Ta jednodušší je prosté – informace o poloze KML souboru se přidá do odkazu.
http://maps.google.com/maps?f=q&hl=cs&geocode=& q=http:%2F%2Fmartinhumpolec.cz%2Fmapa.kml&ie=UTF8& ll=-33.858442,151.185608&spn=0.161937,0.376282&z=12&om=1
V odkazu je spousta hloupostí, ale ten důležitý parametr je q=, ve kterém se specifikuje cesta k souboru. Parametr ll= podle všeho specifikuje střed mapy a z= bude pro měřítko.
Programování
„Poslední“ možností je programování pomocí API. Jak jsem postupně zjistil, tak to není tak hrozné, i když ze začátku jsem se toho dost obával. Krok první je registrace – každý kdo chce používat Google API se musí zaregistrovat a API funkce budou fungovat pouze na doméně, kterou specifikoval při registraci. Pak už je to jednoduché – Google doporučuje strukturu hlavičky stránky, tedy jeden předdefinovaný styl, správný DOCTYPE, připojení JavaScriptu a vytvoření vrstvy, ve které bude mapa.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <style type="text/css"> v:* {
behavior:url(#default#VML); </style> <script src="http://maps.google.com/maps?file=api&v=2&key=přidělený API klíč"
type="text/javascript"></script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 800px; height: 600px; background: #565656;"></div> </body> </html>
No a pak už se píší jenom vlastní JavaScript funkce, které zajišťují práci s mapou. A tady začíná to pravé kouzlo, funkcí je tuna, každá slouží k jinému účelu a najít ty nejlepší chvíli trvá. Takže co používám já.
<script type="text/javascript"> function load() {
if (GBrowserIsCompatible()) { // create the map in div named map
var map = new GMap2(document.getElementById("map")); //add controls for control map and switching its type
map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); //set center of map and zoom level
map.setCenter(new GLatLng( 151.254318,-33.898293), 9); //here starts the interesting part - read and publish data from KML
var geoXml = new GGeoXml("https://martinhumpolec.cz/mapa.kml"); map.addOverlay( geoXml); } // end of GBroserIsCompatible
} // end of load </script>
Tak to je úplný základ – vypublikuje data z KML souboru. A také je to doporučená cesta, pokud máte hodně bodů, které chcete na mapu přidat, tak je přidávat pomocí KML, prý je to méně náročné, než přidávání každého jednotlivého bodu pomocí JS. Další možností je přidávání každého bodu samostatně.
//define point's position
var point = new GLatLng(latitude, langtitude); var marker = new GMarker(point); //add function, which opens window when you'll click on point
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml( "Some HTML text should be here"); //finally add point to map
map.addOverlay(marker);
V téhle souvislosti člověk ještě může použít třídu GIcon, která slouží pro definici ikony, která se má použít pro konkrétní bod. Její použití nemusí být až tak jednoduché, protože parametrů je opravdu hodně, ale dá se.
var icon = new GIcon(); //picture definition icon.image = "http://www.google.com/mapfiles/marker.png"; //shadow picture definition icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; //size icon.iconSize = new GSize(20, 34); icon.shadowSize = new GSize(37, 34); //and where the anchors will be icon.iconAnchor = new GPoint(9, 34); icon.infoWindowAnchor = new GPoint(9, 2); icon.infoShadowAnchor = new GPoint(18, 25);
Zbývají dvě hezké věci – posouvání mapy a hledání bodu, kterého nevíme souřadnice. Posouvání mapy je hloupost, ale dá se použít třeba na simulaci jízdy po mapě.
//slide with map
map.panTo(new GLatLng(37.4569, -122.1569)); //look for specific address
geo.getLocations( "Václavské náměstí 50, Praha", function (result) var p = result.Placemark[0].Point.coordinates; var marker = new GMarker(new GLatLng(p[1],p[0])); map.addOverlay(marker); // centre the map on the first result
var p = result.Placemark[0].Point.coordinates; map.setCenter(new GLatLng(p[1],p[0]),14);
To všechno je samozřejmě bez jakéhokoliv ošetřování chyb. A ještě jedna poslední zajímavá věc – GMarkerManager. Ten slouží k tomu, že zobrazuje body podle toho, jak moc je mapa přiblížená. Když je tedy hodně daleko, tak zobrazí bod jeden a jak se postupně přibližujete k mapě, tak zobrazuje bodů víc a víc. Velice efektní a prý skvělé pro výkon, že se toho na začátku nemusí kreslit moc.
Pokud jste dočetli až sem, tak zpět na začátek – tutorial totiž opravdu stojí za to a ukáže snad všechny triky, které s tím jdou dělat.
Těžko takto radit, to se musí vidět 🙂
Link na Tutorial nefunguje naprimo, sice se pres nej doklikas, ale pres jednu 404 🙂 Kdyztak si ho updatni.
Odkazů na cizí stránky, které nefungují, je tady pár set, takže jsem se rozhodl je ignorovat – když to chlapci neumí správně přesměrovat, tak mají smůlu 🙂 Ale stejně díky za upozornění.