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.