Jak wstawić mapę Google na stronę www w html?

jak wstawic mape google na strone www w html

Mapa Google z siedzibą firmy umieszczona na jej stronie internetowej to duże ułatwienie dla klientów poszukujących jej siedziby. Dzięki takiej mapce klienci nie tylko zorientują się w lokalizacji, ale również jednym kliknięciem ustawią do niej trasę w nawigacji, zapiszą adres na swoim koncie Google czy zerkną na opinie pozostawione przez innych użytkowników.

Aby wstawić mapę Google na swoją stronę, należy ją wygenerować. W tym celu należy wejść w przeglądarkową wersję Google Maps i wyszukać adres firmy bądź innego miejsca, którego mapę chcemy zaimplementować na stronie.

Gdy po lewej stronie ekranu znajdować się już będzie panel z informacjami o danym miejscu, należy wejść w menu za pomocą przycisku z ikoną trzech poziomych kresek. Tam spośród wielu opcji należy wybrać “udostępnij lub umieść mapę“.

Po naciśnięciu zobaczymy okienko z dwoma zakładkami – pierwsza umożliwi podzielenie się mapą z innym użytkownikiem internetu przez prywatną wiadomość, a druga umieszczenie mapy Google na stronie internetowej.

Tutaj można dopasować rozmiar przyszłej mapy – do wyboru mamy rozmiar mały, średni, duży a także niestandardowy, w którym można określić samemu szerokość i wysokość mapy w pikselach. Każdy wymiar zostaje nam na bieżąco wyświetlony, by wybór był łatwiejszy. Po określeniu, jaki rozmiar ma przyjąć mapka, należy skopiować znajdujący się obok kod.

Jak wstawić mapę Google na stronę krok po kroku

Wygenerowany kod html należy umieścić w kodzie strony. Jeśli strona oparta jest na systemie zarządzania treścią, na przykład na WordPressie, edytor nowego postu albo strony posiadać będzie opcję wklejenia kodu. W ten sposób w nowym wpisie albo na podstronie można szybko umieścić mapkę. Taką mapę można również umieścić w widgecie w dowolny miejscu strony.

W przypadku, gdy strona www nie korzysta z WordPressa ani podobnych rozwiązań, wygenerowany kod należy wstawić samemu. Należy wówczas samodzielnie edytować plik index.html (jeśli chcemy dodać mapę do strony głównej) bądź plik odpowiedzialny za którąś z podstron i stworzyć element div, w którym wkleić należy kod. Bardziej zaawansowani w tworzeniu stron internetowych za pomocą dodatkowych pluginów mogą również nieco zmienić wygląd bazowej mapy, na przykład dodając zasięg (przydatne przy restauracji oferującej dowóz), dodać więcej znaczników niż tylko jeden (gdy firma ma kilka oddziałów) albo pokolorować mapę tak, by estetycznie wpasowywała się w kolorystykę strony.

Warto dodać, że wygenerowane w powyższy sposób mapy, nazywane przez Google “embed“, czyli “wbudowanesą bezpłatne.

Korzystanie z Google Maps API od 2018 roku jest natomiast płatne. Wedle obecnego cennika koszt zależy od ilości wyświetleń – niewielkie strony nie narażają się na żadne opłaty, gdy nie przekraczają miesięcznego limitu dwustu dolarów. Poszczególne kwoty można sprawdzić w cenniku Google Maps Platform, gdzie znajdują się również limity wyświetleń, po których przekroczeniu Google naliczy opłaty. Google Maps API pozwala na większy wybór map – można wybrać mapy dynamiczne, statyczne, z którymi nie można nawiązywać interakcji, zaawansowane mapy osadzone z dodatkowymi opcjami rozszerzającymi standardowe, darmowe mapy osadzone (embed).

Udostępnij