Aby dodać mapę Google do strony HTML, masz do wyboru kilka metod: najprostszą, niewymagającą rejestracji klucza API (wklejenie gotowego kodu „osadzenia”), oraz bardziej zaawansowaną – poprzez Google Maps JavaScript API z własnymi ustawieniami i możliwością dodawania znaczników. Poniższy poradnik pokazuje krok po kroku oba rozwiązania oraz zastosowania praktyczne mapy na stronie.
Osadzenie mapy Google poprzez gotowy iframe (najprostszy sposób)
To najłatwiejsza metoda, nie wymaga wiedzy programistycznej ani rejestracji w Google Cloud. Sprawdza się świetnie, jeśli chcesz tylko wyświetlić wybrany adres lub punkt na mapie, np. lokalizację firmy na podstronie „Kontakt”.
Kroki –
- Wejdź na Google Maps.
- Wyszukaj miejsce, które chcesz pokazać.
- Kliknij przycisk „Udostępnij”.
- Wybierz zakładkę „Umieszczanie mapy”.
- Wybierz rozmiar mapy (np. mała, średnia, duża lub niestandardowa).
- Skopiuj wygenerowany kod HTML iframe.
- Wklej kod do wybranego miejsca w kodzie HTML swojej strony (najczęściej sekcja Kontakt lub stopka).
Przykład kodu –
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2436.0000000!2d20.0000000!3d52.0000000!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x000000000000000000%3A0x0000000000000000!2sTWOJA+FIRMA!5e0!3m2!1spl!2spl!4v1593683250883!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
Zastosowania –
- mapa dojazdu na stronie kontaktowej,
- zaznaczenie lokalizacji oddziału, sklepu, restauracji lub eventu.
Integracja Google Maps za pomocą JavaScript API (zaawansowana)
To rozwiązanie daje pełną kontrolę nad wyglądem, funkcjonalnością i interaktywnością mapy. Umożliwia dodawanie własnych znaczników, stylów oraz dynamiczne ładowanie map według potrzeb.
Kroki –
- Uzyskaj klucz API –
- musisz posiadać konto Google, utworzyć projekt w Google Cloud Platform i wygenerować własny klucz API dla Google Maps JavaScript API,
- Dodaj skrypt ładujący API do kodu HTML –
- umieść w sekcji
<head>lub przed zamknięciem<body>:
<script src="https://maps.googleapis.com/maps/api/js?key=TWOJ_KLUCZ_API&callback=initMap" async defer></script>
- Dodaj kontener na mapę –
<div id="map" style="width: 100%; height: 400px;"></div>
- Dodaj funkcję inicjalizującą mapę (JavaScript) –
<script>
function initMap() {
// Lokacja [lat, lng]
const location = { lat: 52.2297, lng: 21.0122 };
// Tworzenie obiektu mapy
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: location,
});
// Znacznik
const marker = new google.maps.Marker({
position: location,
map: map,
title: "Moja Lokalizacja"
});
}
</script>
Uwagi –
- funkcja
initMap()zostanie wywołana automatycznie po załadowaniu biblioteki map, - pamiętaj, aby użyć własnego klucza API w miejsce „TWOJKLUCZAPI”.
Zastosowania –
- zaznaczanie wielu lokalizacji (np. sieć sklepów),
- interaktywne wyszukiwanie najbliższych punktów,
- prezentowanie różnych danych na mapie (np. statystyki, zasięg dostawy),
- personalizacja wyglądu mapy (np. niestandardowe znaczniki, zmiana kolorystyki).
Wersja uproszczona – nowy komponent <gmp-map> (HTML Web Component)
Dla jeszcze szybszego wdrożenia Google oferuje komponent <gmp-map> – nowoczesny sposób na wstawienie mapy do HTML.
Przykładowy kod –
<script src="https://maps.googleapis.com/maps/api/js?key=TWOJ_KLUCZ_API&libraries=maps,marker" defer></script>
<gmp-map center="52.2297,21.0122" zoom="12" style="height: 400px; width: 100%;"></gmp-map>
Właściwości:
center– współrzędne centrum mapy,zoom– poziom powiększenia.
Zastosowania –
- proste osadzenie podstawowej mapy bez pisania osobnego kodu JavaScript,
- generowanie nowoczesnej, responsywnej mapy w kilku linijkach kodu.
Dodatkowe wskazówki
- rozmiar mapy (dla iframe i kontenera
<div>) ustawiasz przez CSS, - na stronach responsywnych najlepiej nadać mapie szerokość
100%i wysokość wpx, - aby mapa była dostępna dla wszystkich użytkowników, zadbaj o odpowiedni kontrast, podpisy i alternatywne opisy.
Najczęstsze zastosowania mapy Google na stronie
- Strona firmowa – podstrona „Kontakt” z dojazdem;
- Wydarzenia – pokazanie miejsca eventu;
- Sieci punktów sprzedaży – wskazanie wszystkich oddziałów na mapie;
- Rezerwacje noclegów lub usług – pozwalają klientowi znaleźć najbliższy punkt.
Wybierz metodę odpowiednią do swoich potrzeb – od prostego „iframe” po pełną integrację API z własnymi danymi i funkcjonalnością.
