Dodawanie mapy Google (widgetem HTML)

Na landing page'u warto nie tylko podać adres siedziby, ale również umieścić mapę, która ułatwi użytkownikom zlokalizowanie Twojej firmy. Mapę Google z jedną lub wieloma lokalizacjami dodasz do landing page'a w Landingi, umieszczając na stronie odpowiedni kod HTML.

UWAGA: Widget HTML nie jest dostępny dla kont na planie Core.

Dodawanie mapy Google

1. Wyszukaj adres na mapie Google. Kliknij przycisk Udostępnij. 

2. Przejdź do zakładki Umieszczanie mapy (1). Skopiuj wygenerowany HTML (2). 

3. W edytorze swojego landing page'a dodaj widget HTML. Kliknij w niego dwa razy, by przejść do edycji.

4. Wklej skopiowany HTML i zapisz zmiany.

5. Opublikuj landing page'a i upewnij się, że mapa wyświetla się prawidłowo.

Jeśli mapa zachodzi na inne elementy, wróć do edytora i przesuń element z mapą. Ponownie opublikuj landing page'a i upewnij się, czy mapa znajduje się w wybranym miejscu.

Dodawanie mapy Google z kilkoma lokalizacjami

1. Otwórz w przeglądarce aplikację Google My Maps. Przejdź do następnego kroku i kliknij czerwony przycisk Utwórz nową mapę.

2. Odszukaj wybraną lokalizację. 

3. Gdy zostanie wyszukana, kliknij w wyskakującym oknie Dodaj do mapy, po czy analogicznie wpisz kolejne lokalizacje (dodane lokalizacje będą pojawiać się w oknie po lewej).

4. Po dodaniu wszystkich lokalizacji wybierz Udostępnij (1) z okna po lewej. W wyskakującym oknie (2) dodaj nazwę i opis.

5. Oznacz mapę jako publiczną w Internecie. Zmień sposób udostępniania na Każda osoba mająca link i zapisz, klikając Gotowe.

6. W lewym górnym rogu pojawi się podana przez Ciebie nazwa mapy. Obok kliknij w ikonę trzech kropek i z listy rozwijanej wybierz Umieść na mojej stronie. Skopiuj kod HTML, który pojawi się w wyskakującym oknie.

7. Kod HTML wklej do swojego landing page'a analogicznie jak w pierwszym przykładzie (przy użyciu widgetu HTML).

Po wklejeniu kodu HTML opublikuj landing page i sprawdź, czy mapa wyświetla się prawidłowo.

Mapa responsywna

Aby Twoja mapa była responsywna i dostosowywała się wielkością do ekranu także na urządzeniach mobilnych, musisz zmienić kod HTML mapy i dodać własny CSS do landing page'a.

1. Kliknij dwa razy w widget HTML, by przejść do jego edycji.

2. W kodzie mapy znajdź parametry width (szerokość) i height (wysokość) (1). Wartość width odpowiada szerokości mapy na widoku desktopowym. Wartość height odpowiada wysokości mapy zarówno na widoku desktopowym, jak i na urządzeniach mobilnych. Dostosuj te wartości do swoich potrzeb.

Następnie dodaj fragment kodu (2):

class="responsive-map"

Zapisz i zamknij.

3. Wróć do Ustawień strony.

4. Kliknij Dodaj własny CSS.

5. Skopiuj i wklej następujący kod:

.responsive-map {
    max-width: 100%;
}

Następnie Zapisz i zamknij.

6. Opublikuj landing page'a.

Sprawdź, czy mapa wyświetla się poprawnie na obu widokach.