Jak dodać google maps iframe z wieloma lokalizacjami w WordPress

W tym artykule przedstawimy jak w szybki i prosty sposób dodać Google Maps iframe z wieloma lokalizacjami na swoją stronę internetową WordPress. Będzie to bardzo łatwe i krótkie zadanie, natomiast jeśli tego nigdy nie robiłeś – zdecydowanie ten artykuł jest dla Ciebie.

Tworzymy iframe z google maps

Naszą mapę umieścimy za pomocą pluginu WPBakery, natomiast sama mapa będzie znajdować się w znaczniku <iframe/>. Znacznik ten możesz umieścić w dowolnym miejscu na stronie przy użyciu dowolnych narzędzi i niekoniecznie w WordPress. W tym poradniku pokażę Ci jak stworzyć strukturę do umieszczenia mapy poprzez WPBakery, a następnie sam proces tworzenia mapy.

Przygotowujemy strukturę do dodania mapy google

Pierwszym krokiem jest stworzenie kontenera, który będzie mieścił naszą mapę. Chcemy aby mapa była na pełną szerokość ekranu, dlatego dodajemy Row o właściwości Stretch row and content (no paddings)

Teraz do stworzonego kontenera dodajemy mapę za pomocą wbudowanego widgetu Google Maps.

Jeśli mamy już dodaną podstawową mapę google, przechodzimy do jej konfiguracji.

Iframe z mapą, którą teraz dodał plugin WPBakery zawiera randomową lokalizację i jeden znacznik. Naszym celem jest stworzenie mapy na całą rozdzielczość ekranu, która będzie zawierać kilka znaczników lokalizacji wybranych przez nas.

Ustalamy w kodzie Map embed iframe width=”100%”, aby szerokość mapy była maksymalna, następnie w height ustalamy jak wysoka ma być nasza mapa w naszym przypadku będzie to 600px.

Teraz możemy przejść do tworzenia własnej mapy.

Tworzymy mapę z wieloma punktami lokalizacji przy pomocy Google Maps Map Maker

Po pierwsze musimy być zalogowani na swoje konto Google. Potem wchodzimy w link: https://www.google.com/maps/about/mymaps/

Klikamy przycisk „Wypróbuj” i tworzymy nową mapę.

Wpisujemy porządaną lokalizację w której chcemy dodać znacznik – w naszym przypadku będzie to Poznań.

Następnie klikamy na ikonkę znacznika i dodajemy znacznik.

Dodajemy kolejny znacznik tą samą opcją. Później przechodzimy do opcji „Umieść na mojej stronie” i kopiujemy kod w nim zawarty.

Wklejamy nasz iframe wygenerowany przez Google pamiętając aby zachować wcześniejszą szerokość i wysokość iframe’a.

Otrzymujemy następujący widok na stronie:

Możemy oczywiście w dowolny sposób wpływać na mapę wyświetloną na stronie. Możemy stworzyć trasę pomiędzy lokalizacjami, zmienić ich nazwę oraz opis, a także możemy zmieniać obraz mapy i kolory pinezek.

Podsumowanie

Dodawanie iframe z Google Maps na stronę jest rzeczą banalną i bardzo często stosowaną na stronach internetowych. Nie każdy jednak wie, że możemy tworzyć takie mapy przy pomocy Google Map Maker, który umożliwia nam więcej opcji niż podstawowe narzędzie do udostępniania Google Maps.

Zapraszam do odwiedzenia listy naszych artykułów, gdzie dowiesz się wiele więcej na temat WordPress i nie tylko: Przydate artykuły.