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).

">
 
Vyhledávání:

Jak pracuji s Google Maps

Translate into English | 8. 8. 2007 | Kategorie: Nezařaditelné, | Komentáře: 10

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:

10 Komentáře

  1. Gravatar ImageMartin Hrdlička web (23.08.2007 23:13)
    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:

  2. Gravatar ImageMartin (24.08.2007 21:15)
    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 )

  3. Gravatar Imagectenar (26.02.2011 22:10)
    Jak pracuji s Google Maps

    odkaz uz nefunguje({ Link })

  4. Gravatar ImageMartin (27.02.2011 21:12)
    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 }

  5. Gravatar Imagejf web (24.03.2011 10:37)
    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

  6. Gravatar ImageMartin (24.03.2011 17:38)
    Re: Jak pracuji s Google Maps

    Tady bude asi odpověď - { Link }

  7. Gravatar ImageJakub (11.07.2011 20:53)
    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

  8. Gravatar ImageMartin (12.07.2011 09:24)
    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 }

  9. Gravatar ImageJan (07.10.2011 20:08)
    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.

  10. Gravatar ImageAndrej (12.04.2013 16:35)
    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ěď

Zanech komentář

Martin Humpolec

Martin Humpolec


Poslední komentáře




   Hosted by Prominic.NET

Došli jste na konec, ale to neznamená, že nemůžete pokračovat někam dál. Můžete se podívat na další stránky v kategorii, která vás zajímá:

nebo naopak si články prohlížet podle období, ve kterém byly napsány. Nabízí se také sledování mého Twitteru; obecných článků jinde, které mě zaujaly nebo zajímavých článků o Lotus Notes od jiných autorů. Nebo úplně nejlépe - jděte se podívat na mé fotografie.

Díky za návštěvu

The postings on this website are my own personal opinion and are not representative of the views of COMPAREX.

Copyright 2001-2014 Martin Humpolec