Како да додадете мапи во вашата апликација: вградувања, интерактивни мапи и локатори на продавници

За да додадете мапа во вашата апликација, прво одлучете дали ви треба статичко вградување (една локација со игла, како „најдете ја нашата продавница“) или интерактивна мапа (многу игли од вашите податоци, филтри, групирање, „блиску до мене“). За една локација, вградената мапа е најбрза и, со Maps Embed API на Google, бесплатна. За интерактивни мапи, користете библиотека за мапи во JavaScript — Google Maps JavaScript API, Mapbox GL JS или отворената Leaflet со давател на плочки — чувајте ја географската ширина и должина на секое место во вашата база и ограничете го вашиот API клуч на вашиот домен. Податоците за добавувачите подолу се од нивната сопствена документација, според состојбата во септември 2026.

Каков вид мапа ви треба?

Повеќето мали бизнис-сајтови ви треба само првиот ред. Именици, пазари и страници со огласи ви требаат третиот и четвртиот.

Вашите опции

Google Maps Platform

Водичот за почеток на Google вели дека мора да создадете Cloud проект со овозможено наплаќање и да ги овозможите API-јата што ги сакате. Нивните цени „плаќај по користење“ даваат Essentials SKU-и, вклучувајќи Dynamic Maps, со бесплатна месечна граница од 10.000 настани, и наведуваат Dynamic Maps по 7,00 долари на 1.000 настани над тоа (на првото ниво на обем). SKU-то Maps Embed е наведено како неограничено и бесплатно. Google исто така продава месечни претплатнички планови. Проверете ја страницата со цени на Google Maps Platform за актуелните износи.

Mapbox

Страницата со цени на Mapbox наведува 50.000 бесплатни месечни вчитувања на мапи за Mapbox GL JS на веб, потоа 5,00 долари на 1.000 вчитувања. Видете цени на Mapbox.

Leaflet и OpenStreetMap

Leaflet се опишува како библиотека со отворен код за интерактивни мапи прилагодени на мобилни уреди, со околу 42 KB JavaScript. Му требаат мапни плочки (сликите на мапата) од некаде. Јавните сервери за плочки на OpenStreetMap се привлечни, но политиката за користење на плочки бара видливо наведување на изворот, забранува масовно преземање, нема гаранција за услугата и ги предупредува комерцијалните услуги дека пристапот може да се повлече. За вистински производ, користете комерцијален или самохостиран извор на плочки што работи со Leaflet.

API клучеви: јавни, но ограничени

Клучевите за мапи што се користат во прелистувачот се видливи за секој што ја отвора вашата страница. Тоа е очекувано, но значи дека некој може да го копира вашиот клуч и да ја зголеми употребата на ваша сметка. Безбедносното упатство на Google препорачува да додадете ограничувања по HTTP referrer, со наведени ваши домени, и ограничувања на API, за клучот да работи само за API-јата што ги користите.

Клучевите за серверски услуги — на пример геокодирање илјадници адреси — треба да бидат одвоени клучеви, чувани во серверски тајни, а не на страницата. Исто така поставете известувања за буџет или квоти во конзолата на давателот, за грешката да не се претвори во голема сметка.

Геокодирање: претворете ги адресите во координати еднаш

Мапите цртаат географска ширина и должина, а не адреси. Претворањето адреса во координати се вика геокодирање, а повеќето даватели наплаќаат по барање. Ефикасниот образец:

1. Кога ќе се зачува запис, геокодирајте ја адресата на серверот.
2. Чувајте ја географската ширина и должина во базата на податоци.
3. Мапата ги чита зачуваните координати; никогаш не геокодира при преглед на страницата.

Проверете ги условите на секој давател за тоа колку долго смеете да ги чувате резултатите од геокодирање; тие се разликуваат.

Примери на промпти

Една вградена мапа:

На страницата Контакт, додај вградена мапа на Google што ја прикажува нашата адреса (12 High Street, Leeds) со Maps Embed API, со клучот во GOOGLE_MAPS_EMBED_KEY. Додај линк „Насоки“ под неа. Нека биде на цела ширина на телефони и вчитувај ја со одложување.

Интерактивна мапа на огласи:

Додај географска ширина и должина во табелата listings. Кога ќе се создаде оглас или ќе се промени неговата адреса, геокодирај ја на серверот со клучот во GEOCODING_API_KEY и зачувај ги координатите. На страницата Browse, прикажи мапа со игла за секој оглас со Leaflet, со групирање кога игличките се преклопуваат. Кликнување на игла го прикажува насловот, цената и линк. Мапата и листата треба да ги користат истите филтри.

„Блиску до мене“:

Додај копче „Блиску до мене“ што ја бара локацијата на посетителот и прикажува огласи во рок од 10 км, подредени по растојание. Ако одбие пристап до локацијата, нека внесе град.

Чекор по чекор

1. Изберете вид мапа од табелата на врвот.
2. Создајте сметка кај давателот и проект, и овозможете само API-јата што ви требаат.
3. Создајте клучеви: клуч за прелистувач ограничен на вашите домени (вклучувајќи го доменот на прегледот додека градите) и, ако треба, серверски клуч за геокодирање.
4. Зачувајте ги клучевите како тајни и побарајте од вашата алатка да ги користи; клучот за прелистувач е сè уште ограничен иако завршува на страницата.
5. Зачувајте координати за секое место во вашата база.
6. Изградете ја мапата: игли, искачувачки прозорци, групирање и разумно стандардно зумирање.
7. Спарете ја со листа. Мапата сама по себе е тешка за користење на телефон и за читачи на екран. Прикажете ги истите резултати како листа.
8. Поставете известување за буџет во конзолата на давателот.
9. Објавете и тестирајте на живиот домен, бидејќи ограничувањата по referrer често ја блокираат мапата додека не се додаде живиот домен.

Чести грешки

• Неограничени клучеви. Секој може да ги користи повторно на своја страница.
• Геокодирање при секое прегледување на страница. Бавно и скапо; геокодирајте еднаш при зачувување.
• Заборавен живиот домен во ограничувањата на клучот. Работи во преглед, сива празна кутија во продукција.
• Распореди само со мапа. Игли без листа се тешки на мали екрани и недостапни.
• Стотици игли без групирање. Нечитливо и бавно.
• Недостасувачко наведување на изворот. Повеќето даватели на мапи и плочки го бараат, а нивното скривање ги крши условите.
• Барање локација при вчитување на страницата. Прашајте само кога корисникот ќе го допре „Блиску до мене“.

Листа за проверка

• Избран е вистинскиот вид мапа за задачата
• Клучот за прелистувач е ограничен на вашите домени и потребните API-ја
• Серверските клучеви се чуваат во тајни
• Координатите се чуваат во базата, геокодирани еднаш
• Резултатите се прикажани и како листа
• Групирање за многу игли
• Наведувањето на изворот е видливо
• Поставено известување за буџет кај давателот
• Тестирано на објавениот домен и на телефон

Додавање мапи со Mythex

Mythex нема вградена интеграција за мапи; донесувате сопствен клуч од давателот, го додавате како тајна на проектот (или го залепувате кога агентот ќе прикаже картичка со тајни) и го бараете во разговорот, како што е опишано во Интегрирајте било кој API. Координатите одат во базата на податоци на проектот. Не заборавајте да ги додадете и доменот на прегледот и објавениот домен во ограничувањата на веб-страницата на клучот, и објавете повторно по промена на тајните.

Мапите обично се наоѓаат покрај пребарување и огласи: видете како да додадете пребарување во вашата апликација, како да изградите веб-страница за именик и како да изградите веб-страница за мал бизнис.

Прашања