Jak osadzić mapę Google na swojej stronie

Osadzanie mapy Google

Jak osadzić mapę Google na stronie (responsywnie, leniwie, z dbałością o prywatność) | We.Inc

Osadź mapę Google w trzech krokach lub wygeneruj kod tutaj: responsywny iframe ładowany leniwie, opcjonalna wersja ładowana po kliknięciu dla ochrony prywatności oraz oficjalna opcja Maps Embed API.

Aby osadzić mapę Google, otwórz miejsce w Mapach Google, wybierz Udostępnij, a potem Umieść mapę i skopiuj kod HTML. Wklej go tam, gdzie ma się pojawić mapa. Dla lepszego efektu owiń iframe tak, by zmieniał rozmiar na telefonach, dodaj loading="lazy" i rozważ wersję ładowaną po kliknięciu, aby Google był kontaktowany dopiero wtedy, gdy odwiedzający poprosi o mapę.

Trzy sposoby na zdobycie kodu do osadzenia

Sposób
Klucz API
Uwagi

Udostępnij, Umieść mapę w Mapach Google
Nie
Oficjalny i najprostszy; skopiuj iframe, który otrzymasz

Maps Embed API (tryb place)
Tak, ograniczony do Twojej strony
Oficjalny, konfigurowalny przez adres lub miejsce, według Google bezpłatny

URL z adresem q= i output=embed
Nie
Popularny i wygodny, ale nieudokumentowany przez Google, więc może się zmienić

Poniższy generator napisze kod za Ciebie na podstawie adresu, Twojego własnego klucza Maps Embed API albo kodu otrzymanego od Google. Zawsze dodaje responsywny kontener i tytuł, a mapę może umieścić za przyciskiem ładowania po kliknięciu.

Na komputerze otwórz Mapy Google i wyszukaj swoją firmę lub adres.
Kliknij Udostępnij, potem kartę Umieść mapę, wybierz rozmiar i kliknij Kopiuj HTML.
Wklej kod do generatora poniżej albo po prostu wpisz swój adres, a potem wybierz kształt i opcje.
Skopiuj wynik do bloku HTML lub szablonu strony w swojej witrynie.
Sprawdź efekt na telefonie. Mapa powinna wypełniać szerokość, nie wychodząc poza ekran na boki.

Obok mapy podaj też adres jako tekst. Polegają na nim czytniki ekranu, wyszukiwarki i osoby z wolnym łączem.
Nadaj iframe'owi tytuł, na przykład Mapa pokazująca nasz sklep przy King Street. Bez niego technologie asystujące ogłoszą go jako ramkę bez nazwy.
Nie umieszczaj mapy na pierwszym ekranie strony, chyba że to jej główny cel. Jest ciężka i spowalnia pierwsze wyświetlenie.
Jeśli masz kilka lokalizacji, osadź jedną mapę na stronie każdej lokalizacji zamiast jednej zatłoczonej mapy na stronie kontaktowej.

Najczęściej zadawane pytania

Czy osadzanie Map Google jest darmowe?

Tak, w przypadku kodu z Udostępnij, Umieść mapę. Maps Embed API, które wymaga klucza, Google podaje jako bezpłatne. Inne produkty Map, takie jak mapa JavaScript z własnymi znacznikami, są rozliczane według użycia po przekroczeniu miesięcznego darmowego limitu, więc przed użyciem sprawdź aktualny cennik.

Dlaczego osadzona mapa wygląda na telefonach na malutką?

Skopiowany kod ustawia stałą szerokość i wysokość, na przykład 600 na 450 pikseli. Usuń je i owiń iframe w kontener używający CSS aspect-ratio, tak jak w wyniku generatora, aby mapa skalowała się razem z ekranem.

Czy osadzona mapa Google wpływa na prywatność lub RODO?

Załadowanie mapy wysyła do Google adres IP odwiedzającego i dane jego przeglądarki, a Google może ustawiać pliki cookie. Tam, gdzie obowiązują surowe zasady zgody, wiele stron pokazuje zastępczy element z przyciskiem Pokaż mapę i ładuje mapę dopiero po kliknięciu, i właśnie to robi opcja ładowania po kliknięciu. W każdym przypadku wspomnij o mapie w polityce prywatności.

Czy mogę osadzić trasę dojazdu lub własną mapę z kilkoma pinezkami?

Trasa: przed wybraniem Udostępnij użyj karty Trasa w Mapach Google albo trybu directions w Maps Embed API. Kilka pinezek: utwórz mapę w Google Moje Mapy, ustaw ją jako publiczną, a następnie użyj opcji Umieść na mojej stronie.

Czy osadzona mapa pomoże mojemu lokalnemu SEO?

Nie bezpośrednio. Lokalnemu wyszukiwaniu pomaga kompletny Profil Firmy w Google oraz spójna nazwa, adres i numer telefonu w całej sieci. Mapa pomaga odwiedzającym Cię znaleźć, i to wystarczający powód.

Domyślnie responsywnie i leniwie

Iframe z mapą to cała aplikacja webowa ładująca się wewnątrz Twojej strony. loading="lazy" każe przeglądarce poczekać, aż odwiedzający przewinie stronę w jej pobliże, co przyspiesza pierwsze wyświetlenie dla każdego, kto nigdy tak daleko nie przewinie.
Właściwość CSS aspect-ratio zachowuje kształt mapy przy każdej szerokości, więc stary trik z padding-bottom nie jest już potrzebny. Proporcje 4 na 3 dobrze pasują do telefonów; 16 na 9 do szerokich układów na desktopie.

Ładowanie po kliknięciu

Wersja ładowana po kliknięciu pokazuje lekki element zastępczy z przyciskiem. Dopiero gdy ktoś go naciśnie, strona tworzy iframe i kontaktuje się z Google. To szybsze i łaskawsze dla prywatności rozwiązanie, a link pod spodem nadal otwiera pełną mapę dla każdego, kto woli aplikację.

Responsywny kontener dla kodu skopiowanego z Google

Jeśli masz już skopiowany iframe od Google, wklej go do tego kontenera i usuń jego atrybuty width, height i style.

Responsywny kontener mapy z leniwym ładowaniem

Kontener zachowuje proporcje 4 na 3 przy każdej szerokości. Zastąp src wartością ze skopiowanego kodu.

Generator kodu do osadzenia mapy Google

Źródło

Z adresu

Wklej kod od Google

Klucz Maps Embed API

Kod lub URL z Udostępnij, Umieść mapę

Adres lub miejsce

Powiększenie: {n}

Klucz API (ogranicz go do swojej domeny)

Używa formy adresu q=, której Google nie dokumentuje. Jako oficjalną opcję użyj skopiowanego kodu lub klucza API.

Kształt

Tytuł dla czytników ekranu

Mapa pokazująca naszą lokalizację

Ładuj po kliknięciu (prywatność)

Podgląd wygenerowanego kodu mapy

Kopiuj kod do osadzenia

Wpisz adres lub wklej kod skopiowany z Map Google.

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony