Krok 1. Znajdź miejsce w Mapach Google
Otwórz Mapy Google na komputerze i wyszukaj swoją firmę po nazwie. Jeśli firma ma Profil w Google, osadzaj właśnie go: wtedy na mapie będą nazwa, ocena i przycisk trasy, a nie sam punkt pod adresem. Jeśli profil nie jest jeszcze zweryfikowany, przyda się artykuł o weryfikacji Profilu Firmy.
Krok 2. Skopiuj kod
- Na karcie miejsca kliknij „Udostępnij”. Jeśli potrzebujesz samego fragmentu mapy bez karty, otwórz menu w lewym górnym rogu i wybierz opcję udostępniania lub umieszczania mapy.
- Przejdź na kartę „Umieść mapę”.
- Jeśli chcesz, wybierz rozmiar i przesuń mapę tak, by miejsce było na środku.
- Kliknij „Kopiuj HTML”.
Otrzymasz kod w rodzaju <iframe src="https://www.google.com/maps/embed?pb=…"></iframe>.
Krok 3. Wstaw kod na stronę
Wklej kod w wybrane miejsce strony. Większość edytorów wizualnych ma do tego tryb HTML albo osobny blok na kod. Pamiętaj, że niektóre edytory i filtry CMS ze względów bezpieczeństwa wycinają iframe. Jeśli po zapisaniu mapy nie widać, sprawdź ustawienia filtrowania tekstu dla swojej grupy użytkowników.
Krok 4. Zrób mapę responsywną
W kodzie z Map Google jest stała szerokość, na przykład width="600". Na telefonie taka mapa wychodzi poza ekran. Najprościej zmienić szerokość na 100%:
<iframe src="https://www.google.com/maps/embed?pb=…"
width="100%" height="400" style="border:0;"
loading="lazy" referrerpolicy="no-referrer-when-downgrade"
title="Nasze biuro na mapie"></iframe>
Atrybut loading="lazy" odkłada ładowanie mapy, dopóki odwiedzający do niej nie przewinie, i przyspiesza stronę. Atrybut title pozwala czytnikom ekranu nazwać mapę.
Jak osadzić trasę dojazdu
Wyznacz trasę w Mapach Google, wybierz wariant, kliknij „Udostępnij” → „Umieść mapę” → „Kopiuj HTML”. Tak wygodnie pokazać na przykład, jak dojść do biura z dworca lub parkingu.
Kiedy bez klucza API się nie obejdzie
Mapa z „Udostępnij” wystarcza dla jednego punktu lub trasy. Klucz Google Maps Platform jest potrzebny, jeśli chcesz:
- pokazać na jednej mapie kilka oddziałów lub obiektów z własnymi znacznikami;
- podpowiadać adres podczas wpisywania w formularzu zamówienia lub dostawy;
- wyliczać odległość lub koszt dostawy;
- dopasować mapę do kolorów firmowych.
Do osadzania map przez API Google ma Maps Embed API: według Google wszystkie jego żądania są bezpłatne i bez limitu. Pozostałe API są płatne po przekroczeniu darmowej puli, dlatego klucz ogranicza się do domeny i pilnuje kosztów.
Prywatność. Osadzona mapa ładuje się z serwerów Google i może zapisywać pliki cookie. Na stronach dla odwiedzających z UE uwzględnia się to w banerze cookie i polityce prywatności — na przykład pokazując mapę po wyrażeniu zgody lub po kliknięciu.
Częste błędy
- Osadzony punkt pod adresem zamiast Profilu Firmy — klient nie widzi nazwy ani opinii.
- Stała szerokość psuje układ na telefonie.
- Mapa na każdej podstronie — to zbędne ładowanie, wystarczy strona „Kontakt”.
- Zamiast mapy wstawiony zrzut ekranu — nie da się z niego wyznaczyć trasy.
W skrócie
- Znajdź firmę w Mapach Google, najlepiej jej Profil.
- „Udostępnij” → „Umieść mapę” → „Kopiuj HTML”.
- Wklej kod w trybie HTML edytora.
- Zmień szerokość na 100% i zostaw
loading="lazy".
- Do wielu punktów, podpowiedzi adresu i wyliczania dostawy potrzebny jest klucz API.
Jeśli potrzebujesz mapy z wieloma punktami, podpowiedzi adresu w formularzach albo trasy do klienta, możemy podłączyć Google Maps do strony przez API: przygotujemy dostęp, zabezpieczymy klucz i ograniczymy koszty.
