9 lis 2019

Jak dodać mapę Google do strony.

Opiszę bardzo prosty sposób dodania Google Maps np. do stron WordPress.
Oczywiście można dodać ją do każdej strony ale musimy mieć dostęp - możliwość wstawiania kodu html.

Niestety ale od 2018 Google wprowadziło nowy model licencjonowania map:

  • płatność w trybie miesięcznym, po przekroczeniu limitów
  • miesięczny darmowy limit w wysokości 200$

Najgorsza jest to, że aby uzyskać klucz licencyjny należy podłączyć kartę płatniczą, a to nie wszystkim się podoba.

Jeżeli potrzebujesz tylko mapy aby pokazać jedno miejsce nie trzeba ci całej "machiny", wystarczy że dodasz iframe. Jak to zrobić opiszę poniżej.

Wchodzimy na Google Map i wyszukujemy interesujący nasz adres

Zaczynamy od wejścia na poniższy adres http://maps.google.pl.

Szukamy naszego miejsca, powiedzmy że będzie to "Statua Wolności".

Jak znaleźć naszą mapę

Teraz klikamy w menu z lewej strony.
Jak dodać mapę Google do strony.

Pobierz kod

Następnie klikamy w link "Udostępnij lub umieć mapę"
Jak dodać mapę Google do strony.

Po kliknięciu powinna pojawić się warstwa z widoczną mapą, klikamy w zakładkę "Umieszczanie mapy".
Jak dodać mapę Google do strony.

Widoczny jest wpis iframe... można go skopiować lub kliknąć obok niego "KOPIUJ HTML"
Jak dodać mapę Google do strony.

Umieść kod

Teraz wystarczy że w poście WordPress lub innym miejscu przeznaczonym na naszą mapę wkleimy poniższy kod.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.2953249169323!2d-74.04740158900731!3d40.689493050192176!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatua%20Wolno%C5%9Bci!5e0!3m2!1spl!2spl!4v1572017585937!5m2!1spl!2spl" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

Małej modyfikacji uległ rozmiar mapy a dokładnie szerokość, chciałem aby mapa był na 100% szerokości miejsca w którym będzie wklejona.

Poniżej efekt końcowy, tak się prezentuje nasza mapa.

Inne alternatywy map

Jeżeli chcesz mieć większe możliwości w mapach, własny marker z informacjami i inne "cuda", a nie płacić za mapę to przeczytaj wpis Czym zastąpić google maps – Open Street Map oraz Leaflet