Jak dodać Google Maps do strony Divi?
Mapa Google na stronie kontaktowej to standard. Pomaga klientom znaleźć Twoje biuro, restaurację, gabinet. W Divi można to zrobić na kilka sposobów. Oto pełen przewodnik.
Sposób 1: Wbudowany moduł Map (najprościej)
Divi Builder → dodaj moduł „Map”. Wprowadź adres lub współrzędne GPS. Ustaw zoom, styl mapy. Gotowe. Wymaga jednak Google Maps API Key.
Krok: Pobranie Google Maps API Key
1. Idź na console.cloud.google.com. 2. Stwórz nowy projekt. 3. Włącz: Maps JavaScript API, Places API, Geocoding API. 4. Stwórz Credentials → API Key. 5. Wklej w Divi → Theme Options → Maps API Key.
Sposób 2: Embed mapy Google
Bez API Key. Idź na maps.google.com, znajdź swoje miejsce, kliknij „Udostępnij” → „Osadź mapę” → skopiuj iframe. Wklej w Divi do modułu „Code”.
Sposób 3: WP Google Maps (wtyczka)
Najpopularniejsza wtyczka mapowa. Pozwala dodać wiele pinów, customowe ikony, kategorie miejsc. Idealna dla sieci sklepów, oddziałów.
Optymalizacja prędkości — mapa lazy load
Mapa Google jest ciężka (1-2MB). Lazy load: ładuj mapę dopiero gdy jest widoczna. Wtyczki: WP Rocket lazy load, Lazy Load by WP Rocket, A3 Lazy Load.
Pobierz Divi -10% →
Powiązane
Jak dodać Mapy Google w Divi?
Divi ma moduł Map, który wymaga klucza API Google Maps. Utwórz projekt w Google Cloud Console, włącz „Maps JavaScript API”, wygeneruj klucz i wklej go w Divi → Theme Options → Integration / General. Następnie dodaj moduł Map, wskaż adres pinezki i ustaw poziom przybliżenia. To najprostszy sposób na interaktywną mapę.
Mapa bez klucza API — alternatywy
Jeśli nie chcesz konfigurować klucza API, możesz osadzić mapę przez iframe (Google Maps → Udostępnij → Umieść mapę) w module Code. To prostsze, choć daje mniej kontroli nad stylem. Dla firm lokalnych warto, by adres na mapie był identyczny z danymi NAP w wizytówce Google.
Optymalizacja map pod wydajność
- Lazy-load mapy — ładuj mapę dopiero po przewinięciu, by nie spowalniać LCP.
- Statyczny obraz zamiast interaktywnej — na stronie kontaktowej często wystarczy obraz z linkiem.
- Ogranicz liczbę map — każda mapa to dodatkowe skrypty Google.
Mapa a SEO lokalne
Sama mapa nie poprawia rankingu, ale wspiera SEO lokalne, gdy połączysz ją ze schematem LocalBusiness i spójnym NAP. Klikalny adres, godziny otwarcia i link do trasy dojazdu poprawiają doświadczenie użytkownika i konwersję z wyszukiwania lokalnego.
Mapy Google a koszty API
Google Maps Platform ma darmowy limit miesięczny, ale przy dużym ruchu może generować opłaty. Dla zwykłej strony kontaktowej limit jest wystarczający. Ogranicz koszty, ustawiając restrykcje klucza API (tylko Twoja domena), wyłączając niepotrzebne API i stosując statyczną mapę zamiast interaktywnej tam, gdzie nie jest konieczna.
Alternatywy dla Google Maps
- OpenStreetMap — darmowa, bez klucza API (przez Leaflet).
- Mapbox — ładne mapy, hojny darmowy limit.
- Statyczny obraz mapy — najlżejszy, z linkiem do nawigacji.
Mapa na stronie kontaktowej
Na podstronie kontaktu mapa pomaga klientom trafić do siedziby. Połącz ją z klikalnym adresem, godzinami otwarcia i przyciskiem „Wyznacz trasę”. Upewnij się, że pinezka wskazuje dokładną lokalizację — błędne współrzędne frustrują odwiedzających i szkodzą wrażeniu profesjonalizmu.
Mapa a wersja mobilna
Na telefonach interaktywna mapa potrafi „łapać” przewijanie strony i frustrować użytkownika. Włącz opcję wymagającą kliknięcia, by aktywować mapę, lub pokaż statyczny obraz z przyciskiem „Otwórz w Mapach Google”. Na mobile priorytetem jest płynne przewijanie i szybki dostęp do nawigacji, nie pełna interaktywność.
Wiele lokalizacji na jednej mapie
Jeśli masz kilka punktów (sieć placówek), pokaż je na jednej mapie z pinezkami i listą adresów. Każda lokalizacja powinna mieć też osobną podstronę z własnym schematem LocalBusiness i NAP — to wspiera SEO lokalne dla każdego miasta osobno, a mapa zbiorcza ułatwia klientom wybór najbliższego punktu.
