Mapy Google bez klucza API

Zwykle integrując Mapy Google, pracujesz z Maps JavaScript API , który wymaga klucza API i może powodować koszty, których nie należy lekceważyć przy wyższych numerach dostępu. Istnieją świetne alternatywy, takie jak mapbox lub OpenStreetMap , ale nie osiągają one jeszcze różnorodności funkcji oferowanych przez Google. Sam Google oferuje również sposób bez klucza API poprzez funkcję udostępniania, którą możemy wykorzystać do naszych celów.


Ta ścieżka może być użyta programowo do wyprowadzenia dowolnego adresu (nawet bez znajomości szerokości i długości geograficznej). Ponadto mapa (w przeciwieństwie do odpowiednika JS) zawiera link do planera trasy. Mapę można również ulepszyć za pomocą filtrów CSS (chociaż wynik nie do końca zbliża się do stylów natywnych, które są możliwe dzięki API JS).

Przez wiele lat można było to zrobić za pomocą parametru output = embed , którego Google oficjalnie nie obsługuje, a więc w niedawnej przeszłości wzrosła liczba błędów wyświetlania:

331190767bb32b2468632e609223c53e

Jeśli użyjesz oficjalnej funkcji udostępniania przez maps.google.de , otrzymasz na przykład następujący kod:

331190767bb32b2468632e609223c53e

Jeśli ustrukturyzujemy długi adres URL w parametrze src , powstanie wzorzec:

331190767bb32b2468632e609223c53e

Rozpoznajemy następujące typy danych:

  • m: macierz
  • s: ciąg
  • f: pływak
  • d: Podwójny
  • ja: liczba całkowita
  • e: wyliczenie

Po kilku próbach i błędach możemy wyeliminować niektóre wartości i spakować najważniejsze wartości w zmienne, np. aby dynamicznie zdefiniować adres:

331190767bb32b2468632e609223c53e

Na koniec możemy nadać mapie ładniejszy wygląd za pomocą poniższego kodu CSS, na przykład:

331190767bb32b2468632e609223c53e

W końcu otrzymujemy darmową, dynamiczną mapę, która działa niezawodnie:

Plecy