Jak pracuji s Google Maps
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("http://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.
Technorati: Nezařaditelné
Jak pracuji s Google Maps
Dobrý den, nemáte ponětí kde získat info k možnosti zobrazit vlastní fotografii pomoci Google maps jako např zde:
Jak pracuji s Google Maps
Tu fotografii co je součástí té mapy? To by mělo být celkem jednoduché a měla by se použít třída GTileLayerOverlay ( http://code.google.com/apis/maps/documentation/reference.html#GTileLayerOverlay )
Jak pracuji s Google Maps
odkaz uz nefunguje({ Link })
Re: Jak pracuji s Google Maps
Díky za upozornění, nějak se ztratil v průběhu přesunu na jiný server. Správná adresa je { Link }
Jak převést souřadnice?
Dobrý den,
poradíte mi prosím, jak převedu souřadnice typu 49°38'13.26"N,13°9'15.64"E na požadovaný typ 151.203644,-33.879848?
Díky
jf
Re: Jak pracuji s Google Maps
Tady bude asi odpověď - { Link }
Jak pracuji s Google Maps
dobrý den. chtěl poprosit o radu, v používání picasy i panoramio jsem úplný začátečník, ale chtěl bych přidat nějaké své fotografie do google maps. a to tak, abych je bylo vidět nejen v My Maps, ale i při otevření obyčejných map na google. Existuje na to nějaký jednoduchý postup? Předem dík za odpověď. kuba.schon@gmail.com
Re: Jak pracuji s Google Maps
Skoro bych se obával, že je sám nepřidáš, ale musí být vybrány Googlem. Více na { Link }
Prosba
Prosím dělám práci ohledně vinic a chci tam mít obrázky nejznámějších (českých) vinic které jdou vidět z google maps, ale co jsem zatím z internetu pochopil tak není možné tyto mapy použít ani v případě, že bych samozřejmě uvedl zdroj. Takže v tomto směru jsou google mapy asi tabu že?? předem děkuji za odpověď v tomto se moc neorientuji a tak mi každá rada pomůže.
Jak pracuji s Google Maps
Ahoj, chtěl bych poprosit o radu jak přidávat další kategorie do Google maps?
Mě by se třeba hodilo přihodit v kategorii doprava nebo cestování podkategorii něco jako kempy a stání pro obytná auta. Jsme celkem velká komunita a stále se dokola ptáme na kempy tam a tam.
Vkládali bychom si tam pak sami značky a přidávali aktuální recenze. Google maps už hodně používáme na plánování cest
Díky za odpovvěď