Iako postoji toliko mnogo kartografskih aplikacija i usluga koje će vas dovesti od točke A do točke B, definitivni kralj karata je Google Maps . Koristim ga na računalu, tabletu i 90% vremena na pametnom telefonu. Ima najbolje podatke, najviše opcija za navigaciju i usmjeravanje te sjajne značajke kao što su Street View i informacije za hodanje, vožnju biciklom i masovni prijevoz.

Ali što ako trebate koristiti kartu ili upute izvan Googleove web stranice? Pretpostavimo^(Suppose) da imate vlastitu web stranicu za vjenčanje ili osobni blog i gosti bi mogli posjetiti vašu stranicu, upisati adresu s koje će doći i automatski dobiti upute do mjesta događaja!

Pa, postoji nekoliko načina na koje to možete postići. Najlakši način je jednostavno ugraditi kartu na svoju web stranicu pomoću koda za ugradnju koji generira Google Maps . Drugi način je malo tehničkiji, ali prilagodljiviji i dinamičniji. U nastavku ću spomenuti obje metode.

Ugradite Google kartu

Ako želite samo prikazati upute od jedne lokacije do druge, najjednostavnije je ugraditi bilo koju kartu koju gledate pomoću koda za ugradnju. Najprije^(First) nastavite i postavite upute koje želite na Google kartama^{(Google Maps)} , a zatim kliknite na ikonu zupčanika u donjem desnom kutu stranice.

Kliknite Dijeli ili ugradi kartu^{( Share or embed map)} , a zatim kliknite karticu Ugradi kartu^{(Embed map)} . Ovdje možete odabrati veličinu za svoju kartu, a zatim kopirati iframe kod i ispustiti ga na bilo koju web stranicu koja vam se sviđa.

Jedina mana ove metode je da korisnik samo vidi statičnu kartu. U drugoj metodi u nastavku možete stvoriti obrazac u koji korisnik može upisati bilo koju početnu adresu i on će generirati kartu od te adrese do odredišne ​​adrese po vašem izboru.

Izradite obrazac za Google karte

Da biste ilustrirali što mislim pod drugom metodom, samo naprijed upišite američku adresu u okvir ispod da biste dobili upute od svoje lokacije do moje kuće:

Cool ha? Možete jednostavno izraditi ovaj mali obrazac na bilo kojoj web stranici, blogu ili bilo gdje gdje možete staviti neki HTML kod! Ovo je također izvrsno za web-mjesta malih poduzeća jer ga možete baciti na svoju stranicu za kontakt i ljudi mogu brzo dobiti upute, umjesto da moraju kopirati vašu adresu, otvoriti novi prozor, a zatim upisati svoju početnu adresu.

Dakle, kako ćemo napraviti ovaj modificirani okvir za dobivanje uputa? Pa^(Well) prvo, morat ćemo dobiti ispravnu sintaksu za URL koji Google koristi za upute. Srećom, to možemo shvatiti dobivanjem uputa između dva mjesta, a zatim samo kopiranjem URL -a iz adresne trake. Također možete kliknuti na malu ikonu zupčanika u donjem desnom kutu stranice i odabrati Dijeli ili ugraditi kartu^{(Share or embed map)} .

Kartica veze Dijeli^(Share) sadržavat će URL , koji je isti URL u adresnoj traci vašeg preglednika. Nastavio sam i zalijepio cijeli URL u nastavku samo da vam pokažem kako izgleda.

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

Jao! To je prilično dugo! Ima tu puno stvari, od kojih većina nema nikakvog smisla! Parametri URL-a Google karata^{(Google Maps URL)} nekada su bili vrlo jednostavni i jednostavni, ali nova struktura URL - a je prilično komplicirana. Srećom, još uvijek možete koristiti stare parametre i Google će ih automatski pretvoriti u novu verziju. Da vidite na što mislim, pogledajte donju poveznicu.

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

Samo naprijed i pokušaj. Stavite adresu u navodnicima za početnu i završnu adresu i zalijepite URL u svoj preglednik! Zamijenio sam početak s mojim matičnim gradom New Orleansom^{(New Orleans)} i kraj s Houstonom^(Houston) , TX, pa ovako izgleda moj URL uputa na Google kartama :^{(Google Maps)}

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

Radi! Međutim, kao što možete vidjeti, Google Maps pretvara veze u nešto mnogo kompliciranije kada se karta u potpunosti učita. U redu, sada kada imamo zdrav URL koji možemo proslijediti u Google Maps , moramo stvoriti jednostavan obrazac s dva polja, jednim za početnu adresu i jednim za odredišnu adresu.

Ako želite da ljudi samo unesu svoju adresu i dobiju upute do vašeg mjesta, želimo da drugo polje bude skriveno i već postavljeno na odredišnu 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>

Provjerite gornji kod. Prvi redak započinje obrascem i kaže da kada se klikne na gumb za slanje, podatke treba poslati na maps.google.com/maps. Cilj target=blank znači da želimo da se rezultat otvori u novom prozoru. Zatim imamo tekstni okvir za početnu adresu, koji je prazan.

Drugi tekstni okvir je skriven, a vrijednost je odredišna adresa koju želimo. Konačno, tu je gumb za slanje s naslovom "Dobij upute". Sada kada netko upiše svoju adresu, dobit će ovo:

Možete prilagoditi upute i karte još više uz nekoliko dodatnih parametara. Na primjer, recimo da ne želite da zadani prikaz budu karte, ali umjesto toga želite da bude Satelit^(Satellite) i prikazuje Promet^(Traffic) .

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

Obratite pažnju na polja layer=t i t=h u URL -u . layer=t je za prometni sloj, a t=h znači hibridna karta! t se također može postaviti na m za normalnu kartu, k za satelit i  p za teren. z je razina zumiranja i možete je promijeniti od 1 do 20. U gornjem URL -u postavljeno je na 7. Samo^(Just) ih pričvrstite na svoj završni URL i sada ćete na svojoj web-lokaciji dobiti vrlo prilagođeni obrazac za Google karte Dobijte upute^{(Google Maps Get Directions)} !

Ako imate problema s ovim, ostavite komentar i pokušat ću pomoći! Uživati!

Add Google Maps Driving Directions to Your Website

Even though there are sо many mapping apps and services out there to get you from point A to point B, the definitive king of maps iѕ Google Maps. I use it on my computer, tablet and 90% of the timе on my smartphone. It’ѕ got the bеst data, the most navіgatіon and rоuting options and cool features lіke Street View and walking, biking and mass transit 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

• Google karte ne govore ili ne daju glasovne upute? 12 načina za popravak

• 9 skrivenih značajki u Google kartama koje biste trebali provjeriti

• Kako pregledati povijest pretraživanja na Google kartama

• Kako koristiti više zaustavljanja u Google kartama

• Kako ugraditi Google obrasce na svoju web stranicu

• Kako koristiti Google kalendar: 10 profesionalnih savjeta

• Što je Software Reporter Tool u Chromeu i kako ga onemogućiti

• Kako pregledati povijest lokacija na Google kartama

• Kako doći do Inbox Zero u Gmailu

• Možete li izbrisati sve e-poruke s Gmaila odjednom?

• Google Moja aktivnost: Zašto biste trebali brinuti

• Kako isključiti Google SafeSearch

• Kako ugraditi Google kalendar na svoju web stranicu

• Kako slati privatne poruke e-pošte na Gmailu

• Kako poništiti slanje e-pošte na Gmailu

• Povijest lokacija Google Maps: 5 korisnih stvari koje možete učiniti s njom

• Kako koristiti padajuće popise Google tablica

• Kako napraviti sigurnosnu kopiju povijesti Google Chromea

• Kako koristiti anonimni način rada Google karata na Android uređaju

• Kako koristiti SUMIF u Google tablicama