Как да добавите карти към приложението си: вградени карти, интерактивни карти и локатори на магазини

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

Какъв вид карта ви трябва?

Най-малките бизнес сайтове обикновено се нуждаят само от първия ред. Указатели, пазари и сайтове с обяви се нуждаят от третия и четвъртия.

Вашите варианти

Google Maps Platform

Ръководството за начало на Google казва, че трябва да създадете Cloud проект с активирано плащане и да активирате API, които искате. Ценообразуването „плати за използването“ дава SKU Essentials, включително Dynamic Maps, с безплатен месечен лимит от 10 000 събития, и посочва Dynamic Maps на $7.00 на 1000 събития над това (на първото ценово ниво). SKU-то Maps Embed е обявено като неограничено и безплатно. Google продава и месечни абонаментни планове. За актуалните числа вижте цените на Google Maps Platform.

Mapbox

Страницата с цени на Mapbox обявява 50 000 безплатни месечни зареждания на карта за Mapbox GL JS в уеб, след това $5.00 на 1000 зареждания. Вижте цените на 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. Добави линк „Вземи упътване“ под нея. На телефони да е с пълна ширина и да се зарежда със закъснение.

Интерактивна карта на обяви:

Добави географска ширина и дължина към таблицата с обяви. Когато обява се създаде или адресът ѝ се промени, геокодирай адреса на сървъра с ключа в GEOCODING_API_KEY и запази координатите. На страницата Browse покажи карта с маркер за всяка обява с Leaflet, с групиране, когато маркерите се припокриват. Кликване върху маркер показва заглавието, цената и линк. Картата и списъкът да използват едни и същи филтри.

„Близо до мен“:

Добави бутон „Близо до мен“, който пита посетителя за местоположението му и показва обяви в радиус 10 km, сортирани по разстояние. Ако откаже достъп до местоположението, нека въведе град.

Стъпка по стъпка

1. Изберете вида карта от таблицата в началото.
2. Създайте акаунт при доставчика и проект и активирайте само нужните API.
3. Създайте ключове: ключ за браузъра, ограничен до вашите домейни (включително домейна за преглед, докато строите), и при нужда сървърен ключ за геокодиране.
4. Запазете ключовете като тайни и помолете AI платформата да ги използва; ключът за браузъра пак е ограничен, въпреки че попада в страницата.
5. Запазете координати за всяко място в базата данни.
6. Изградете картата: маркери, изскачащи прозорци, групиране и разумно начално мащабиране.
7. Придружете я със списък. Самата карта е трудна за ползване на телефон и за екранни четци. Показвайте същите резултати и като списък.
8. Задайте известие за бюджет в конзолата на доставчика.
9. Публикувайте и тествайте на живия домейн, защото ограниченията по referrer често блокират картата, докато не добавите живия домейн.

Чести грешки

• Неограничени ключове. Всеки може да ги използва на собствения си сайт.
• Геокодиране при всеки преглед на страницата. Бавно и скъпо; геокодирайте веднъж при запис.
• Забравен жив домейн в ограниченията на ключа. Работи в преглед, а в production е празен сив квадрат.
• Оформления само с карта. Маркерите без списък са неудобни на малки екрани и недостъпни.
• Стотици маркери без групиране. Нечетливи и бавни.
• Липсващо посочване на авторство. Повечето доставчици на карти и тайлове го изискват, а скриването му нарушава условията им.
• Искане на местоположение при зареждане на страницата. Питайте само когато потребителят натисне „Близо до мен“.

Контролен списък

• Избран е правилният вид карта за задачата
• Ключът за браузъра е ограничен до вашите домейни и нужните API
• Сървърните ключове са в тайни
• Координатите са в базата данни, геокодирани веднъж
• Резултатите се показват и като списък
• Има групиране при много маркери
• Посочването на авторството е видимо
• Известие за бюджет е зададено при доставчика
• Тествано на публикувания домейн и на телефон

Добавяне на карти в Mythex

Mythex няма вградена интеграция с карти; донасяте собствен ключ от доставчик, добавяте го като тайна на проекта (или го поставяте, когато агентът покаже карта с тайни) и поискате картата в чата, както е описано в Интегрирайте всеки API. Координатите отиват в базата данни на проекта. Не забравяйте да добавите както домейна за преглед, така и публикувания домейн в ограниченията по уебсайт на ключа и публикувайте отново след промяна на тайните.

Картите обикновено стоят до търсене и списъци: вижте как да добавите търсене в приложението си, как да създадете уебсайт указател и как да създадете уебсайт за малък бизнес.

Въпроси