Osadzanie map Google Maps na stronie

Osadzanie map Google Maps na stronie

Jeśli prowadzisz firmę lokalną, organizujesz wydarzenie lub chcesz po prostu pokazać użytkownikowi określoną lokalizację, mapa Google może być idealnym rozwiązaniem. Zamiast podawać sam adres, możesz osadzić w pełni interaktywną mapę, którą użytkownik przesunie, powiększy, a nawet kliknie, by rozpocząć nawigację.

Najprostszym sposobem na osadzenie mapy jest użycie znacznika <iframe> – bez konieczności korzystania z API czy tworzenia konta w Google Cloud.

Jak wygenerować kod do osadzenia mapy?

1. Wejdź na stronę Google Maps.
2. Wyszukaj adres lub miejsce, które chcesz osadzić.
3. Kliknij przycisk „Udostępnij”, a następnie zakładkę „Umieść mapę”.
4. Skopiuj kod <iframe>, który się pojawi.

Kod będzie wyglądał mniej więcej tak:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20041.212733894372!2d17.027882946197252!3d51.105663205492995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470e40c57467f87b%3A0xe72be8d8d320d5d8!2sWroc%C5%82awski%20Rynek!5e0!3m2!1spl!2spl!4v1744099848342!5m2!1spl!2spl"
width="600" height="450" style="border:0;"allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Efekt działania:

Opis najważniejszych atrybutów iframe

• src – adres mapy z zakodowanymi współrzędnymi i parametrami,
• width i height – rozmiar mapy w pikselach,
• style=”border:0;” – usuwa domyślną ramkę iframe,
• allowfullscreen – umożliwia powiększenie mapy do pełnego ekranu,
• loading=”lazy” – opóźnia ładowanie mapy do momentu, aż pojawi się w widoku (poprawia szybkość strony).

Responsywna mapa – jak ją zrobić?

Tak jak w przypadku osadzania YouTube, możesz umieścić mapę w kontenerze, który dostosuje się do szerokości ekranu. Poniżej przykład z CSS:

<style>
.responsive-map {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.responsive-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="responsive-map">
  <iframe 
    src="https://www.google.com/maps/embed?pb=..." 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
  </iframe>
</div>

Efekt działania:

(Mapa dostosowuje się automatycznie do szerokości ekranu – idealna na urządzenia mobilne.)

Ćwiczenie w JSFiddle – osadź własną mapę

Spróbuj samodzielnie osadzić mapę Google w responsywnym kontenerze. Możesz użyć domyślnej lokalizacji lub wygenerować własny kod w Google Maps.

👉 Otwórz JSFiddle i przetestuj osadzanie mapy

<div class="responsive-map">
  <iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2436.696847082907!2d20.9848022!3d52.2296756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ecc66997b8497%3A0xe3f2f89bd1a3e94e!2sWarszawa!5e0!3m2!1spl!2spl!4v1615999086512!5m2!1spl!2spl" 
    style="border:0;" 
    allowfullscreen 
    loading="lazy">
  </iframe>
</div>

<style>
.responsive-map {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.responsive-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Możesz podmienić link na swój własny, np. z adresem Twojej firmy, szkoły lub ulubionej kawiarni!