Jak dodać mapy do aplikacji: osadzone mapy, interaktywne mapy i lokalizatory punktów

Aby dodać mapę do aplikacji, najpierw zdecyduj, czy potrzebujesz statycznego osadzenia (jedna lokalizacja z pinezką, np. „znajdź nasz sklep”), czy interaktywnej mapy (wiele pinezek z twoich danych, filtry, grupowanie, „w pobliżu”). Dla jednej lokalizacji osadzona mapa jest najszybsza i, dzięki Maps Embed API od Google, bezpłatna. Dla interaktywnych map użyj biblioteki JavaScript — Google Maps JavaScript API, Mapbox GL JS albo open source'owego Leaflet z dostawcą kafelków — zapisuj szerokość i długość geograficzną każdego miejsca w bazie danych i ogranicz klucz API do własnej domeny. Szczegóły dostawców poniżej pochodzą z ich własnej dokumentacji według stanu na wrzesień 2026.

Jaka mapa jest potrzebna?

Większość stron małych firm potrzebuje tylko pierwszego wiersza. Katalogi, marketplace'y i serwisy z ogłoszeniami potrzebują trzeciego i czwartego.

Twoje opcje

Google Maps Platform

Przewodnik startowy Google mówi, że musisz utworzyć projekt Cloud z włączonymi płatnościami i włączyć API, których chcesz użyć. Cennik pay-as-you-go daje SKU Essentials, w tym Dynamic Maps, limit 10 000 zdarzeń miesięcznie za darmo, i podaje Dynamic Maps po 7,00 $ za 1000 zdarzeń powyżej tego (na pierwszym progu wolumenu). SKU Maps Embed jest opisane jako bez limitu i bezpłatne. Google sprzedaje też miesięczne plany subskrypcyjne. Aktualne liczby znajdziesz na stronie cen Google Maps Platform.

Mapbox

Strona cen Mapbox podaje 50 000 bezpłatnych wczytań mapy miesięcznie dla Mapbox GL JS w internecie, potem 5,00 $ za 1000 wczytań. Zobacz ceny Mapbox.

Leaflet i OpenStreetMap

Leaflet opisuje się jako biblioteka JavaScript open source do interaktywnych map przyjaznych urządzeniom mobilnym, o wielkości około 42 KB JavaScriptu. Potrzebuje kafelków mapy (obrazów mapy) skądś. Publiczne serwery kafelków OpenStreetMap są kuszące, ale polityka użycia kafelków wymaga widocznego podania autorstwa, zabrania masowego pobierania, nie daje gwarancji usługi i ostrzega, że usługi komercyjne mogą stracić dostęp. Dla prawdziwego produktu użyj komercyjnego lub samodzielnie hostowanego źródła kafelków, które działa z Leafletem.

Klucze API: publiczne, ale ograniczone

Klucze map używane w przeglądarce są widoczne dla każdego, kto otworzy twoją stronę. To się spodziewa, ale oznacza, że ktoś może skopiować twój klucz i wygenerować zużycie na twoim rachunku. Wytyczne bezpieczeństwa Google zalecają dodanie ograniczeń do witryny (HTTP referrer) z wymienionymi domenami oraz ograniczeń API, tak aby klucz działał tylko dla używanych API.

Klucze do usług po stronie serwera — na przykład do geokodowania tysięcy adresów — powinny być osobnymi kluczami przechowywanymi w sekretach serwera, a nie na stronie. Ustaw też alerty budżetowe lub limity w konsoli dostawcy, aby pomyłka nie zamieniła się w duży rachunek.

Geokodowanie: zamień adresy na współrzędne raz

Mapy rysują szerokość i długość geograficzną, a nie adresy. Zamiana adresu na współrzędne nazywa się geokodowaniem i większość dostawców pobiera za nie opłatę za żądanie. Wydajny wzorzec:

1. Gdy wpis jest zapisywany, geokoduj jego adres na serwerze.
2. Zapisz szerokość i długość geograficzną w bazie danych.
3. Mapa czyta zapisane współrzędne; nigdy nie geokoduje przy wyświetleniu strony.

Sprawdź warunki każdego dostawcy dotyczące tego, jak długo wolno przechowywać wyniki geokodowania; różnią się.

Przykładowe prompty

Pojedyncza osadzona mapa:

Na stronie Kontakt dodaj osadzoną mapę Google pokazującą nasz adres (12 High Street, Leeds) przy użyciu Maps Embed API, z kluczem w GOOGLE_MAPS_EMBED_KEY. Pod spodem dodaj link „Wyznacz trasę”. Na telefonach mapa ma mieć pełną szerokość i ładować się leniwie (lazy-load).

Interaktywna mapa ogłoszeń:

Dodaj szerokość i długość geograficzną do tabeli ogłoszeń. Gdy ogłoszenie jest tworzone lub zmienia się jego adres, geokoduj je na serwerze kluczem w GEOCODING_API_KEY i zapisz współrzędne. Na stronie Przeglądaj pokaż mapę z pinezką dla każdego ogłoszenia przy użyciu Leaflet, z grupowaniem, gdy pinezki się nakładają. Kliknięcie pinezki pokazuje tytuł, cenę i link. Mapa i lista mają używać tych samych filtrów.

„W pobliżu”:

Dodaj przycisk „W pobliżu”, który pyta o lokalizację odwiedzającego i pokazuje ogłoszenia w promieniu 10 km, posortowane według odległości. Jeśli odmówi dostępu do lokalizacji, pozwól wpisać miasto.

Krok po kroku

1. Wybierz typ mapy z tabeli na początku.
2. Załóż konto u dostawcy i projekt, i włącz tylko potrzebne API.
3. Utwórz klucze: klucz do przeglądarki ograniczony do twoich domen (w tym domeny podglądu podczas budowy) oraz, jeśli trzeba, klucz serwerowy do geokodowania.
4. Zapisz klucze jako sekrety i poproś narzędzie budujące, by ich używało; klucz do przeglądarki nadal jest ograniczony, mimo że trafia na stronę.
5. Zapisz współrzędne każdego miejsca w bazie danych.
6. Zbuduj mapę: pinezki, dymki, grupowanie i rozsądny domyślny poziom przybliżenia.
7. Połącz ją z listą. Sama mapa jest trudna w użyciu na telefonie i dla czytników ekranu. Pokaż te same wyniki jako listę.
8. Ustaw alert budżetowy w konsoli dostawcy.
9. Opublikuj i przetestuj na żywej domenie, bo ograniczenia referrerów często blokują mapę, dopóki nie doda się domeny produkcyjnej.

Typowe błędy

• Nieograniczone klucze. Każdy może ich użyć na własnej stronie.
• Geokodowanie przy każdym wyświetleniu strony. Wolne i drogie; geokoduj raz, przy zapisie.
• Zapomniana domena produkcyjna w ograniczeniach klucza. Działa w podglądzie, a na produkcji pusty szary prostokąt.
• Układy oparte tylko na mapie. Same pinezki bez listy są uciążliwe na małych ekranach i niedostępne.
• Setki pinezek bez grupowania. Nieczytelne i wolne.
• Brak atrybucji. Większość dostawców map i kafelków wymaga jej, a jej ukrycie łamie ich warunki.
• Pytanie o lokalizację przy ładowaniu strony. Pytaj dopiero, gdy użytkownik kliknie „W pobliżu”.

Lista kontrolna

• Wybrany właściwy typ mapy do zadania
• Klucz do przeglądarki ograniczony do twoich domen i wymaganych API
• Klucze serwerowe przechowywane w sekretach
• Współrzędne zapisane w bazie danych, geokodowane raz
• Wyniki pokazane także jako lista
• Grupowanie przy wielu pinezkach
• Widoczna atrybucja
• Alert budżetowy ustawiony u dostawcy
• Przetestowane na opublikowanej domenie i na telefonie

Mapy w Mythex

Mythex nie ma wbudowanej integracji z mapami; przynosisz własny klucz dostawcy, dodajesz go jako sekret projektu (albo wklejasz, gdy agent pokaże kartę sekretów) i prosisz o mapę w czacie, jak opisano w Integrate any API. Współrzędne trafiają do bazy danych projektu. Pamiętaj, by dodać zarówno domenę podglądu, jak i opublikowaną domenę do ograniczeń witryny klucza, i po zmianie sekretów opublikuj ponownie.

Mapy zwykle sąsiadują z wyszukiwaniem i listami: zobacz jak dodać wyszukiwanie do aplikacji, jak zbudować stronę katalogową oraz jak zbudować stronę małej firmy.

Pytania