Návod na zabudování Google maps do vašich stránekJavaScript

28.08.07 | Komentáře: 34 | Trvalý odkaz

Pokud chcete používat Google maps na svých stránkách – například pro zobrazení několika poboček na firemním webu – musíte využít Google Maps API (další – jednodušší – možností je použít iframe s odkazem na Google maps, ale o tom tento článek není). A aby to nebylo tak jednoduché, tak k práci s Google Maps API potřebujete Google Maps API Key, o který musíte zažádat na webu Google Maps

Klíč je použitelný pouze na předem určené doméně a v předem určeném adresáři, proto musíte tuto cestu vyplnit ve své žádosti. To je také důvod, proč vám nebude níže uvedený ukázkový kód fungovat, pokud si jej zkopírujete na lokální disk, či jiný web – abyste jej rozchodili jinde, musíte přepsat Google Maps API Key ve zdrojáku na jiný, který byl vygenerován pro danou doménu a adresář. Aha, tak na lokále to fungovat bude, teď jsem to zkoušel.

K dalšímu postupu se vám budou hodit následující stránky:

Výsledek mé snahy vypadá takto: Online ukázka »

Nalevo jsou odkazy, když se na ně klikne, zazoomuje se mapa na příslušný hotel a zobrazí se jeho fotografie.

Informace pro mapu jsou uloženy v XML souboru data2.xml:

<?xml version="1.0" encoding="utf-8"?>
<hotels>
  <hotel
    lat="50.087662"
    lng="14.423784"
    label="Hotel U Zlatého jelena"
    image="u-zlateho-jelena.jpg"
    url="http://www.hotel-u-zlateho-jelena.cz/cz-index.php" />
  <hotel
    lat="50.07082360418433"
    lng="14.442579746246338"
    label="Pension Beetle"
    image="pension-beetle.jpg"
    url="http://www.pension-beetle.cz/cz-index.php" />
  <hotel
    lat="50.08458"
    lng="14.416553"
    label="Hotel U Červené Židle"
    image="u-cervene-zidle.jpg"
    url="http://www.beetle-tour.cz/cz-red-chair-pension.php" />
</hotels>

Jak vidíte, obsahují souřadnice bodu na mapě, popisku bodu, název obrázku a adresu stránek hotelu.

Jak získat přesné souřadnice z mapy?

Nejjednodušší je použití Google Maps a do vyhledávacího políčka zadat hledanou adresu – např. „Václavkova 169“. Pak stačí jen použít souřadnice z odkazu „Link to this page“ v pravém horním rohu:

http://maps.google.com/maps?
f=q&
hl=en&
geocode=&
q=V%C3%A1clavkova+169&
sll=50.097597,14.399235&
sspn=0.00724,0.010428&
ie=UTF8&
ll=50.097597,14.399235&
spn=0.00724,0.010428&
z=16&
iwloc=cent&
om=1

Přičemž nás zajímá parametr ll=50.097597,14.399235, který obsahuje ty pravé souřadnice. Rychlejší způsob je použití JavaScriptu – stačí zadat do políčka prohlížeče pro zadání URL tento kód:

javascript:void(prompt('',gApplication.getMap().getCenter()));

A prohlížeč sám vypíše souřadnice (via článek na syslog.eu).

Vlastní kód stránky

Zbytek je obsažen v kódu stránky, kde se mapa při načtení inicializuje, načte se XML s daty a podle něj se vytvoří příslušné značky na mapě. Vše je ve zdrojovém kódu ukázky přehledně okomentované, proto už to nebudu dále rozepisovat.

Google mapy lze díky jejich API krásně upravovat, přidávat další funkcionality, kreslit na ně různé trasy, přidávat značky, fotky, propojovat s dalšími aplikacemi. Ukázka představuje jen zlomek toho, co ve skutečnosti umí a doufám že vám dobře poslouží k vašim prvním pokusům. A pokud už jste s Google Maps něco vytvořili, přihoďte odkaz, ať se i ostatní můžou pokochat a přiučit.

Ulož odkaz na: del.icio.us | linkuj.cz | jagg.cz | vybrali.sme.sk

Související články

Komentáře

Petře, moc pěkně popsané, určitě už brzo někde použiju.

— Tomáš Halada 28 08 2007 - 12:13 #
Díky, hezky popsané. Jinak nevíte jak by šlo pracovat s Google API také pro polygony, nejen s body? Například pro vymezení určitého území, pokrytí signálem atd…

— Petr Kovařík 28 08 2007 - 14:14 #
[2] To není nic těžkého – stačí se podívat do dokumentace: http://www.google.com/…cumentation/#… tady je příklad na vložení lomené čáry, polygon bude to samé, jen se použije trochu jiná funkce, viz reference

— Petr Václavek 28 08 2007 - 14:18 #
AMapy.cz mají podobné API, ale méně se toho načítá, je to rychlejší, a hlavně kompletně česky:

http://radekhulan.cz/…-s-amapy-api

— Radek Hulán 28 08 2007 - 15:19 #
[4] No jo, ale AMapy umí jen Evropu a ani nevím, zda to umí v angličtině :( a pak taky Google Maps toho umí trochu více.

Možná pokud bych potřeboval dostat na web pobočky v České Republice, tak by mapy od Atlasu byly lepší, ale pokud se jedná o mezinárodní web, tak Google je jasná volba.

— Petr Václavek 28 08 2007 - 15:51 #
Hm. Příklad je na „mapa hotelů v Praze s adresami“, což je Evropa ;-)

— Radek Hulán 28 08 2007 - 16:56 #
S googlima mapama se daji delat temer zazraky. Kdysi jsem to pouzil na rozsireni moznosti sveho webu a zobrazuji odkazy na webove kamery primo na mape. (viz http://www.webcams.cz/webcams_map.php ) Amapy sice podobne api maji, ale preci jen je o nejaky ten rok mladsi. A meli se myslim kde inspirovat. V dobe kdy jsem si s googlima mapama hral nebyla jina moznost.

— Petr 28 08 2007 - 17:40 #
[6] No to máš recht, ale to jsem dělal jen jako velmi jednoduchou ukázku pro tento blog. Do tajů Google Maps jsem zabřednul při budování jiné aplikace pro mezinárodní společnost, ve které pracuji. Až bude výsledek hotov, zmíním se i tady na blogu (včetně odkazu). Plánuji do mapy dát asi 100 značek, tak jsem zvědav, jak to bude šlapat + propojení na náš vlastní systém.

[7] Na tento web jsem při hledání informací o Google mapách taky narazil. Skvělá práce!

— Petr Václavek 28 08 2007 - 21:06 #
[7] hmm tak to se mi líbí… ona se mi práce s takovým pěkným api líbí, ale taky co z toho vyrobit že… ? :)

— marek 29 08 2007 - 19:43 #
[9] Pro inspiraci třeba tohle: http://3dtour.cz – moc pěkný mash-up postavený na GMaps. Nejsem si jistý (viz [4]), jestli by podobný web šel postavit nad AMapy, nehledě na mezinárodní záběr.

— Ronaldino 30 08 2007 - 07:02 #
[9] Jo to je vždy největší potíž. Sehnat data která vlastně chci nebo potřebuji smysluplně zobrazit. Návodů už pak je na netu spousta :) (rozhodně tím nechci takovéto články zlehčovat, právě naopak). Další drobný mash-up (jestli se to tak dá vůbec nazvat) je MApa MOdelářských LOkalit, kterou jsem dělal pro RC autíčkáře (http://www.mamolo.com). [10]já bych si tipnul, že šlo. Ta googlí mapa je tam stejně jen na zobrazení bodu na mapě. A to uměj obě api :)

— Petr 30 08 2007 - 07:49 #
Moje zkušenost je, že z lokálního disku a stejně tak při přístupu skrze http://localhost mapy fungují nehledě na klíč.

Pro přesnější odečítání zeměpisné polohy si lze přidat posuvný ukazatel, pro ladicí účely mám jeden na http://telefony.vscht.cz/mapa.aspx?…

S tím XML použitým v článku, to je pěkná věc, to asi příště použiji, díky.

— Martin Hassman 31 08 2007 - 09:53 #
[12] Tak ten posuvný ukazatel jsem nějak nepochopil, můžete to nějak blíže popsat?

— Petr Václavek 31 08 2007 - 10:59 #
[13] Zkuste si na http://telefony.vscht.cz/mapa.aspx?… posunout onen ukazatel s teckou uprostred a zamerit ho na nejaky bod, při správném zvětšení to jde docela s velkou přesností. Překvapuje mě, že něco podobného nemají přímo na původních Google mapách.

— Martin Hassman 31 08 2007 - 11:39 #
na vyberanie suradnic z mapy som si spravil pomocou API taky mensi skript. Zobrazi sa google maps a klikanim sa do textarea pod mapou umiestnuju suradnice. ak musite naklikat tych pobociek viacej, tak je to rychlejsie nakolko ten moze generovat rovno pouzitelny subor, ktoremu iba doplnis popisky.

— rony 3 09 2007 - 12:39 #
Zdravím, omlouvám se za offtopic, ale zajímalo by mě, jestli se dá k tomuto blogu najít jiný RSS feed než ty ve „Zdroje RSS/Atom“? Rád bych občas odkázal článek (jako třeba tento) v link blogu na http://buzzmag.cz/link-blog/ ale zmíněné feedy se v Google Readeru zobrazují s rozbitým kódováním, viz. ten link blog. Každopádně díky za dobré čtení tady.

— Pavel Neuman 8 09 2007 - 03:49 #
To 3dtour.cz vypadá velice povedeně.

— Andy 20 09 2007 - 19:15 #
[2] Dokumentace Googlu je kompletní, ale nepraktická, odpověď na Vaší otázku naleznete v tomhle tutoriálu http://econym.googlepages.com/index.htm Tady je příklad 1/ http://econym.googlepages.com/…e_inside.htm a tady s pluginem epoly.js 2/ http://econym.googlepages.com/…_states2.htm

— Fred 3 10 2007 - 20:26 #
může se google maps api používat i pro komerční weby

— Karlooos 9 10 2007 - 20:09 #
[19] Jsem přesvědčen že ANO, ale pro klid duše si raději prostudujte „Google Maps API Terms of Use“ na stránce, kde se žádá o Google Maps API Key

— Petr Václavek 9 10 2007 - 20:26 #
Na nastavení přesné polohy na mapě jsem si kdysi udělal takový skriptík. Nastavíte polohu, velikost okna, zoom a do schránky vložíte vygenerovaný kód. Pokud se vám to bude hodit, odkaz je zde:http://souradnice.in1.cz/

— Ladis 14 10 2007 - 15:13 #
Ahojte, nechápem čo robím zle, keď som spracoval kód podľa tohto návodu, ale mapy nikde niet? Vôbec sa nezobrazila! Díky

— stanley 9 11 2007 - 08:59 #
A odkaz by nebyl? Já nejsem žádná vědma abych bez zdrojáku našel chyby ve zdrojáku :)

— Petr Václavek 9 11 2007 - 10:43 #
Poslal som vám to na e-mail… Vďaka

— stanley 9 11 2007 - 12:50 #
Děkuji za skvělý příklad, na zmíněné adrese jsem to bez problémů rozchodil. Mohu se zeptat, co by se dalo udělat pro to, aby se i při prvním kliknutí na bod objevila fotka uvnitř rámečku a né mimo něj ? (používám prohlíeč firefox).

— repasovane-pocitace.cz 14 11 2007 - 23:22 #
[25] asi by pomohlo, kdyby se u obrázku kromě šířky zadávala i výška. Tedy buď by byly všechny obrázky stejně velké (a jejich výška by tam byla zadána natvrdo – tak jak je to teď se šířkou) a nebo by byly rozměry obrázku uloženy v XML souboru.

— Petr Václavek 15 11 2007 - 09:51 #
Bylo by možné tento příklad použít tak, že do xml souboru generovat data dynamicky? Zkusil jsem xml soubor přejmenovat na php (i uvnitř skriptu ve funkci GDownloadUrl), ale poté se nezobrazují značky na mapě. Děkuji za rady, mám v databázi přibližně 200 adres, které bych chtěl zobrazit a ručně je vypisovat nelze. Děkuji

— skolnik 25 12 2007 - 21:53 #
vyřešeno, díky

— skolnik 26 12 2007 - 18:09 #
Zdravím vás. Nejdřív jednu pochvalu pro moc dobrý příklad. Jen tak dál. Vše šlo v pořádku, jen se mi nepodařilo změnit ikonu „markeru“. Nemáte s tím někdo zkušenosti? Aby tam mohla být jiná „vlaječka“ ukazující na místo než ta červená? Díky

— Marek 2 01 2008 - 00:36 #
Nefunguje zial s prehladacom IE :( Hlasi chybu s JavaScriptom.

— pavol 9 04 2008 - 18:47 #
[30] Vyzkoušel jsem a vše funguje OK. Můžete být konkrétnější a napsat, zda zkoušíte zobrazit přímo v článku uvedenou ukázku, nebo zda jste si ukázku stáhnul a zkoušíte ji pustit u sebe, případně jaký prohlížeč máte a jakou chybu to hlásí?

— Petr Václavek 9 04 2008 - 19:44 #
Skusal som jak ukazku, tak aj u sebe. Mapu zobrazi, ale body na mape nie. Podobnu skusenost ma aj kolegyna(bezny uzivatel) na svojom PC. Rovnako sa spravaju aj priklady(netestoval som svetky) z dokumentacie k API. Ale priklad: telefony.vscht.cz/mapa.aspx ide ako ma aj s IE.

— pavol 10 04 2008 - 07:04 #
[31]Hlasi: Automation server cant create object.

— pavol 10 04 2008 - 07:09 #
[32] Viděl bych to spíše na problém s vaším počítačem/prohlížečem. Zkuste kontaktovat Google, případně hodit dotaz do jejich fóra věnujícího Google Maps API.

— Petr Václavek 10 04 2008 - 09:32 #

P?idat koment�?

Pište prosím slušně, s diakritikou a k věci. Dodržujte pravidla a využijte možnosti formátování uvedená pod formulářem.

Jméno		Pamatovat
E-mail
http://
Zpráva
5+5=	- Toto je otázka proti SPAMU, zapište výsledek

Pravidla a možnosti formátování

Nepoužívejte HTML značky, blog podporuje sexy formátování texy. Například nový odstavec získáte 2x odřádkováním, citace započněte znakem ">", odkaz: "text odkazu":odkaz, **tučně**, *kurzíva*
Adresy začínající na http:// budou automaticky převedeny na odkazy
Jediné dvě povinné položky formuláře jsou Jméno a zpráva
Na předchozí komentáře odkazujte zápisem [2]

Sekce

Náhodný snímek

Důležité články

Reklama

Poslední články

Poslední komentáře