Қолданбаға карталарды қалай қосу керек: ендірулер, интерактивті карталар және дүкен іздегіштер
Қолданбаға карта қосу үшін алдымен статикалық ендіру (бір орын бар, мысалы «дүкенімізді табыңыз») керек пе, әлде интерактивті карта (деректеріңізден көптеген белгі, сүзгілер, кластерлеу, «жақын маңда») керек пе, соны шешіңіз. Бір орын үшін ендірілген карта ең жылдам және Google-дың Maps Embed API-мен тегін. Интерактивті карталар үшін JavaScript картасының кітапханасын пайдаланыңыз — Google Maps JavaScript API, Mapbox GL JS немесе ашық бастапқы кодты Leaflet және тайл провайдері — әр орынның ендігін мен бойлығын деректер қорында сақтаңыз, ал API кілтіңізді өз доменіңізге шектеңіз. Төмендегі провайдер мәліметтері 2026 жылғы қыркүйек жағдайы бойынша олардың өз құжаттарынан алынған.
Қандай карта керек?
| Қажеттілік | Мысал | Ең қарапайым тәсіл |
|---|---|---|
| Бір орын | Кафенің байланыс беті | Ендірілген карта |
| Бірнеше бекітілген орын | Үш филиал | Әр филиал үшін ендіру немесе шағын интерактивті карта |
| Деректерден көптеген орын | Каталог, мүлік тізімдері, оқиғалар | Деректер қорындағы белгілері бар интерактивті карта |
| Қашықтық бойынша іздеу | «10 км ішіндегі клиникалар» | Сақталған координаттар және қашықтық сұрауы |
| Бағыттар мен маршруттар | Жеткізу аймақтары, «бағыт алу» | Бағыт сілтемесі немесе маршрут API-ы |
Көпшілік шағын бизнес сайттарына тек бірінші қатар керек. Каталогтар, маркетплейстер және тізім сайттары үшінші және төртінші қатарды қажет етеді.
Нұсқалар
| Нұсқа | Ол не | Шығын туралы ескертулер (2026 жылғы қыркүйек жағдайы бойынша) | Қай жерге жарайды |
|---|---|---|---|
| Google Maps Embed API | Орынды немесе іздеуді көрсететін iframe | Google құжаттары: барлық сұраулар шексіз пайдаланумен тегін; API кілті керек | Бір орын бетте |
| Google Maps JavaScript API | Толық интерактивті Google картасы | Dynamic Maps: айына 10 000 тегін оқиға, содан кейін әр 1 000-ға ақы | Таныс көрініс, Google-дың орын деректері |
| Mapbox GL JS | Теңшелетін стильдері бар интерактивті векторлық карталар | Mapbox айына веб-картаның 50 000 тегін жүктемесін, содан кейін әр 1 000-ға $5.00 береді | Теңшелетін стильдегі карталар |
| Leaflet + тайлдар | Ашық бастапқы кодты картаның кітапханасы; тайл көзін өзіңіз таңдайсыз | Leaflet өзі тегін; тайлдар провайдерге байланысты | Жеңіл карталар, байланыстан аулақ болу |
Google Maps Platform
Google-дың бастау нұсқаулығы төлем қосылған Cloud жобасын жасау және қажетті API-ларды қосу керек екенін айтады. Оның төлеп-пайдалану бағасы Essentials SKU-ларын, соның ішінде Dynamic Maps-ті, айына 10 000 оқиғалық тегін шекпен береді және одан асқанда Dynamic Maps-ті 1 000 оқиғаға $7.00 деп көрсетеді (бірінші көлем деңгейінде). Maps Embed SKU шексіз және тегін деп көрсетілген. Google айлық жазылым жоспарларын да сатады. Ағымдағы сандар үшін Google Maps Platform бағаларын тексеріңіз.
Mapbox
Mapbox-тың бағалар беті веб-те Mapbox GL JS үшін айына 50 000 тегін карта жүктемесін, содан кейін әр 1 000-ға $5.00 көрсетеді. Mapbox бағаларын қараңыз.
Leaflet және OpenStreetMap
Leaflet өзін мобильді-ыңғайлы интерактивті карталар үшін ашық бастапқы кодты JavaScript кітапханасы деп сипаттайды, шамамен 42 KB JavaScript. Ол картаның суреттері — тайлдар — қайдан да болса керек. OpenStreetMap-тың ашық тайл серверлері азғыруы мүмкін, бірақ тайлдарды пайдалану саясаты көрінетін атрибуцияны талап етеді, жаппай жүктеуге тыйым салады, қызмет кепілдігін бермейді және коммерциялық қызметтерді қолжетімділік алынуы мүмкін деп ескертеді. Нақты өнім үшін Leaflet-пен жұмыс істейтін коммерциялық немесе өзі хосттайтын тайл көзін пайдаланыңыз.
API кілттері: ашық, бірақ шектеулі
Браузерде пайдаланылатын карта кілттері бетіңізді ашқан кез келген адамға көрінеді. Бұл күтілетін нәрсе, бірақ біреу кілтіңізді көшіріп, шотыңызға жүктеме түсіруі мүмкін дегенді білдіреді. Google-дың қауіпсіздік нұсқаулығы — доменіңізді тізетін веб-сайт (HTTP referrer) шектеулерін және кілт тек пайдаланатын API-лар үшін жұмыс істеуі үшін API шектеулерін қосу.
Серверлік қызметтерге арналған кілттер — мысалы мыңдаған мекенжайды геокодтау — бөлек болуы және серверде құпияларда сақталуы керек, бетте емес. Сонымен қатар провайдер консолінде бюджет ескертулерін немесе квоталарды қойыңыз, сонда қате үлкен шотқа айналмайды.
Геокодтау: мекенжайларды координатқа бір рет айналдырыңыз
Карталар мекенжайды емес, ендік пен бойлықты салады. Мекенжайды координатқа айналдыру геокодтау деп аталады, көпшілік провайдерлер оны сұрау үшін ақы алады. Тиімді үлгі:
- Тізім сақталғанда оның мекенжайын серверде геокодтаңыз.
- Ендік пен бойлықты деректер қорында сақтаңыз.
- Карта сақталған координаттарды оқиды; бет көрілгенде ешқашан геокодтамайды.
Нәтижелерді қанша уақыт сақтауға болатынын әр провайдердің шарттарынан тексеріңіз; олар әртүрлі.
Мысал промпттар
Бір ендірілген карта:
Байланыс бетіне мекенжайымызды (12 High Street, Leeds) көрсететін ендірілген Google картасын Maps Embed API арқылы қос, кілті GOOGLE_MAPS_EMBED_KEY ішінде болсын. Астына «Бағыт алу» сілтемесін қос. Телефонда толық ені болсын және кешіктіріп жүктелсін.
Тізімдердің интерактивті картасы:
Тізім кестесіне ендік пен бойлық қос. Тізім жасалғанда немесе мекенжайы өзгергенде, оны серверде GEOCODING_API_KEY ішіндегі кілтпен геокодтап, координаттарды сақта. Browse бетінде Leaflet арқылы әр тізімге бір белгісі бар карта көрсет, белгілер қабаттасқанда кластерлеу қосылсын. Белгіні басқанда атауы, бағасы және сілтемесі көрінсін. Карта мен тізім бірдей сүзгілерді пайдалансын.
«Маған жақын»:
«Маған жақын» түймесін қос, ол келушінің орнын сұрап, 10 км ішіндегі тізімдерді қашықтық бойынша сұрыптап көрсетсін. Егер ол орынға рұқсат бермесе, қаланы теруге мүмкіндік бер.
Қадамдар
- Жоғарыдағы кестеден карта түрін таңдаңыз.
- Провайдер аккаунтын және жобаны жасаңыз, тек керекті API-ларды қосыңыз.
- Кілттерді жасаңыз: доменіңізге шектелген браузер кілті (құрастыру кезінде алдын ала қарау доменің қоса) және қажет болса геокодтауға арналған серверлік кілт.
- Кілттерді құпия ретінде сақтаңыз және құрастырушыдан оларды пайдалануын сұраңыз; браузер кілті бетке түсетінін ескерсеңіз де, шектеулі болуы керек.
- Әр орын үшін координаттарды сақтаңыз деректер қорында.
- Картаны құрыңыз: белгілер, қалқымалы терезелер, кластерлеу және ақылға қонымды бастапқы масштаб.
- Тізіммен жұптаңыз. Тек карта телефонда және экран оқырмалары үшін қолайсыз. Сол нәтижелерді тізім ретінде көрсетіңіз.
- Провайдер консолінде бюджет ескертуін қойыңыз.
- Жариялаңыз және жарияланған доменде тексеріңіз, себебі referrer шектеулері көбіне тірі домен қосылмағанша картаны бұғаттайды.
Жиі кездесетін қателер
- Шектелмеген кілттер. Кез келген адам оларды өз сайтында қайта пайдалана алады.
- Әр бет көрілгенде геокодтау. Баяу және қымбат; сақтағанда бір рет геокодтаңыз.
- Тірі доменді кілт шектеулерінде ұмыту. Алдын ала қарауда жұмыс істейді, өндірісте бос сұр қорап.
- Тек карта макеттері. Белгілер тізімсіз телефонда қиын және қолжетімсіз.
- Кластерлеусіз жүздеген белгілер. Оқуға қиын және баяу.
- Жоқ атрибуция. Көптеген карта және тайл провайдерлері оны талап етеді, оны жасыру олардың шарттарын бұзады.
- Бетті жүктегенде орынды сұрау. Тек пайдаланушы «Маған жақын» түймесін басқанда сұраңыз.
Чек-лист
- Жұмысқа дұрыс карта түрі таңдалған
- Браузер кілті доменіңізге және қажетті API-ларға шектелген
- Серверлік кілттер құпияларда сақталған
- Координаттар деректер қорында, бір рет геокодталған
- Нәтижелер тізім ретінде де көрсетілген
- Көп белгі үшін кластерлеу бар
- Атрибуция көрінеді
- Провайдермен бюджет ескертуі қойылған
- Жарияланған доменде және телефонда тексерілген
Mythex-те карталарды қосу
Mythex-те кірістірілген карта интеграциясы жоқ; өз провайдер кілтіңізді әкелесіз, оны жоба құпиясы ретінде қосасыз (немесе агент құпия карточкасын көрсеткенде оны қойасыз) және картаны чатта сұрайсыз, Кез келген API-ды біріктіру бөлімінде сипатталғандай. Координаттар жобаның деректер қорына барады. Кілттің веб-сайт шектеулеріне алдын ала қарау және жарияланған доменіңіздің екеуін де қосуды ұмытпаңыз, ал құпияларды өзгерткеннен кейін қайта жариялаңыз.
Карталар әдетте іздеу мен тізімдердің жанында тұрады: қолданбаға іздеуді қалай қосу керек, веб-сайт каталогын қалай құру керек және шағын бизнес веб-сайтын қалай құру керек беттерін қараңыз.
Сұрақтар
Веб-сайтқа карта қосудың ең оңай жолы қайсы?
Бір белгіші бар бір картаны енгізіңіз, мысалы Google-дың Maps Embed API-ын iframe ішінде қолданыңыз. Google-дың құжаттарында Maps Embed сұраулары шексіз пайдаланумен тегін екені айтылған, бірақ әлі API кілті керек.
Қолданбада Google Maps тегін пе?
Ішінара. 2026 жылғы қыркүйек жағдайы бойынша Google-дың төлеп-пайдалану бағасы әр Essentials SKU-ға, соның ішінде Dynamic Maps-ке, айына 10 000 тегін оқиға береді, ал Maps Embed шексіз және тегін. Бастау үшін әлі де төлем қосылған Google Cloud жобасы керек.
Google Maps API кілтін браузерге қоюға бола ма?
Браузер карталары үшін кілттер барлығына көрінеді, сондықтан Google оларды сайтыңыздың мекенжайларына және тек пайдаланатын API-ларға шектеуді ұсынады. Геокодтау сияқты серверлік қызметтердің кілттері серверде қалуы керек.
OpenStreetMap-ты тегін пайдалануға бола ма?
OpenStreetMap деректері атрибуциясымен тегін пайдаланылады, бірақ оның ашық тайл серверлері донат арқылы қаржыланады және қызмет кепілдігі жоқ, ал саясат коммерциялық пайдаланушыларға қолжетімділік алынып тасталуы мүмкін екенін ескертеді. Өндірістік қолданба үшін тайл провайдерін пайдаланыңыз немесе өзіңіз хосттаңыз.