Aj keď existuje toľko mapových aplikácií a služieb, ktoré vás dostanú z bodu A do bodu B, definitívnym kráľom máp sú Mapy Google^{(Google Maps)} . Používam ho na počítači, tablete a 90 % času na smartfóne. Má najlepšie údaje, najviac možností navigácie a trasy a skvelé funkcie, ako je Street View a informácie o chôdzi, cyklistike a hromadnej doprave.

Čo ak však potrebujete použiť mapu alebo trasu mimo webovej lokality Google? Predpokladajme^(Suppose) , že máte vlastnú svadobnú webovú stránku alebo osobný blog a hostia môžu navštíviť vašu stránku, zadať adresu, z ktorej budú prichádzať, a automaticky získať trasu na miesto udalosti!

Existuje niekoľko spôsobov, ako to dosiahnuť. Najjednoduchším spôsobom je jednoducho vložiť mapu na svoju webovú stránku pomocou kódu na vloženie vygenerovaného službou Mapy Google^{(Google Maps)} . Druhý spôsob je o niečo technickejší, no prispôsobiteľnejší a dynamickejší. Oba spôsoby spomeniem nižšie.

Vložiť Google Map

Ak chcete zobraziť iba trasu z jedného miesta na druhé, najjednoduchšie je vložiť akúkoľvek mapu, ktorú si prezeráte, pomocou kódu na vloženie. Najprv^(First) pokračujte a nastavte ľubovoľnú trasu v Mapách Google^{(Google Maps)} a potom kliknite na ikonu ozubeného kolieska v pravom dolnom rohu stránky.

Kliknite na Zdieľať alebo vložiť mapu^{( Share or embed map)} a potom kliknite na kartu Vložiť mapu^{(Embed map)} . Tu si môžete vybrať veľkosť mapy a potom skopírovať kód iframe a vložiť ho na ľubovoľnú webovú stránku, ktorá sa vám páči.

Jedinou nevýhodou tejto metódy je, že používateľ vidí iba statickú mapu. V druhom spôsobe nižšie môžete vytvoriť formulár, do ktorého môže používateľ zadať ľubovoľnú počiatočnú adresu a z tejto adresy vygeneruje mapu na vami zvolenú cieľovú adresu.

Vytvorte formulár Máp Google

Na ilustráciu toho, čo myslím druhou metódou, pokračujte a zadajte adresu v USA do poľa nižšie, aby ste získali trasu z vašej polohy do môjho domu:

v pohode^(Cool) čo? Tento malý formulár môžete ľahko vytvoriť na akejkoľvek webovej stránke, blogu alebo kdekoľvek, kde môžete vložiť nejaký HTML kód! Je to skvelé aj pre webové stránky malých firiem, pretože to môžete hodiť na svoju kontaktnú stránku a ľudia môžu rýchlo získať trasu, namiesto toho, aby museli skopírovať vašu adresu, otvoriť nové okno a potom zadať svoju počiatočnú adresu.

Ako teda vytvoríme toto upravené pole získania pokynov? Najprv^(Well) musíme získať správnu syntax pre adresu URL^(URL) , ktorú Google používa na navigáciu. Našťastie to môžeme zistiť tak, že získame trasu medzi dvoma miestami a potom skopírujeme adresu URL^(URL) z panela s adresou. Môžete tiež kliknúť na malú ikonu ozubeného kolieska v pravom dolnom rohu stránky a vybrať možnosť Zdieľať alebo vložiť mapu^{(Share or embed map)} .

Karta Zdieľať^(Share) odkaz bude obsahovať adresu URL^(URL) , ktorá je rovnakou adresou URL^(URL) v paneli s adresou prehliadača. Pokračoval som a prilepil som celú adresu URL^(URL) nižšie, aby som vám ukázal, ako vyzerá.

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

Fuj! To je dosť dlho! Je tam veľa vecí, z ktorých väčšina nedáva zmysel! Parametre adries URL v Mapách Google^{(Google Maps URL)} boli kedysi veľmi priamočiare a jednoduché, no nová štruktúra adries URL^(URL) je dosť komplikovaná. Našťastie môžete stále používať staré parametre a Google ich automaticky prevedie do novej verzie. Ak chcete zistiť, čo tým myslím, pozrite si odkaz nižšie.

http://maps.google.com/maps?saddr=start&daddr=end

Choďte do toho a skúste to. Zadajte adresu v úvodzovkách pre počiatočnú a koncovú adresu a vložte adresu URL^(URL) do svojho prehliadača! Nahradil som začiatok mojím domovským mestom New Orleans a koniec Houston , TX, takže moja adresa URL^(URL) trasy v Mapách Google^{(Google Maps)} vyzerá takto:

http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”

Funguje to! Ako však vidíte, Mapy Google^{(Google Maps)} konvertujú odkazy na niečo oveľa komplikovanejšie, keď sa mapa úplne načíta. Dobre, takže teraz, keď máme rozumnú adresu URL^(URL) , ktorú môžeme odovzdať do Máp Google^{(Google Maps)} , musíme vytvoriť jednoduchý formulár s dvoma poľami, jedným pre počiatočnú adresu a jedným pre cieľovú adresu.

Ak chcete, aby ľudia jednoducho zadali svoju adresu a dostali trasu k vám, potom budeme chcieť, aby bolo druhé pole skryté a už nastavené na cieľovú adresu.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”> Enter your starting address: <input type=”text” name=”saddr” /> <input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” /> <input type=”submit” value=”get directions” /> </form>

Pozrite si kód vyššie. Prvý riadok začína formulárom a hovorí, že po kliknutí na tlačidlo Odoslať sa údaje majú odoslať na adresu maps.google.com/maps. Cieľ target=blank znamená, že chceme, aby sa výsledok otvoril v novom okne. Potom máme textové pole pre počiatočnú adresu, ktoré je prázdne.

Druhé textové pole je skryté a hodnota je cieľová adresa, ktorú požadujeme. Nakoniec je tu tlačidlo Odoslať s názvom „Získať pokyny“. Keď teraz niekto zadá svoju adresu, dostane toto:

Pomocou niekoľkých parametrov navyše si môžete trasu a mapu ešte viac prispôsobiť. Povedzme napríklad, že nechcete, aby boli predvolené zobrazenie mapy, ale namiesto toho chcete, aby to bolo satelitné^(Satellite) zobrazenie a zobrazovanie premávky^(Traffic) .

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

Všimnite si polia layer=t a t=hadrese URL^(URL) . layer=t je pre dopravnú vrstvu a t=h znamená hybridnú mapu! t možno tiež nastaviť na m pre normálnu mapu, k pre satelit a  p pre terén. z je úroveň priblíženia a môžete ju zmeniť z 1 na 20. Vo vyššie uvedenej webovej adrese^(URL) je nastavená na 7. Stačí^(Just) ich prilepiť na cieľovú webovú adresu^(URL) a teraz máte na svojej stránke vysoko prispôsobený formulár na získanie trasy v Mapách Google^{(Google Maps Get Directions)} . !

Máte s tým nejaké problémy, napíšte komentár a ja sa pokúsim pomôcť! Užite si to!

Add Google Maps Driving Directions to Your Website

Even though there are sо mаny mapping apps and servicеs out there to get you from poіnt A tо point B, the definitive king of maps is Google Maps. I use it on my computer, tablet and 90% of the time on my smartphone. It’s got the best data, the most navigation and routing options and cool features like Street View and walking, biking and mass transіt info.

But what if you need to use a map or directions outside of Google’s website? Suppose you have your own wedding website or a personal blog and guests could visit your site, type in the address they will be coming from and automatically get directions to the event location!

Well, there are a couple of ways you can go about accomplishing this. The easiest way is to simply embed the map onto your webpage using the embed code generated by Google Maps. The second way is a bit more technical, but more customizable and dynamic. I’ll mention both methods below.

Embed Google Map

If you only want to display directions from one location to another, the easiest thing to do is to embed whatever map you are viewing using the embed code. First, go ahead and setup whatever directions you want in Google Maps and then click on the gear icon at the bottom right of the page.

Click on Share or embed map and then click on the Embed map tab. Here you can pick a size for your map and then copy the iframe code and drop that onto any webpage you like.

The only downside to this method is that the user just sees a static map. In the second method below, you can create a form whereby the user can type in any starting address and it will generate a map from that address to a destination address of your choosing.

Create Google Maps Form

To illustrate what I mean by the second method, go ahead and type a US address in the box below to get directions from your location to my house:

Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then just copying the URL from the address bar. You can also click on the tiny gear icon at the very bottom right of the page and choose Share or embed map.

The Share link tab will contain the URL, which is the same URL in your browser address bar. I ‘ve gone ahead and pasted the entire URL below just to show you what it looks like.

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

Yikes! That’s pretty long! There’s a lot of stuff in there, most of which doesn’t make any sense! Google Maps URL parameters used to be very straightforward and easy, but the new URL structure is quite complicated. Thankfully, you can still use the old parameters and Google will convert them into the new version automatically. To see what I mean, check out the link below.

http://maps.google.com/maps?saddr=start&daddr=end

Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:

http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”

It works! As you can see, though, Google Maps converts the links into something far more complicated once the map fully loads. Ok, so now that we have a sane URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.

If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>

Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.

The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:

You can customize the directions and map even more with a few extra parameters. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic.

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means hybrid map! t can also be set to m for normal map, k for satellite and p for terrain. z is the zoom level and you can change it from 1 to 20. In the above URL, it’s set to 7. Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site!

Have any issues with this, post a comment and I’ll try to help! Enjoy!

Related posts

• Mapy Google nehovoria alebo nedávajú hlasové pokyny? 12 spôsobov, ako opraviť

• 9 skrytých funkcií v Mapách Google, ktoré by ste si mali vyskúšať

• Ako zobraziť históriu vyhľadávania v Mapách Google

• Ako používať viacero zastávok v Mapách Google

• Ako vložiť formuláre Google na svoj web

• Ako používať rodinný kalendár Google, aby vaša rodina mala čas

• Ako používať SUMIF v Tabuľkách Google

• 7 najlepších doplnkov Gmailu

• Ako používať Google Maps Wildfire Tracking

• Čo je vylepšená ochrana v prehliadači Google Chrome a ako ju povoliť

• Čo je nástroj Software Reporter Tool v prehliadači Chrome a ako ho zakázať

• Ako vložiť podpis do Dokumentov Google

• Pridávanie a riešenie komentárov v Dokumentoch Google

• Čo sú to miestni sprievodcovia pre Mapy Google?

• 3 spôsoby, ako vytvoriť hranice v Dokumentoch Google

• Ako vytvoriť formulár Google: Kompletný sprievodca

• Moja aktivita na Googli: Prečo by vás to malo zaujímať

• Čo sú upozornenia Googlu na kontakt na ochranu proti COVID?

• Ako funguje algoritmus YouTube?

• Ako exportovať a importovať záložky Chrome