Wstawianie map Google Maps na stronę internetową bez klucza API

Kilka miesięcy wcześniej opublikowałem artykuł odnośnie wstawiania map Google Maps przy wykorzystaniu klucza API. Artykuł wtedy był odpowiedzią na zmiany Google, gdzie wiele działających dotychczas map na stronach internetowych przestało po prostu działać z dnia na dzień.

Opowiedzieliśmy sobie wtedy jak generuje się taki klucz, oraz jak wykorzystać. W dużym skrócie większość wbudowanych widżetów Google Maps w naszych szablonach na Wordpress wykorzystuje takowy klucz. Dzięki niemu, mapa może być dużo bardziej zaawansowana. Pokazywać kilka punktów, lub zaznaczony obszar nas interesujący. Niestety wiąże się to z dodatkowymi zobowiązaniami, a przy dużym ruchu – również opłatami.

Wprowadzenie do embed Google Maps

Dlatego dzisiaj przetestujemy sobie rozwiązanie użycia map Google Maps bez wykorzystania klucza API, czyli embed Google Maps . Taka mapa nie będzie aż tak zaawansowana, aczkolwiek bez problemu przedstawi naszym klientom gdzie się znajdujemy, oraz w jaki sposób do nas dojechać. Oczywiście w module wykorzystującym API nie musicie go podawać, ale wtedy zobaczycie ładny napis na waszych mapach “for development purposes only” albo po prostu nie będzie tam nic.

Czy taka forma również generuje jakieś koszty? Nie, ten format jest darmowy i dużo mniej skomplikowany. Zaznaczyć muszę, że ta forma instalacji jednak nie jest do końca domyślna, gdyż jeżeli posiadamy wbudowane narzędzia Google Maps (na API) to musimy je po prostu porzucić – co pokażę dokładnie na zrzutach ekranu w dalszej części artykułu.

Dostępne funkcję w embed Google Maps

Każdy użytkownik naszej strony internetowej lub sklepu, może skorzystać z wstawionej przez nas mapy na kilka sposobów. Każdy, ułatwi dotarcie do nas. W przypadku komputerów, klient poprzez wstawioną mapę może przejść na podgląd „Street view” – aby zapoznać się z najbliższą naszą okolicą lub przestudiować trasę dojazdu.

W przypadku urządzeń mobilnych jest jeszcze więcej plusów, gdyż klient wchodząc na naszą stronę internetową i korzystając z mapy, może od razu przejść do aplikacji Google Maps (w telefonach z Androidem). Gdzie docelowo aplikacja wytyczy trasę do naszej lokalizacji. Osoby jeżdżące komunikacją publiczną, docenią fakt wytyczenia podróży pociągiem lub autobusem. Aplikacja zamiast trasy samochodowej, wyświetli proponowane trasy połączeń komunikacyjnych.

Umieszczenie embed Google Maps na naszej stronie WordPress

Przede wszystkim musimy przejść na komputerze do serwisu Google Maps : https://www.google.pl/maps/preview

Następnie należy wyszukać adres, który chcemy zamieścić na stronie internetowej w zakładce kontakt. W przypadku naszej firmy, to będzie Sosnowiecka 24, Dąbrowa Górnicza

W lewej belce widzimy opcje z ikonami, ostatnia z nich to „Udostępnij”. Po wybraniu opcji, otworzy się nam okienko jak poniżej:

Wybieramy opcję „Umieszczanie mapy”:

Nad podglądem mapy, mamy do wyboru rozmiary mapy oraz fragment kodu HTML – który należy skopiować.

Powinien wyglądać w ten sposób:

Dla bardziej zaawansowanych użytkowników, kluczowa może być końcowa sekcja kodu z ustawieniami. Jeżeli chcemy aby nasza mapa miała określony rozmiar, należy w polach width (szerokość) oraz height (wysokość) podać oczekiwany rozmiar (ważna kwestia, rozmiar ten musi być podany w pikselach).

Ostatnim krokiem jest już dodanie naszego kodu w trybie edycji naszej strony internetowej. W zależności czy wasz szablon posiada jeden z dostępnych page builderów, czy domyślnego Gutenber’ga. Wybieracie opcję tekstu lub kodu, po czym wklejacie skopiowany fragement:

Jeszcze jedno! W trybie edycji nie zobaczycie podglądu mapy, jedynie sam kod. Dopiero po zaktualizowanie zakładki i przejściu na jej wersje wizualną zobaczycie efekty waszej pracy.

Podsumowanie

Poznaliśmy dzisiaj drugi sposób zamieszczania map w systemie CMS WordPress, który Wam pasuje już zdecydujcie sami 🙂

Jeżeli macie inne pytania odnośnie tworzenia stron internetowych, administracji stron internetowych lub pozycjonowaniem stron śmiało piszcie do nas.