Alternatywa dla Google Maps?

Szacunkowy czas czytania: 3 minuty

 

Google Maps

Mapka z Google Maps to często obowiązkowy element stron internetowych, a zwłaszcza zakładki „Kontakt”. Mapkę można dodać do witryny na dwa sposoby:

  • prostszy – czyli wchodzimy na Google Maps, znajdujemy interesujący nas obszar, klikamy w ikonę „udostępnij”, a następnie „umieszczanie mapy”. Kopiujemy kod iframe i wklejamy bezpośrednio na stronie. Plusem takiego rozwiązania jest czas i prostota. Minusem – mapka jest do bólu standardowa.

 

  • bardziej skomplikowany – czyli wchodzimy na stronę Google Cloud, gdzie tworzymy konto (o ile jeszcze nie mamy) lub przechodzimy do konsoli. W konsoli możemy sobie wybrać potrzebne do naszego projektu/strony API dla Google Maps. Nie będę się tu rozpisywać na ten temat, ponieważ opcji jest wiele. Wspomnę tylko, że najczęściej stosowanym API jest Maps JavaScript API. Dzięki wygenerowanemu kluczowi API, możemy spersonalizować swoje mapy.

Nowe zasady korzystania z Map Google

W czerwcu 2018 przestały działać mapy, które nie miały zarejestrowanego klucza. Można to zauważyć krążąc w sieci i natrafiając na „wyszarzone” mapki z informacją „For development purposes only” na podstronach z kontaktem.

Jak możemy przeczytać na platformie Google Maps, 16 lipca 2018 zaczęły obowiązywać nowe zasady dotyczące płatności za użytkowanie klucza API. Wcześniej wystarczyło założyć sobie konto, wygenerować jedno lub kilka darmowych API dla poszczególnych projektów i, jeśli obciążenie strony nie było znaczące, nie trzeba było się kompletnie przejmować rozliczeniami.

Obecnie, nawet jeśli nasza strona nie generuje znaczącego ruchu, musimy uzupełnić dane rozliczeniowe i dodać kartę płatniczą. W okresie przejściowym, mamy możliwość korzystania z konta stworzonego automatycznie (zobaczymy wtedy w konsoli informację „Projekt jest połączony z kontem rozliczeniowym „Google Maps Platform Transition Account”. Nie masz uprawnień dostępu do tego konta.”). Oznacza to, że dostaliśmy $200 kredytu i po jego zużyciu klucze przestaną działać. By tego uniknąć należy stworzyć konto billingowe. Po dodaniu karty płatniczej, każdorazowo co miesiąc otrzymamy kredyt w postaci $200. Dla małych i średnich stron to całkowicie wystarczający limit i de facto korzystanie z map będzie wciąż bezpłatne.

 

Ale co zrobić jeśli nie chcemy dodawać karty do konta?

Jeśli nie chcemy bawić się w konta billingowe i podłączać karty płatniczej, musimy się liczyć z tym, że przyznany nam, pierwszy limit $200 kiedyś się skończy. Mapy przestaną działać, a strona nie będzie wyglądać atrakcyjnie.

Mamy co najmniej dwie opcje:

  • skorzystać z Google Maps na zasadzie iframe (tak jak opisywałam powyżej)
  • skorzystać z innego rozwiązania, np. open source

 

Open Street Map

Open Street Map to projekt społeczności internetowej, którego celem jest stworzenie (a raczej nieustanne tworzenie) darmowej mapy całej Ziemi. Z danych stworzonych w ramach projektu można korzystać i generować mapy na stronach internetowych.

I tak właśnie trafiłam na JavaScriptową bibliotekę leaflet.js. By z niej skorzystać mamy dwie opcje:

  • dla użytkowników, którzy nie lubią wtyczek: czyli kod i skrypty musimy dodać ręcznie, więcej informacji na stronie Leaflet.js.
  • dla miłośników wtyczek/osób nie znających JS: wtyczka Leaflet Map, której efekt prezentuję poniżej. Wtyczka jest łatwa w instalacji, bazuje na shortcodach. W łatwy sposób dodamy personalizowany marker (pin), dymki, a także linie i figury geometryczne (by np. zaznaczyć obszar działalności).

Tip: Ponieważ wpisujemy długość i szerokość geograficzną sami, polecam stronę do dokładnego obliczania położenia LatLong.