كيف تضيف الخرائط إلى تطبيقك: التضمين والخرائط التفاعلية ومواقع المتاجر

لإضافة خريطة إلى تطبيقك، قرر أولاً هل تحتاج إلى تضمين ثابت (موقع واحد بدبوس، مثل "اعثر على متجرنا") أم خريطة تفاعلية (دبابيس كثيرة من بياناتك، ومرشحات، وتجميع للدبابيس، و"بالقرب مني"). للموقع الواحد، يكون التضمين أسرع، وهو مجاني مع Maps Embed API من Google. أما الخرائط التفاعلية فاستخدم مكتبة خرائط JavaScript، مثل Google Maps JavaScript API أو Mapbox GL JS أو Leaflet مفتوحة المصدر مع مزوّد بلاطات؛ واحفظ خط العرض وخط الطول لكل مكان في قاعدة بياناتك، وقيّد مفتاح API بنطاقك أنت. تفاصيل المزوّدين أدناه مأخوذة من وثائق كل مزوّد نفسه حتى سبتمبر 2026.

أي نوع من الخرائط تحتاج؟

معظم مواقع الأعمال الصغيرة تحتاج فقط إلى الصف الأول. أما الأدلة والأسواق ومواقع القوائم فتحتاج إلى الصف الثالث والرابع.

خياراتك

منصة خرائط Google

يقول دليل البدء لدى Google إنه يجب عليك إنشاء مشروع Cloud مفعّل له الفوترة وتفعيل الواجهات التي تريدها. وتمنح تسعيرتها حسب الاستخدام SKUs من فئة Essentials، ومنها Dynamic Maps، حصة مجانية شهرية قدرها 10,000 حدث، وتسرد Dynamic Maps بسعر 7.00 دولار لكل 1,000 حدث فوق ذلك (في أول شريحة حجم). أما SKU الخاص بـ Maps Embed فمسجّل كغير محدود ومجاني. كما تبيع Google خطط اشتراك شهرية. راجع تسعير منصة خرائط Google للأرقام الحالية.

Mapbox

تسرد صفحة تسعير Mapbox 50,000 تحميل خريطة مجاني شهرياً لـ Mapbox GL JS على الويب، ثم 5.00 دولار لكل 1,000 تحميل. راجع تسعير Mapbox.

Leaflet وOpenStreetMap

يصف Leaflet نفسه بأنه مكتبة JavaScript مفتوحة المصدر للخرائط التفاعلية المناسبة للهواتف، بحجم نحو 42 كيلوبايت من JavaScript. وهو يحتاج إلى بلاطات الخريطة (الصور التي تشكّل الخريطة) من مكان ما. وخوادم البلاطات العامة في OpenStreetMap مغرية، لكن سياسة استخدام البلاطات تشترط ذكر المصدر بشكل ظاهر، وتحظر التنزيل بالجملة، ولا تضمن مستوى خدمة، وتحذّر الخدمات التجارية من أن الوصول قد يُسحب. في منتج حقيقي، استخدم مصدر بلاطات تجارياً أو مستضافاً ذاتياً يعمل مع Leaflet.

مفاتيح API: علنية، لكن مقيّدة

مفاتيح الخرائط المستخدمة في المتصفح مرئية لأي شخص يفتح صفحتك. وهذا متوقع، لكنه يعني أن أحدهم قد ينسخ مفتاحك ويشغّل الاستخدام على حسابك. توصي إرشادات Google الأمنية بإضافة قيود المواقع (HTTP referrer) التي تسرد نطاقاتك، وقيود الواجهات (API restrictions) بحيث يعمل المفتاح للواجهات التي تستخدمها فقط.

يجب أن تُحفظ المفاتيح الخاصة بخدمات الخادم، مثل الترميز الجغرافي لآلاف العناوين، في مفاتيح منفصلة وفي أسرار على الخادم، لا في الصفحة. واضبط أيضاً تنبيهات الميزانية أو الحصص في لوحة تحكم المزوّد، حتى لا يتحول أي خطأ إلى فاتورة كبيرة.

الترميز الجغرافي: حوّل العناوين إلى إحداثيات مرة واحدة

الخرائط ترسم خط العرض وخط الطول، لا العناوين. وتحويل العنوان إلى إحداثيات يُسمى الترميز الجغرافي (geocoding)، ويتقاضى معظم المزوّدين رسوماً عليه لكل طلب. النمط الفعال هو:

1. عند حفظ قائمة، رمّز عنوانها جغرافياً على الخادم.
2. احفظ خط العرض وخط الطول في قاعدة البيانات.
3. تقرأ الخريطة الإحداثيات المخزنة؛ ولا تُرمّز جغرافياً عند عرض الصفحة أبداً.

تحقق من شروط كل مزوّد حول المدة التي يُسمح لك فيها بتخزين نتائج الترميز الجغرافي؛ فهي تختلف.

أمثلة على الأوامر

خريطة مضمّنة واحدة:

في صفحة الاتصال، أضف خريطة Google مضمّنة تعرض عنواننا (12 High Street, Leeds) باستخدام Maps Embed API مع المفتاح الموجود في GOOGLE_MAPS_EMBED_KEY. أضف رابط "احصل على الاتجاهات" أسفلها. اجعلها بعرض كامل على الهواتف، وأجّل تحميلها حتى الحاجة إليها.

خريطة تفاعلية للقوائم:

أضف خط العرض وخط الطول إلى جدول القوائم. عند إنشاء قائمة أو تغيّر عنوانها، رمّز العنوان جغرافياً على الخادم باستخدام المفتاح الموجود في GEOCODING_API_KEY واحفظ الإحداثيات. في صفحة التصفح، اعرض خريطة فيها دبوس لكل قائمة باستخدام Leaflet، مع تجميع الدبابيس عندما تتداخل. النقر على دبوس يعرض العنوان والسعر ورابطاً. يجب أن تستخدم الخريطة والقائمة المرشحات نفسها.

"بالقرب مني":

أضف زر "بالقرب مني" يطلب موقع الزائر ويعرض القوائم ضمن 10 كم مرتبة حسب المسافة. إذا رفض منح إذن الموقع، فدعه يكتب اسم مدينة بدلاً من ذلك.

خطوة بخطوة

1. اختر نوع الخريطة من الجدول في الأعلى.
2. أنشئ حساب المزوّد ومشروعاً، وفعّل الواجهات التي تحتاجها فقط.
3. أنشئ المفاتيح: مفتاح للمتصفح مقيّد بنطاقاتك (بما في ذلك نطاق المعاينة أثناء البناء)، ومفتاح للخادم عند الحاجة للترميز الجغرافي.
4. احفظ المفاتيح كأسرار واطلب من أداة البناء استخدامها؛ يبقى مفتاح المتصفح مقيّداً رغم أنه يصل إلى الصفحة في النهاية.
5. خزّن الإحداثيات لكل مكان في قاعدة بياناتك.
6. ابنِ الخريطة: دبابيس، ونوافذ منبثقة، وتجميع، ومستوى تكبير افتراضي معقول.
7. اقرنها بقائمة. الخريطة وحدها صعبة الاستخدام على الهاتف، وغير متاحة لقارئات الشاشة. اعرض النتائج نفسها كقائمة.
8. اضبط تنبيه ميزانية في لوحة تحكم المزوّد.
9. انشر واختبر على النطاق الحي، لأن قيود المرجع (referrer) تمنع الخريطة كثيراً حتى تُضاف النطاق الحي.

أخطاء شائعة

• مفاتيح بلا قيود. أي شخص يستطيع إعادة استخدامها في موقعه.
• الترميز الجغرافي عند كل عرض للصفحة. بطيء ومكلف؛ رمّز مرة واحدة عند الحفظ.
• نسيان النطاق الحي في قيود المفتاح. تعمل في المعاينة، ثم تظهر مساحة رمادية فارغة في الإنتاج.
• تخطيطات تعتمد على الخريطة فقط. الدبابيس بلا قائمة مرهقة على الشاشات الصغيرة وغير متاحة.
• مئات الدبابيس بلا تجميع. غير قابلة للقراءة وبطيئة.
• غياب ذكر المصدر. معظم مزوّدي الخرائط والبلاطات يشترطون ذكره، وإخفاؤه يخالف شروطهم.
• طلب الموقع عند تحميل الصفحة. اطلبه فقط عندما ينقر المستخدم على "بالقرب مني".

قائمة التحقق

• اختير نوع الخريطة المناسب للمهمة
• مفتاح المتصفح مقيّد بنطاقاتك وبالواجهات المطلوبة
• المفاتيح الخاصة بالخادم محفوظة في الأسرار
• الإحداثيات مخزنة في قاعدة البيانات، ومُرمَّزة جغرافياً مرة واحدة
• النتائج معروضة أيضاً كقائمة
• تجميع للدبابيس عند الكثرة
• ذكر المصدر ظاهر
• تنبيه ميزانية مضبوط لدى المزوّد
• تم الاختبار على النطاق المنشور وعلى الهاتف

إضافة الخرائط مع Mythex

لا يتضمن Mythex تكاملاً مدمجاً للخرائط؛ تحضر مفتاح المزوّد الخاص بك، وتضيفه كسرّ للمشروع (أو تلصقه عندما يعرض الوكيل بطاقة الأسرار)، وتطلب الخريطة في المحادثة، كما هو موضح في تكامل أي واجهة برمجية. تُحفظ الإحداثيات في قاعدة بيانات المشروع. وتذكّر أن تضيف نطاق المعاينة والنطاق المنشور كليهما إلى قيود المواقع للمفتاح، وأن تنشر من جديد بعد تغيير الأسرار.

الخرائط عادةً ما تكون بجوار البحث والقوائم: راجع كيف تضيف البحث إلى تطبيقك، وكيف تبني موقع دليل، وكيف تبني موقع أعمال صغير.

الأسئلة