Dodaj Mapy Google Dojazd do Twojej witryny
Mimo, że istnieje wiele aplikacji i usług mapowania, które umożliwiają przejście z punktu A do punktu B, ostatecznym królem map jest Google Maps. Używam go na moim komputerze, tablecie i 90% czasu na smartfonie. Ma najlepsze dane, najwięcej opcji nawigacji i routingu oraz fajne funkcje, takie jak Street View i spacery, jazda na rowerze i informacje o transporcie masowym.
Ale co, jeśli musisz użyć mapy lub wskazówek poza witryną Google? Załóżmy, że masz własną stronę internetową lub osobisty blog, a goście mogą odwiedzić Twoją witrynę, wpisać adres, z którego będą pochodzić i automatycznie uzyskać wskazówki dojazdu do miejsca wydarzenia!
Cóż, jest kilka sposobów, aby to osiągnąć. Najłatwiej jest po prostu osadzić mapę 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.
Osadź mapę Google
Jeśli chcesz wyświetlać tylko kierunki z jednej lokalizacji do drugiej, najłatwiej jest osadzić mapę, którą przeglądasz, za pomocą kodu osadzania. Najpierw idź i ustaw dowolne kierunki 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 Osadź mapę patka. Tutaj możesz wybrać rozmiar mapy, a następnie skopiować kod iframe i upuścić go na dowolnej stronie.
Jedynym minusem tej metody jest to, że użytkownik widzi mapę statyczną. W drugiej z poniższych metod możesz utworzyć formularz, w którym użytkownik może wpisać dowolny adres początkowy i wygeneruje mapę z tego adresu na wybrany adres docelowy.
Utwórz formularz Google Maps
Aby zilustrować, co rozumiem przez drugą metodę, napisz i wpisz adres USA w polu poniżej, aby uzyskać wskazówki od swojej lokalizacji do mojego domu:
Fajne hę? 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ż doskonałe rozwiązanie dla witryn internetowych małych firm, ponieważ można je rzucić na stronę kontaktową, a ludzie mogą szybko uzyskać wskazówki, zamiast kopiować adres, otwierać nowe okno, a następnie wpisywać adres początkowy.
Jak więc zrobić tworzenie zmodyfikowanego pola „Wskazówki dojazdu”? Po pierwsze, musimy uzyskać poprawną składnię adresu URL, którego Google używa do wskazówek. Na szczęście możemy dowiedzieć się, uzyskując wskazówki między dwoma miejscami, a następnie po prostu skopiować adres URL z paska adresu. Możesz także kliknąć małą ikonę koła zębatego w prawym dolnym rogu strony i wybrać Udostępnij lub umieść mapę.
Karta Udostępnij link zawiera adres URL, który jest tym samym adresem URL w pasku adresu przeglądarki. Poszedłem do przodu i wkleiłem cały adres 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
Yikes! To dość długo! Jest tam wiele rzeczy, z których większość nie ma sensu! Parametry URL Google Maps były kiedyś 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 spróbuj. Wpisz adres w cudzysłowie dla adresu początkowego i końcowego i wklej adres URL do przeglądarki! Zacząłem od mojego rodzinnego miasta Nowy Orlean i kończę na Houston w Teksasie, więc wygląda to tak, jak wygląda adres URL moich map Google:
http://maps.google.com/maps?saddr=”new orleans, la ”& daddr =” houston, tx ”
To działa! Jak widać, Mapy Google przekształcają linki w coś znacznie bardziej skomplikowanego, gdy mapa w pełni się ładuje. Ok, więc teraz, gdy mamy rozsądny adres URL, który możemy przekazać do Google Maps, musimy utworzyć prosty formularz z dwoma polami, jednym dla adresu początkowego i drugim dla adresu docelowego.
Jeśli chcesz, aby ludzie wpisywali swój adres i otrzymywali wskazówki dojazdu do twojego miejsca, będziemy chcieli ukryć drugie pole i ustawić go na adres docelowy.
Wpisz swój adres początkowy:
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 maps.google.com/maps. The target = puste oznacza, że chcemy, aby wynik otwierał się 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 pożą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 dostosować kierunki i mapować jeszcze więcej dzięki kilku dodatkowym parametrom. Na przykład, powiedzmy, że nie chcesz, aby domyślny widok był mapami, ale zamiast tego chcesz go mieć 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 warstwa = t i t = h pola w adresie URL. warstwa = t oznacza warstwę ruchu, a t = h oznacza mapę hybrydową! t można także ustawić na m dla normalnej mapy, k dla satelity i str dla terenu. z to poziom powiększenia i możesz go zmienić z 1 na 20. W powyższym adresie URL jest ustawiony na 7. Wystarczy przypiąć je do ostatecznego adresu URL, a teraz masz w swojej witrynie wysoce dostosowane mapy Google Wskazówki dojazdu!
Masz z tym jakieś problemy, opublikuj komentarz, a postaram się pomóc! Cieszyć się!
