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 : )
Dzięki Sylwia za te Twoje porady, są zawsze lekkie i zrozumiałe 🙂
Staram się 🙂 dziękuję 🙂
Dziękuję! Działa! Wykorzystałam II sposób.
Super, że udało się zamieścić mapkę Google u siebie na stronie sposobem, który przedstawiłam 🙂
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 ?
Niestety nie spotkałam się z problemem, by na Iphone nie wyświetlała się mapka Google, a nie pokazuje się wcale, czy co jej dolega?
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
Możesz zerknąć zgodnie z tym co tutaj piszą https://developers.google.com/maps/documentation/embed/guide?hl=pl – zobacz czy jak dodasz ten klucz API czy ruszy
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 🙂
Nie ma za co 🙂