Jak dodać mapę Google do strony internetowej?

Mapa Google na stronie internetowej to dziś niemal standard – szczególnie na stronach firmowych, ogłoszeniowych czy kontaktowych. W tym wpisie pokażę dwa najpopularniejsze sposoby wyświetlania mapy Google:

1. Prosty iframe – bez klucza API
2. Bardziej zaawansowane Google Maps API – z własnym kluczem i pełną kontrolą

Każde rozwiązanie ma swoje zalety i zastosowania – sprawdź, które będzie najlepsze dla Twojej strony.

Mapa Google przez iframe (bez klucza API)

To najprostszy i najszybszy sposób na dodanie mapy. Nie wymaga:

• konta Google Cloud
• klucza API
• JavaScriptu

✔️ Zalety

• brak konfiguracji
• działa od ręki
• idealne do stron wizytówek i prostych landingów

❌ Ograniczenia

• brak możliwości modyfikacji mapy
• brak markerów dynamicznych
• brak interakcji z JS

Przykład iframe na podstawie adresu

Używamy urlencode dlatego że adres nie może zawierać spacji.

<?php
$address = 'Chojnice ul. Gdańska 95';
$addressEncoded = urlencode($address);
?>

<iframe
  src="https://www.google.com/maps?q=<?php echo $addressEncoded; ?>&output=embed"
  width="100%"
  height="450"
  style="border:0;"
  loading="lazy"
  allowfullscreen>
</iframe>

Możemy także użyć współrzędnych:

<?php
$lat = 53.6956;
$lng = 17.5570;
?>

<iframe
  src="https://www.google.com/maps?q=<?php echo $lat; ?>,<?php echo $lng; ?>&output=embed"
  width="100%"
  height="450"
  style="border:0;"
  loading="lazy"
  allowfullscreen>
</iframe>

Przykład iframe na podstawie współrzędnych

<iframe
  src="https://www.google.com/maps?q=53.6956,17.5570&output=embed"
  width="100%"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy">
</iframe>

Mapa Google z użyciem Google Maps API (z kluczem)

Ten sposób daje pełną kontrolę nad mapą:

• własne markery
• zoom
• blokada scrolla

Wymagania

• konto w Google Cloud
• włączona usługa Maps JavaScript API
• wygenerowany klucz API

HTML – kontener na mapę

<div id="google_maps" style="width:100%; height:400px;"></div>

JavaScript

<script>
function initGoogleMap() {
  const myLatlng = { lat: 53.6956, lng: 17.5570 };

  const map = new google.maps.Map(document.getElementById("google_maps"), {
    zoom: 10,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  });

  new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: "Przykładowa lokalizacja"
  });
}
</script>

<script
  src="https://maps.googleapis.com/maps/api/js?key=TWOJ_KLUCZ_API&callback=initGoogleMap&language=pl"
  async
  defer>
</script>

Ważne:

• callback=initGoogleMap musi odpowiadać nazwie funkcji JS
• klucz API warto ograniczyć domeną w Google Cloud

Jak wygenerować klucz API do Google Maps?

Zaloguj się do Google Cloud

Wejdź na stronę Google Cloud i zaloguj się na konto Google (to samo, którego używasz np. do Gmaila): https://cloud.google.com/

Utwórz nowy projekt

Jeśli nie masz jeszcze projektu:

1. Kliknij Select project (u góry)
2. Wybierz New project
3. Nadaj nazwę, np. Mapa strony www
4. Kliknij Create

Klucz API zawsze przypisany jest do projektu.

Włącz Maps JavaScript AP

Po utworzeniu projektu:

1. Przejdź do APIs & Services → Library
2. Wyszukaj Maps JavaScript API
3. Kliknij Enable

Bez tego mapa nie zadziała, nawet jeśli masz klucz.

Wygeneruj klucz API

Teraz czas na klucz:

1. Wejdź w APIs & Services → Credentials
2. Kliknij Create credentials
3. Wybierz API key

Klucz zostanie wygenerowany od razu.

Zabezpiecz klucz API (BARDZO WAŻNE)

Domyślnie klucz działa wszędzie — to niebezpieczne.

Kliknij wygenerowany klucz i ustaw ograniczenia:

🔒 Ograniczenie aplikacji

• Application restrictions
• Wybierz: HTTP referrers (web sites)
• Dodaj swoją domenę, np.:

https://twojastrona.pl/*
https://www.twojastrona.pl/*

🔒 Ograniczenie API

• API restrictions
• Wybierz: Restrict key
• Zaznacz tylko:
  • ✅ Maps JavaScript API

Kliknij Save

---

Włącz rozliczenia

Google wymaga podpięcia karty płatniczej, nawet jeśli mieścisz się w darmowym limicie.

W praktyce:

• większość małych stron nie generuje kosztów
• limit darmowy wystarcza na tysiące wyświetleń mapy miesięcznie

Podsumowanie

Jeśli potrzebujesz szybkiej mapy kontaktowej – iframe będzie idealny.
Jeśli tworzysz rozbudowaną stronę lub aplikację, zdecydowanie postaw na Google Maps API.