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

28. srpen 2007 | JavaScript, | Komentováno: 41×

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: Ukázka použití Google Maps 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.

facebook | twitter | del.icio.us | linkuj | jagg | vybrali.sme.sk Ulož odkaz

Související články

Komentáře

1
Tomáš Halada
28 srpen 2007, 12:13

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

 
2
Petr Kovařík
28 srpen 2007, 14:14

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…

 
3
Petr Václavek
28 srpen 2007, 14:18

[2] To není nic těžkého – stačí se podívat do dokumentace: http://www.go­ogle.com/…cumen­tation/#… tady je příklad na vložení lomené čáry, polygon bude to samé, jen se použije trochu jiná funkce, viz reference

 
4
Radek Hulán
28 srpen 2007, 15:19

AMapy.cz mají podobné API, ale méně se toho načítá, je to rychlejší, a hlavně kompletně česky:

http://radekhu­lan.cz/…-s-amapy-api

 
5
Petr Václavek
28 srpen 2007, 15:51

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

 
6
Radek Hulán
28 srpen 2007, 16:56

Hm. Příklad je na „mapa hotelů v Praze s adresami“, což je Evropa ;-)

 
7
Petr
28 srpen 2007, 17:40

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.web­cams.cz/webcam­s_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.

 
8
Petr Václavek
28 srpen 2007, 21:06

[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!

 
9
marek
29 srpen 2007, 19:43

[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… ? :)

 
10
Ronaldino
30 srpen 2007, 07:02

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

 
11
Petr
30 srpen 2007, 07:49

[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.ma­molo.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 :)

 
12
Martin Hassman
31 srpen 2007, 09:53

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://telefo­ny.vscht.cz/ma­pa.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.

 
13
Petr Václavek
31 srpen 2007, 10:59

[12] Tak ten posuvný ukazatel jsem nějak nepochopil, můžete to nějak blíže popsat?

 
14
Martin Hassman
31 srpen 2007, 11:39

[13] Zkuste si na http://telefo­ny.vscht.cz/ma­pa.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.

 
15
rony
3 září 2007, 12: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.

 
16
Pavel Neuman
8 září 2007, 03:49

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.

 
17
Andy
20 září 2007, 19:15

To 3dtour.cz vypadá velice povedeně.

 
18
Fred
3 říjen 2007, 20:26

[2] Dokumentace Googlu je kompletní, ale nepraktická, odpověď na Vaší otázku naleznete v tomhle tutoriálu http://econym­.googlepages.com/in­dex.htm Tady je příklad 1/ http://econym­.googlepages.com/…e­_inside.htm a tady s pluginem epoly.js 2/ http://econym­.googlepages.com/…_sta­tes2.htm

 
19
Karlooos
9 říjen 2007, 20:09

může se google maps api používat i pro komerční weby

 
20
Petr Václavek
9 říjen 2007, 20:26

[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

 
21
Ladis
14 říjen 2007, 15:13

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://sou­radnice.in1.cz/

 
22
stanley
9 listopad 2007, 08:59

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

 
23
Petr Václavek
9 listopad 2007, 10:43

A odkaz by nebyl? Já nejsem žádná vědma abych bez zdrojáku našel chyby ve zdrojáku :)

 
24
stanley
9 listopad 2007, 12:50

Poslal som vám to na e-mail… Vďaka

 
25
repasovane-pocitace.cz
14 listopad 2007, 23:22

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

 
26
Petr Václavek
15 listopad 2007, 09:51

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

 
27
skolnik
25 prosinec 2007, 21:53

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

 
28
skolnik
26 prosinec 2007, 18:09

vyřešeno, díky

 
29
Marek
2 leden 2008, 00:36

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

 
30
pavol
9 duben 2008, 18:47

Nefunguje zial s prehladacom IE :( Hlasi chybu s JavaScriptom.

 
31
Petr Václavek
9 duben 2008, 19:44

[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í?

 
32
pavol
10 duben 2008, 07:04

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.

 
33
pavol
10 duben 2008, 07:09

[31]Hlasi: Automation server cant create object.

 
34
Petr Václavek
10 duben 2008, 09:32

[32] Viděl bych to spíše na problém s vaším počítačem/proh­lížečem. Zkuste kontaktovat Google, případně hodit dotaz do jejich fóra věnujícího Google Maps API.

 
35
jirka
25 leden 2009, 21:37

Uz je to dlouho co tady nikdo nepsal tak to zkusim ja se zeptat na par otazek ??

Potreboval bych dodat do mapy : priblizovani a oddalovani ale aby to slo koleckem mysi .. A druhy dotaz jak zmenit barvu tech puntiku cervenych a jeste by bylo lepsi abych mohl nastavit barvu tech puntiku podle toho jak potrebuji a aby se zobrazily na mape v ruznych barvach vedle sebe ?? Poradte nekdo prosim !!

 
36
Kubin
13 březen 2009, 21:05

Už jsem to sice psal k tomu druhemu clanku, ale ptate se na to porad, tak to zopaknu:

Pokud chtete zoomovani, barvy spendliku nebo uplne vlastni ikony, pouzijte nejaky generator google map.

Např.

http://www.map-generator.org

http://www.map-generator.net

http://www.bo­ardsie.com/…ow­thread.php?…

 
37
Kristi
17 březen 2009, 13:12

Zdravím, podľa Vášho vzoru ale menšou úpravou kódu (na mojej stránke sa nachádza iba mapa Google s červenými terčíkmi bez kontaktov na hotely) som si vytvoril stránku (html / php), ktorá bez problémov funguje, dáta sa správne ťahajú zo súboru .xml. Ak však tento môj súbor vložím cez príkaz php include do inej stránky – zobrazí sa mi iba mapa google bez terčíkov – t.j. najskôr je problém niekde so súborom xml. Na internete som sa dočítal, že pravdepodobne je problém s prvým riadkom súboru xml „.. xml version=“1.0" encoding=„UTF-8“ ..", ktorý php zle vyhodnocuje a potom následne sa pri výstupe nezobrazujú terčíky. Ďakujem za akúkoľvek odpoveď.

 
38
Karel
4 červenec 2009, 15:02

Jakým způsobem (co přidat do kodu) docilit toho, aby se mapa defaultne zobrazovala v satelitnim provedeni. Diky.

 
39
Ceeper
28 říjen 2009, 17:40

Super ukazka, diky :)
Jen by me zajimala jedna vec: jak se da misto souradnic pouzit geocoder?
tj aby program hledal podle nazvu, ne podle souradnic.
Diky

 
40
risoft
6 listopad 2009, 11:55

Ceeper
napriklad:
<form action=„#“ onsubmit=„sho­wAddress(this­.address.valu­e); return false“>
.
.
Najít adresu: 
<input type=„text“ size=„40“ name=„address“ value="" title=„Hledání adresy (GPS: S,D)“ />
<input type=„submit“ value=„Hledat“ />
</form>

jinak na Google Maps je skvela napoveda a priklady

 
41
Jitka Barošová
28 leden 2010, 13:51

Dobrý den,

vytvořila jsem osm googlemap a potřebovala bych na web vyvěsit jejich průnik, aby se daly libovolně vypínat a zapínat. Myslíte, že je to možné?

Díky předem za odpověď.

 

Přidej 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.

Email nebude zveřejněn

Pravidla a možnosti formátování

  • Nepoužívejte HTML značky, blog podporuje formátování texy. Nový odstavec získáte 2x odřádkováním, 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


Medové kuře

Zajímavé odkazy

ColorSuckr
Webové udělátko, které z vámi zadaného obrázku vygeneruje paletu 12ti barev.

[Barvy]

Pdfcrowd
Služba, která nabízí skripty a své API pro snadnou konverzi HTML do PDF. Zajímavá je možnost přidat na web jednoduchý odkaz, který po vložení do libovolné stránky umožňuje stažení její PDF verze.

[Tvorba stránek - návody, nástroje]

Honzova Hypotéka
Pokud hodláte kupovat nemovitost (dům či byt), tak se vám bude hodit tato hypotečně poradní služba - po zadání základních údajů o nemovitosti, své bonitě a výši hypotéky vám budou banky a hypoteční poradci nabízet své produkty. První odpovědi dostanete již během hodiny, další v průběhu týdne. Já sám jsem jich získal téměř dvacet a dozvěděl jsem se, jaké jsou na trhu možnosti - to vše zdarma - k ničemu se nezavazujete. Samozřejmě, když vás nějaká nabídka zaujme, tak se můžete zdarma spojit s nabízející bankou/poradcem a nabídku dotáhnout do finále - uzavření smlouvy.

[Různé]

Hypoteční kalkulačka
Končeně pořádný hypoteční kalkulátor, který nejen vypočítá měsíční splátku hypotéky, ale zobrazí také splátkový kalendář po jednotlivých splátkových obdobích rozdělených na úroky a umoření splátky.

[Různé]

CSS chyby a nekonzistence ve Firefoxu 3.x
Přehled chybného interpretování CSS u Firefoxu (bohužel bez nástinu řešení)

[Chyby CSS a jejich řešení]

jPlayer
jQuery audio player plugin pro vaše stránky - lze snadno nastylovat, obsahuje i čistě textovou verzi a vypadá dobře.

[JavaScript]

Better drop shadows
Jednoduchá technika jak udělat ve Photoshopu realističtější stíny.

[Photoshop]

13 Simple CMS Options
Tipy na jednoduché redakční systémy, které mnohdy nepotřebují ani databázi.

[CMS systémy]

Nejlepší jQuery lightboxy
Článek s přehledem lightboxů založených na knihovně jQuery.

[JavaScript]

jQuery News Ticker
Docela pěkný a jednoduchý news ticker pro jQuery. Právě jsem ho použil na jednom webu.

[JavaScript]

Další odkazy →