Jak dodać mapę Google na stronie za darmo

Ostatnio to się porobiło z mapami Google! Pewnie zauważyliście, że na części stron zamiast mapki Google z lokalizacją widnieje mapka z napisem “for development purposes only” albo nie wyświetla się nic tylko puste pole. To za sprawą tego, że Google wprowadziło nowy sposób generowania klucza API, który jest dostępny po podaniu karty kredytowej. Czy to oznacza, że chcąc mieć mapkę Google na stronie trzeba płacić?

I tak i nie. Ileś tam odsłon jest za free, a jak się przekroczy tą ilość to wtedy ściągają z karty opłatę zgodną z ich cennikiem – nie pytajcie mnie jak to dokładnie wychodzi, ale można na bieżąco być z cennikiem na tej oto stronie – link. A jak się nie chce płacić?

Można skorzystać z opcji dostępnych bez konieczności podawania klucza API czyli wykorzystać tzw. metodę embed. Spokojnie da się ją stosować również na stronach opartych o WordPress, nawet nie jest konieczne instalowanie żadnej dodatkowej wtyczki. Fajnie prawda?

Super! Ale jak to działa? Już pokazuję!

Opcja 1 – standardowa opcja embed Google Maps

Wchodzimy na Google Maps i podajemy interesujący nas adres


Klikamy Udostępnij


Klikamy Umieszczanie mapy


Wybieramy rozmiar – albo z dostępnych, albo niestandardowy, gdzie będzie można podać własne wymiary

Klikamy Kopiuj HTML, który następnie możemy wkleić na swojej stronie w widoku tekstowym edytora klasycznego lub jak macie już Gutenberga na swojej stronie to tam w Formatowanie element Własny HTML

 

Opcja 2 – wykorzystanie Google Moje Mapy

Wchodzimy na stronę https://www.google.com/intl/pl_PL/maps/about/mymaps/ i klikamy Wypróbuj


Klikamy Utwórz nową mapę


Dodajemy znacznik lub znaczniki – w tej opcji można dodać więcej niż jedną lokalizację


Klikamy Udostępnij i podajemy nazwę i opis mapy

Klikamy Zmień i zmieniamy ustawienia udostępniania na publiczne

Klikamy trzy kropeczki i wybieramy opcję Umieść na mojej stronie


Kopiujemy kod i dodajemy na stronie jak w poprzedniej metodzie

Banał prawda? I nie trzeba nic płacić! Przynajmniej narazie : ) Jeśli macie jakieś pytania zapraszam na grupę “Zostań specką!” lub zostawcie pytanie w komentarzu : )

Subscribe
Powiadom o
guest
10 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Daria
Daria
4 lat temu

Dzięki Sylwia za te Twoje porady, są zawsze lekkie i zrozumiałe 🙂

Natalia
Natalia
4 lat temu

Dziękuję! Działa! Wykorzystałam II sposób.

Paweł
Paweł
4 lat temu

Cześć, dzięki za dobry wpis :), ale mam pytanko… czy ktoś miał problem z wyświetleniem tak przygotowanej Mapki w googlemaps na komórkach z IOS czyli Iphony ?

Paweł
Paweł
Reply to  Sylwia
4 lat temu

Jakiś komunikat się pokazywał związany z Iframe – niestety nie mam printsceera, ale postaram się go dodać, to może mnie i innym pomożemy. Dzięki za odpis 🙂

Wrzucam aktualkę z linkiem do printscreena – jest jak byk problem z API …

problem z iphonem.jpg

Paweł
Paweł
Reply to  Sylwia
4 lat temu

Dzięki, mam problem taki że nie mam Iphone fizycznie w łapakach, a bawić się w to poprzez osoby 3 juz nie mam sił – Ale link zapisany i jak będą z tym problemy będę z tym działał… proza życia 🙂 Dziękuje za czas i pomoc 🙂