If-Koubou

Dodaj Mapy Google - wskazówki dojazdu do swojej witryny

Dodaj Mapy Google - wskazówki dojazdu do swojej witryny (Oprogramowanie Google / wskazówki)

Mimo że istnieje wiele aplikacji i usług mapujących, które umożliwiają dotarcie z punktu A do punktu B, ostatecznym królem map są Mapy Google. Używam go na moim komputerze, tablecie iw 90% przypadków na smartfonie. Ma najlepsze dane, najwięcej opcji nawigacyjnych i routingu oraz fajne funkcje, takie jak Street View i informacje o chodzeniu, rowerze i masowym transferze.

Ale co, jeśli musisz użyć mapy lub wskazówek poza witryną Google? Załóżmy, że masz własną stronę ślubną lub osobisty blog, a goście mogą odwiedzić twoją stronę, wpisać adres, z którego będą pochodzić i automatycznie uzyskać wskazówki dojazdu do miejsca wydarzenia!

Jest kilka sposobów na osiągnięcie tego celu. Najprostszym sposobem jest umieszczenie mapy na swojej stronie internetowej za pomocą kodu osadzonego wygenerowanego przez 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 wyświetlać tylko trasy z jednego miejsca do drugiego, najłatwiej jest umieścić dowolną mapę, którą przeglądasz, za pomocą kodu do umieszczenia na stronie. Najpierw skonfiguruj dowolne wskazówki w Mapach Google, a następnie kliknij ikonę koła zębatego w prawym dolnym rogu strony.

Kliknij Udostępnij lub umieść mapę a następnie kliknij przycisk Osadź mapę patka. Możesz wybrać rozmiar mapy, a następnie skopiuj kod iframe i upuść go na dowolnej stronie internetowej, którą lubisz.

Jedyną wadą tej metody jest to, że użytkownik po prostu widzi statyczną mapę. W drugiej metodzie poniżej możesz utworzyć formularz, w którym użytkownik będzie mógł wpisać dowolny adres początkowy, a następnie wygeneruje mapę z tego adresu na wybrany adres docelowy.

Utwórz formularz Google Maps

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

Fajne hę? Możesz łatwo utworzyć ten mały formularz na dowolnej stronie, blogu lub w dowolnym miejscu, w którym możesz umieścić kod HTML! Jest to również przydatne w przypadku witryn małych firm, ponieważ można je wyrzucić na stronie kontaktowej, a użytkownicy mogą szybko uzyskiwać wskazówki, zamiast kopiować adres, otworzyć nowe okno, a następnie wpisać adres początkowy.

Jak zatem utworzyć zmodyfikowane pole "Uzyskaj wskazówki dojazdu"? Najpierw musimy uzyskać poprawną składnię adresu URL, z którego Google korzysta, by uzyskać wskazówki. Na szczęście możemy to zrozumieć, uzyskując wskazówki między dwoma miejscami, a następnie kopiując adres URL z paska adresu. Możesz również kliknąć ikonę małego koła zębatego w prawym dolnym rogu strony i wybrać Udostępnij lub umieść mapę.

Zakładka Udostępnij link będzie zawierać adres URL, który jest tym samym adresem URL na pasku adresu przeglądarki. Wkroczyłem i wkleiłem cały adres poniżej, aby pokazać, jak 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

Yikes! To dość długo! Jest tam dużo rzeczy, z których większość nie ma żadnego sensu! Parametry URL Map Google były bardzo proste i łatwe, ale nowa struktura adresów URL jest dość skomplikowana. Na szczęście nadal możesz używać starych parametrów, a Google automatycznie przekształci je w nową wersję. Aby zobaczyć, co mam na myśli, sprawdź poniższy link.

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

Śmiało i daj mu szansę. Wpisz adres w cudzysłowach na adres początkowy i końcowy i wklej adres URL do przeglądarki! Zastąpiłem początek moim rodzinnym miastem Nowy Orlean i zakończę z Houston, TX, więc oto jak wygląda mój adres URL wskazówek dojazdu w Mapach Google:

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

To działa! Jak widać, Google Maps przekształca linki w coś o wiele bardziej skomplikowanego po pełnym załadowaniu mapy. Ok, więc skoro mamy już przyzwoity adres URL, który możemy przesłać do Map Google, musimy utworzyć prosty formularz z dwoma polami, jeden dla adresu początkowego i jeden dla adresu docelowego.

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


Wpisz swój początkowy adres:



Sprawdź kod powyżej. Pierwszy wiersz zaczyna się od formularza i mówi, że po kliknięciu przycisku przesyłania dane powinny zostać wysłane na maps.google.com/maps. The target = puste oznacza, że ​​chcemy, aby wynik został otwarty w nowym oknie. Następnie mamy pole tekstowe dla adresu początkowego, które jest puste.

Drugie pole tekstowe jest ukryte, a wartością jest docelowy adres, który chcemy. Na koniec jest przycisk przesyłania z tytułem "Wyznacz trasę". Teraz, gdy ktoś wpisze swój adres, otrzyma to:

Możesz dostosować trasę i mapę jeszcze bardziej, korzystając z kilku dodatkowych parametrów. Na przykład, powiedzmy, że nie chcesz, aby domyślny widok był mapą, ale chcesz, aby był Satelita i pokaż ruch drogowy.

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 layer = t i t = h pola w adresie URL. layer = t jest dla warstwy ruchu, t = h oznacza mapę hybrydową! t można również ustawić na m dla normalnej mapy, k dla satelity istr do terenu. z jest poziomem powiększenia i możesz go zmienić z 1 na 20.W powyższym adresie URL jest ustawiony na 7. Wystarczy przypiąć je do końcowego adresu URL, a otrzymasz wysoce dostosowany formularz Google Maps Get Directions na swojej stronie!

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