Annak ellenére, hogy nagyon sok térképészeti alkalmazás és szolgáltatás létezik, amelyek segítségével eljuthat A pontból B pontba, a térképek végső királya a Google Térkép^{(Google Maps)} . Számítógépen, táblagépen és az esetek 90%-ában okostelefonomon használom. A legjobb adatokkal, a legtöbb navigációs és útvonalválasztási lehetőséggel, valamint olyan nagyszerű funkciókkal rendelkezik, mint az Utcakép^{(Street View)} , valamint a gyalogos, kerékpáros és tömegközlekedési információk.

De mi van akkor, ha a Google webhelyén kívüli térképet vagy útvonaltervet kell használnia? Tegyük fel^(Suppose) , hogy van saját esküvői webhelye vagy személyes blogja, és a vendégek felkereshetik webhelyét, beírhatják a címet, ahonnan jönnek, és automatikusan megkapják az útvonalat az esemény helyszínéhez!

Nos, van néhány módszer, amellyel ezt elérheti. A legegyszerűbb módja annak, ha a térképet egyszerűen beágyazhatja weboldalába a Google Térkép^{(Google Maps)} által generált beágyazási kód segítségével . A második mód egy kicsit technikaibb, de testreszabhatóbb és dinamikusabb. Az alábbiakban mindkét módszert megemlítem.

Google Térkép beágyazása

Ha csak az egyik helyről a másikra szeretne útvonaltervet megjeleníteni, a legegyszerűbb az, ha a megtekintett térképet beágyazza a beágyazási kód segítségével. Először^(First) is állítsa be a kívánt útvonalat a Google Térképen^{(Google Maps)} , majd kattintson a fogaskerék ikonra az oldal jobb alsó sarkában.

Kattintson a Térkép megosztása vagy beágyazása^{( Share or embed map)} elemre, majd a Térkép beágyazása^{(Embed map)} fülre. Itt kiválaszthatja a térkép méretét, majd kimásolhatja az iframe kódot, és rádobhatja bármely kívánt weboldalra.

Ennek a módszernek az egyetlen hátránya, hogy a felhasználó csak egy statikus térképet lát. Az alábbi második módszerrel létrehozhat egy űrlapot, amelybe a felhasználó bármilyen kiindulási címet beírhat, és ebből a címből egy térképet generál az Ön által választott célcímig.

Google Térkép-űrlap létrehozása

Annak szemléltetésére, hogy mit értek a második módszer alatt, írjon be egy egyesült államokbeli címet az alábbi mezőbe, hogy útbaigazítást kaphasson tartózkodási helyétől a házamig:

Menő^(Cool) mi? Ezt a kis űrlapot könnyedén elkészítheti bármely weboldalon, blogon vagy bárhol, ahol HTML kódot helyezhet el! Ez kisvállalkozások webhelyei számára is nagyszerű, mivel felveheti a kapcsolatfelvételi oldalon, és az emberek gyorsan kaphatnak útbaigazítást ahelyett, hogy ki kellene másolniuk a címet, új ablakot nyitniuk, majd be kell írniuk a kezdőcímüket.

Tehát hogyan hozzuk létre ezt a módosított útvonalterv-mezőt? Nos^(Well) , először is meg kell találnunk a helyes szintaxist az URL -hez , amelyet a Google az útvonaltervezéshez használ. Szerencsére ezt úgy tudjuk kitalálni, hogy útvonaltervet készítünk két hely között, majd egyszerűen kimásoljuk az URL -t a címsorból. Az oldal jobb alsó sarkában lévő apró fogaskerék ikonra is kattinthat, és kiválaszthatja a Térkép megosztása vagy beágyazása^{(Share or embed map)} lehetőséget .

A Link megosztása lap tartalmazza az ^(Share)URL -t , amely megegyezik a böngésző címsorában . ^(URL)Továbbmentem, és beillesztem a teljes URL -t alább, hogy megmutassam, hogyan néz ki.

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

Jajj! Ez elég hosszú! Sok minden van benne, a legtöbbnek semmi értelme! A Google Térkép URL^{(Google Maps URL)} -paraméterei korábban nagyon egyszerűek és egyszerűek voltak, de az új URL - struktúra meglehetősen bonyolult. Szerencsére továbbra is használhatja a régi paramétereket, és a Google automatikusan átalakítja őket az új verzióra. Ha látni szeretnéd, mire gondolok, nézd meg az alábbi linket.

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

Gyerünk, és próbáld ki. Írjon idézőjelbe egy címet a kezdő és záró címhez, és illessze be az URL -t a böngészőbe! Az elejét a szülővárosomra, New Orleans- ra cseréltem, és Houstonra^(Houston) (TX) fejeztem be, így a Google Térkép^{(Google Maps)} útvonalterv URL -je így néz ki:

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

Működik! Amint azonban láthatja, a Google Térkép^{(Google Maps)} a térkép teljes betöltődése után a linkeket sokkal bonyolultabbá alakítja. Rendben, most, hogy van egy értelmes URL -címünk , amelyet átadhatunk a Google Térképnek^{(Google Maps)} , létre kell hoznunk egy egyszerű űrlapot két mezővel, az egyik a kiindulási cím és a másik a célcím.

Ha azt szeretné, hogy az emberek egyszerűen beírják a címüket, és útbaigazítást kapjanak az Ön helyéhez, akkor a második mezőt el kell rejteni, és már be kell állítani a cél címére.

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

Nézze meg a fenti kódot. Az első sor az űrlappal kezdődik, és azt mondja, hogy a küldés gombra kattintva az adatokat el kell küldeni a maps.google.com/maps címre. A target=blank azt jelenti, hogy az eredményt új ablakban szeretnénk megnyílni. Ezután van egy szövegdobozunk a kiindulási címhez, amely üres.

A második szövegmező rejtett, és az érték a kívánt célcím. Végül van egy küldés gomb „Útvonalterv” címmel. Most, amikor valaki beírja a címét, ezt fogja kapni:

Néhány extra paraméterrel még jobban személyre szabhatja az útvonaltervet és a térképet. Tegyük fel például, hogy nem szeretné, hogy az alapértelmezett nézet a térképek legyenek, hanem azt, hogy Műhold^(Satellite) legyen , és a Forgalom^(Traffic) nézetet jelenítse meg .

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

Figyelje meg a layer=t és t=h mezőket az URL -ben . A layer=t a forgalmi réteget jelenti, a t=h pedig a hibrid térképet! t is beállítható m értékre normál térképnél, k műholdnál és  p domborzatnál. z a nagyítási szint, és 1-ről 20-ra módosíthatja. A fenti URL -ben ez 7-re van állítva. Csak^(Just) ragassza ezeket a végső URL -hez , és máris megkapja a webhelyén egy rendkívül személyre szabott Google Térkép Útvonalterv^{(Google Maps Get Directions)} űrlapot. !

Ha bármilyen problémája van ezzel, írjon megjegyzést, és megpróbálok segíteni! Élvezd!

Add Google Maps Driving Directions to Your Website

Even though there аre so many mapping apps and services out there to get you from рoint Α to рoint B, the definіtive king of maps is Gоogle Maps. I use it on my computer, tablet and 90% of the time оn my smartphone. It’s got the beѕt data, the most navigation and routіng options and cool features like 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

• A Google Térkép nem beszél, vagy nem ad hangos útbaigazítást? 12 módszer a javításra

• 9 rejtett funkció a Google Térképen, amelyeket érdemes megnézni

• A Google Térkép keresési előzményeinek megtekintése

• Több megálló használata a Google Térképen

• Google-űrlapok beágyazása webhelyére

• A Google Analytics felhasználói kutatási módszerei a webhely forgalmának növelésére

• PIN-kód elhelyezése a Google Térképben asztali számítógépen és mobileszközön

• Google-naptár beágyazása webhelyére

• A Google Táblázatok legördülő listáinak használata

• Mi a Google kitettségi értesítései a COVID-védelemhez?

• Mi az a Google „szokatlan forgalom” hibája, és hogyan javítható?

• Az alapértelmezett Google-fiók módosítása

• Mi az a Helyi idegenvezető a Google Térképhez?

• Mi a Software Reporter eszköz a Chrome-ban, és hogyan lehet letiltani

• A YouTube előzményeinek és keresési tevékenységeinek törlése

• Egyszerre törölheti az összes e-mailt a Gmailből?

• Megjegyzések hozzáadása és megoldása a Google Dokumentumokban

• A Google Családi Naptár használata családja időben történő tartásához

• A Google Biztonságos Keresés kikapcsolása

• A SUMIF használata a Google Táblázatokban