Mimo że istnieje tak wiele aplikacji i usług mapowych, które umożliwiają przejście z punktu A do punktu B, ostatecznym królem map są Mapy Google^{(Google Maps)} . Używam go na komputerze, tablecie i 90% czasu na smartfonie. Oferuje najlepsze dane, najwięcej opcji nawigacji i wyznaczania tras, a także fajne funkcje, takie jak Street View oraz informacje o pieszych, rowerach i transporcie publicznym.

Ale co, jeśli musisz skorzystać z mapy lub wskazówek dojazdu poza witryną Google? Załóżmy^(Suppose) , że masz własną witrynę ślubną lub osobisty blog, a goście mogą odwiedzić Twoją witrynę, wpisać adres, z którego przybędą, i automatycznie uzyskać wskazówki dojazdu do miejsca wydarzenia!

Cóż, można to osiągnąć na kilka sposobów. Najprostszym sposobem jest osadzenie mapy na swojej stronie internetowej za pomocą kodu do osadzenia wygenerowanego przez Mapy Google^{(Google Maps)} . Drugi sposób jest nieco bardziej techniczny, ale bardziej konfigurowalny i dynamiczny. Wymienię obie metody poniżej.

Umieść mapę Google

Jeśli chcesz tylko wyświetlić wskazówki dojazdu z jednej lokalizacji do drugiej, najłatwiej jest osadzić dowolną mapę, którą przeglądasz, za pomocą kodu osadzania. Najpierw^(First) skonfiguruj dowolne wskazówki w Mapach Google^{(Google Maps)} , a następnie kliknij ikonę koła zębatego w prawym dolnym rogu strony.

Kliknij Udostępnij lub umieść mapę^{( Share or embed map)} , a następnie kliknij kartę Osadź mapę^{(Embed map)} . Tutaj możesz wybrać rozmiar mapy, a następnie skopiować kod iframe i upuścić go na dowolnej stronie internetowej.

Jedynym minusem tej metody jest to, że użytkownik widzi po prostu statyczną mapę. W drugiej metodzie poniżej możesz utworzyć formularz, w którym użytkownik może wpisać dowolny adres początkowy i wygeneruje mapę z tego adresu na wybrany przez Ciebie adres docelowy.

Utwórz formularz Map Google

Aby zilustrować, co rozumiem przez drugą metodę, wpisz adres w USA w polu poniżej, aby uzyskać wskazówki dojazdu z Twojej lokalizacji do mojego domu:

Fajnie^(Cool) , co? Możesz łatwo utworzyć ten mały formularz na dowolnej stronie internetowej, blogu lub w dowolnym miejscu, w którym możesz umieścić kod HTML ! Jest to również świetne w przypadku witryn internetowych małych firm, ponieważ można je wyświetlić na swojej stronie kontaktowej, a ludzie mogą szybko uzyskać wskazówki dojazdu, zamiast kopiować adres, otwierać nowe okno, a następnie wpisywać swój adres początkowy.

Jak więc mamy utworzyć to zmodyfikowane pole uzyskiwania wskazówek? Cóż^(Well) , najpierw musimy uzyskać poprawną składnię adresu URL^(URL) , którego Google używa do wskazówek. Na szczęście możemy to rozgryźć, uzyskując wskazówki dojazdu między dwoma miejscami, a następnie po prostu kopiując adres URL^(URL) z paska adresu. Możesz też kliknąć małą ikonę koła zębatego w prawym dolnym rogu strony i wybrać Udostępnij lub umieść mapę^{(Share or embed map)} .

Karta Udostępnij^(Share) łącze będzie zawierać adres URL^(URL) , który jest tym samym adresem URL^(URL) w pasku adresu przeglądarki. Przeszedłem dalej i wkleiłem cały adres URL^(URL) poniżej, aby pokazać, jak to wygląda.

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

Ojej! To dość długo! Jest tam wiele rzeczy, z których większość nie ma żadnego sensu! Kiedyś parametry URL Map Google^{(Google Maps URL)} były bardzo proste i łatwe, ale nowa struktura adresów URL^(URL) jest dość skomplikowana. Na szczęście nadal możesz używać starych parametrów, a Google automatycznie przekonwertuje je do nowej wersji. Aby zobaczyć, co mam na myśli, sprawdź poniższy link.

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

Śmiało i spróbuj. Wpisz adres w cudzysłowie dla adresu początkowego i końcowego i wklej adres URL^(URL) do przeglądarki! Zamieniłem początek na moje miasto rodzinne Nowy Orlean^{(New Orleans)} i kończę na Houston w Teksasie, więc tak wygląda mój adres URL^(URL) wskazówek w Mapach Google^{(Google Maps)} :

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

To działa! Jak widać jednak, Mapy Google^{(Google Maps)} konwertują linki w coś znacznie bardziej skomplikowanego, gdy mapa się w pełni załaduje. Ok, więc teraz, gdy mamy rozsądny adres URL^(URL) , który możemy przekazać do Map Google^{(Google Maps)} , musimy utworzyć prosty formularz z dwoma polami, jednym dla adresu początkowego i drugim dla adresu docelowego.

Jeśli chcesz, aby ludzie po prostu wpisali swój adres i otrzymali wskazówki dojazdu do Twojego miejsca, będziemy chcieli, aby drugie pole było ukryte i ustawione na adres docelowy.

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

Sprawdź powyższy kod. Pierwsza linia zaczyna się od formularza i mówi, że po kliknięciu przycisku przesyłania dane należy przesłać na adres maps.google.com/maps. Cel target=blank oznacza, że ​​chcemy, aby wynik otwierał się w nowym oknie. Następnie mamy pole tekstowe na adres początkowy, które jest puste.

Drugie pole tekstowe jest ukryte, a wartością jest żądany adres docelowy. Na koniec znajduje się przycisk przesyłania z tytułem „Uzyskaj wskazówki”. Teraz, gdy ktoś wpisze swój adres, otrzyma to:

Możesz jeszcze bardziej dostosować kierunki i mapę za pomocą kilku dodatkowych parametrów. Załóżmy na przykład, że nie chcesz, aby domyślnym widokiem były mapy, ale chcesz, aby był to widok satelitarny^(Satellite) i wyświetlał ruch^(Traffic) .

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

Zwróć uwagę na pola layer=t i t=h w adresie URL^(URL) . layer=t oznacza warstwę ruchu, a t=h oznacza mapę hybrydową! t można również ustawić na m dla normalnej mapy, k dla satelity i  p dla terenu. z to poziom powiększenia, który można zmienić z 1 na 20. W powyższym adresie URL^(URL) jest ustawiony na 7. Po prostu^(Just) dodaj je do końcowego adresu URL^(URL) , a otrzymasz w swojej witrynie wysoce dostosowany formularz dojazdu w Mapach Google^{(Google Maps Get Directions)} !

Masz z tym jakieś problemy, napisz komentarz, a postaram się pomóc! Cieszyć się!

Add Google Maps Driving Directions to Your Website

Even though there are sо many mappіng apps and services out there to get you from point A to point B, the definitive king of maps is Google Maps. I use it on my comрuter, tablet and 90% of the tіme on my smartphone. It’s got the best data, the most navigation and roυting 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

• Mapy Google nie mówią ani nie podają wskazówek głosowych? 12 sposobów na naprawę

• 9 ukrytych funkcji w Mapach Google, które powinieneś sprawdzić

• Jak wyświetlić historię wyszukiwania w Mapach Google

• Jak korzystać z wielu przystanków w Mapach Google

• Jak osadzić formularze Google w swojej witrynie?

• Jak usunąć historię YouTube i aktywność wyszukiwania

• Jak pobierać mapy w Mapach Google do przeglądania w trybie offline

• Brakuje widżetu paska wyszukiwania Google? Jak go przywrócić na Androidzie

• Co to jest błąd Google „Nietypowy ruch” i jak go naprawić?

• Jak filtrować w Arkuszach Google

• Jak działa algorytm YouTube?

• Jak korzystać z zadań Google — przewodnik wprowadzający

• Metody badania użytkowników Google Analytics w celu zwiększenia ruchu w witrynie

• Jak tworzyć niestandardowe trasy w Mapach Google

• Historia lokalizacji w Mapach Google: 5 przydatnych rzeczy, które możesz z nią zrobić

• Co to są powiadomienia Google o narażeniu na kontakt z COVID?

• 8 niesamowitych zastosowań Street View w Mapach Google

• Jak korzystać z SUMIF w Arkuszach Google

• Co to jest rozszerzona ochrona w Google Chrome i jak ją włączyć?

• Czy możesz usunąć wszystkie wiadomości e-mail z Gmaila naraz?