چگونه نقشه را به اپ خود اضافه کنیم: نقشه‌های جاسازی‌شده، نقشه‌های تعاملی و نقشه‌یاب فروشگاه

برای افزودن نقشه به اپ، ابتدا تصمیم بگیرید به یک نقشه ایستا یا جاسازی‌شده (یک مکان با سنجاق، مثل «فروشگاه ما را پیدا کنید») نیاز دارید یا به یک نقشه تعاملی (سنجاق‌های زیاد از داده‌های شما، فیلترها، خوشه‌بندی، «نزدیک من»). برای یک مکان، نقشه جاسازی‌شده سریع‌ترین راه است و با Maps Embed API گوگل رایگان است. برای نقشه‌های تعاملی، از یک کتابخانه نقشه JavaScript استفاده کنید؛ Google Maps JavaScript API، Mapbox GL JS، یا کتابخانه متن‌باز Leaflet با یک ارائه‌دهنده کاشی. عرض و طول جغرافیایی هر مکان را در پایگاه داده ذخیره کنید و کلید API خود را به دامنه خودتان محدود کنید. جزئیات فروشندگان در ادامه بر اساس مستندات خود آن‌ها تا سپتامبر ۲۰۲۶ آمده است.

به چه نوع نقشه‌ای نیاز دارید؟

بیشتر سایت‌های کسب‌وکار کوچک فقط به ردیف اول نیاز دارند. فهرست‌ها، بازارها و سایت‌های آگهی به ردیف سوم و چهارم نیاز دارند.

گزینه‌های شما

Google Maps Platform

راهنمای شروع گوگل می‌گوید باید یک پروژه Cloud با صورتحساب فعال بسازید و APIهایی را که می‌خواهید فعال کنید. قیمت‌گذاری pay-as-you-go آن SKUهای Essentials، از جمله Dynamic Maps، را با سقف ماهانه رایگان ۱۰ هزار رویداد ارائه می‌دهد و Dynamic Maps را فراتر از آن با ۷.۰۰ دلار به ازای هر ۱۰۰۰ رویداد در اولین سطح حجمی فهرست می‌کند. SKU مربوط به Maps Embed نامحدود و رایگان فهرست شده است. گوگل همچنین طرح‌های اشتراک ماهانه می‌فروشد. برای اعداد فعلی، قیمت‌گذاری Google Maps Platform را ببینید.

Mapbox

صفحه قیمت‌گذاری Mapbox ۵۰ هزار بارگذاری رایگان نقشه در ماه برای Mapbox GL JS روی وب را فهرست می‌کند، سپس ۵.۰۰ دلار به ازای هر ۱۰۰۰ بارگذاری. قیمت‌گذاری Mapbox را ببینید.

Leaflet و OpenStreetMap

Leaflet خودش را یک کتابخانه متن‌باز JavaScript برای نقشه‌های تعاملی سازگار با موبایل توصیف می‌کند، با حدود ۴۲ کیلوبایت JavaScript. این کتابخانه به کاشی‌های نقشه (تصاویر نقشه) از جایی نیاز دارد. سرورهای کاشی عمومی OpenStreetMap وسوسه‌کننده‌اند، اما سیاست استفاده از کاشی‌ها نمایش واضح منبع را لازم می‌داند، دانلود انبوه را ممنوع می‌کند، هیچ تضمین سرویسی ندارد و به سرویس‌های تجاری هشدار می‌دهد که دسترسی ممکن است قطع شود. برای یک محصول واقعی، از یک منبع کاشی تجاری یا میزبانی‌شده خودتان که با Leaflet کار می‌کند استفاده کنید.

کلیدهای API: عمومی، اما محدودشده

کلیدهای نقشه‌ای که در مرورگر استفاده می‌شوند برای هر کسی که صفحه شما را باز کند قابل‌مشاهده‌اند. این طبیعی است، اما یعنی کسی می‌تواند کلید شما را کپی کند و مصرف را بالا ببرد و هزینه‌اش را به صورتحساب شما بیندازد. راهنمای امنیتی گوگل این است که محدودیت‌های وب‌سایت (HTTP referrer) را با فهرست دامنه‌های خودتان اضافه کنید، و محدودیت‌های API تا کلید فقط برای APIهایی که استفاده می‌کنید کار کند.

کلیدهای سرویس‌های سمت سرور، مثلاً برای geocoding هزاران نشانی، باید کلیدهای جداگانه باشند که در Secretهای سمت سرور نگه داشته می‌شوند، نه در صفحه. همچنین در کنسول ارائه‌دهنده هشدار بودجه یا سهمیه تنظیم کنید تا یک اشتباه به صورتحساب بزرگ تبدیل نشود.

Geocoding: نشانی‌ها را یک بار به مختصات تبدیل کنید

نقشه‌ها عرض و طول جغرافیایی را رسم می‌کنند، نه نشانی را. تبدیل یک نشانی به مختصات geocoding نام دارد و بیشتر ارائه‌دهندگان آن را به ازای هر درخواست هزینه می‌گیرند. الگوی کارآمد:

1. وقتی یک فهرست ذخیره می‌شود، نشانی آن را روی سرور geocode کنید.
2. عرض و طول جغرافیایی را در پایگاه داده ذخیره کنید.
3. نقشه مختصات ذخیره‌شده را می‌خواند؛ هرگز با بازدید صفحه geocode نمی‌کند.

شرایط هر ارائه‌دهنده را درباره مدت زمانی که می‌توانید نتایج geocoding را ذخیره کنید بررسی کنید؛ این شرایط متفاوت است.

نمونه پرامپت‌ها

یک نقشه جاسازی‌شده:

در صفحه Contact، یک نقشه گوگل جاسازی‌شده اضافه کن که نشانی ما (12 High Street, Leeds) را با استفاده از Maps Embed API نشان دهد، و کلید را از GOOGLE_MAPS_EMBED_KEY بخوان. زیرش یک لینک «دریافت مسیر» بگذار. در موبایل تمام‌عرض باشد و با تأخیر بارگذاری شود.

یک نقشه تعاملی از فهرست‌ها:

عرض و طول جغرافیایی را به جدول listings اضافه کن. وقتی یک فهرست ساخته یا نشانی آن تغییر می‌کند، نشانی را روی سرور با کلید GEOCODING_API_KEY geocode کن و مختصات را ذخیره کن. در صفحه Browse، یک نقشه با یک نشانگر برای هر فهرست با Leaflet نشان بده، با خوشه‌بندی وقتی نشانگرها روی هم می‌افتند. کلیک روی یک نشانگر، عنوان، قیمت و یک لینک را نشان دهد. نقشه و فهرست باید از فیلترهای یکسانی استفاده کنند.

«نزدیک من»:

یک دکمه «نزدیک من» اضافه کن که موقعیت بازدیدکننده را می‌پرسد و فهرست‌هایی را در شعاع ۱۰ کیلومتر نشان می‌دهد، مرتب‌شده بر اساس فاصله. اگر دسترسی به موقعیت را رد کرد، به او اجازه بده یک شهر را تایپ کند.

گام به گام

1. نوع نقشه را از جدول بالای صفحه انتخاب کنید.
2. حساب ارائه‌دهنده و یک پروژه بسازید، و فقط APIهایی را که لازم دارید فعال کنید.
3. کلیدها را بسازید: یک کلید مرورگر محدود به دامنه‌های خودتان (از جمله دامنه پیش‌نمایش هنگام ساخت) و در صورت نیاز یک کلید سرور برای geocoding.
4. کلیدها را به‌عنوان Secret ذخیره کنید و از ابزار ساخت بخواهید از آن‌ها استفاده کند؛ کلید مرورگر همچنان محدود باشد، حتی اگر در نهایت در صفحه قرار گیرد.
5. مختصات هر مکان را در پایگاه داده ذخیره کنید.
6. نقشه را بسازید: نشانگرها، پاپ‌آپ‌ها، خوشه‌بندی و یک زوم پیش‌فرض مناسب.
7. آن را با یک فهرست همراه کنید. نقشه تنها در موبایل و برای خوانندگان صفحه سخت است. همان نتایج را به‌صورت فهرست نشان دهید.
8. هشدار بودجه را در کنسول ارائه‌دهنده تنظیم کنید.
9. منتشر و روی دامنه زنده آزمایش کنید، چون محدودیت‌های referrer اغلب تا زمانی که دامنه زنده اضافه نشود، نقشه را مسدود می‌کنند.

اشتباهات رایج

• کلیدهای بدون محدودیت. هر کسی می‌تواند آن‌ها را در سایت خودش دوباره استفاده کند.
• Geocoding در هر بازدید صفحه. کند و پرهزینه است؛ هنگام ذخیره یک بار geocode کنید.
• فراموش کردن دامنه زنده در محدودیت‌های کلید. در پیش‌نمایش کار می‌کند، اما در محیط واقعی یک کادر خاکستری خالی می‌شود.
• چیدمان فقط‌نقشه. سنجاق‌ها بدون فهرست در صفحه‌های کوچک آزاردهنده و برای افراد دارای معلولیت غیرقابل‌دسترس‌اند.
• صدها نشانگر بدون خوشه‌بندی. ناخوانا و کند.
• نبود ذکر منبع. بیشتر ارائه‌دهندگان نقشه و کاشی آن را لازم دارند و پنهان کردنش شرایط آن‌ها را نقض می‌کند.
• درخواست موقعیت هنگام بارگذاری صفحه. فقط وقتی کاربر روی «نزدیک من» می‌زند بپرسید.

چک‌لیست

• نوع نقشه درست برای کار انتخاب شده است
• کلید مرورگر به دامنه‌ها و APIهای لازم محدود شده است
• کلیدهای سمت سرور در Secretها نگه داشته شده‌اند
• مختصات در پایگاه داده ذخیره شده و یک بار geocode شده‌اند
• نتایج هم به‌صورت فهرست نشان داده می‌شوند
• خوشه‌بندی برای نشانگرهای زیاد فعال است
• ذکر منبع قابل‌مشاهده است
• هشدار بودجه با ارائه‌دهنده تنظیم شده است
• روی دامنه منتشرشده و در موبایل آزمایش شده است

افزودن نقشه با Mythex

Mythex یکپارچه‌سازی داخلی نقشه ندارد؛ کلید ارائه‌دهنده خودتان را می‌آورید، آن را به‌عنوان Secret پروژه اضافه می‌کنید (یا وقتی عامل کارت Secret نشان می‌دهد، آن را paste می‌کنید)، و نقشه را در چت درخواست می‌کنید، همان‌طور که در یکپارچه‌سازی هر API توضیح داده شده است. مختصات در پایگاه داده پروژه قرار می‌گیرد. یادتان باشد که هم دامنه پیش‌نمایش و هم دامنه منتشرشده را به محدودیت‌های وب‌سایت کلید اضافه کنید، و بعد از تغییر Secretها دوباره منتشر کنید.

نقشه‌ها معمولاً کنار جستجو و فهرست‌ها قرار می‌گیرند: چگونه جستجو را به اپ اضافه کنیم، چگونه یک وب‌سایت دایرکتوری بسازیم و چگونه یک وب‌سایت کسب‌وکار کوچک بسازیم را ببینید.

پرسش‌ها