تتيح "منصّة خرائط Google" للعملاء تطوير تجارب فريدة من خلال تخصيص التصميم المرئي لمحدّدات المواقع على الخريطة باستخدام محدّدات المواقع المتقدّمة. سوف نستكشف في هذا المستند كيف يمكن للعملاء التقدم خطوة أخرى إلى الأمام وإنشاء علامات تتغير ديناميكيًا بناءً على البيانات في الوقت الفعلي.
علامات الخريطة هي أداة مفيدة لتقديم تجارب غنية للمستخدمين في ما يتعلّق بالخرائط. يمكن أن تنقل سمات محددات المواقع الجغرافية، مثل الحجم واللون والشكل، معلومات إضافية عن كل موقع جغرافي تم وضع علامة عليه. وفي بعض الحالات، قد تتغير هذه المعلومات الإضافية ديناميكيًا وقد يرغب المطور في تحديث تصور الخريطة، مع الحفاظ على حداثة المستخدم.
في هذه المقالة، سنستخدم مثالاً لأغراض توضيحية: تريد سلسلة متاجر بيع بالتجزئة استخدام خريطة لعرض أوقات الانتظار في المتاجر للمستخدمين. ومع ذلك، يمكن استخدام هذه البنية نفسها في العديد من حالات الاستخدام الأخرى. إليك بعض الأفكار الإضافية:
- مدى توفّر الغرف في الفندق: على الخريطة التي تعرض نتائج البحث عن الفنادق، يُعدّ مدى توفّر الغرف مؤشرًا مهمًا يمكن أن يشجّع المستخدمين على حجز فندق مع انخفاض المستودع.
- مدى توفّر أماكن وقوف السيارات: على خريطة مواقف السيارات، يمكنك منح المستخدمين الثقة في اختيار وجهة تتوفّر فيها أماكن وقوف عند وصولهم.
- المطاعم المفتوحة، والمغلقة قريبًا، والمغلقة: على خريطة تعرض نتائج البحث عن المطاعم، من المهم أن يكون المستخدمون على دراية بما إذا كان المطعم مغلقًا عند وصولهم أم لا.
حلول العلامات الديناميكية المتقدّمة
الآن دعونا نتعرف على عملية بناء خريطة باستخدام محددات متقدمة لتصوير البيانات الديناميكية. كما ذكرنا سابقًا، تتمثل حالة الاستخدام في سلسلة متاجر للبيع بالتجزئة تستفيد من نظام إدارة قوائم الانتظار في خدمة الدفع لتقدير أوقات الانتظار للمستخدمين وعرضها بشكل مرئي. في ما يلي بنية التطبيق:
الخطوة 1: تحديد السمات لتحديد التجربة المرئية
الخطوة الأولى هي تحديد موقع جغرافي واحد أو أكثر لعرضه للمستخدمين. في هذه الحالة، نريد عرض سمة واحدة فقط: وقت الانتظار الحالي في كل موقع جغرافي للمتجر، ويتم قياسه بالدقائق.
الخطوة التالية هي اختيار سمة واحدة أو أكثر من سمات العلامة المقابلة لإضافة تعليق توضيحي مرئي لوقت الانتظار على علامة الخريطة. تتوفّر قائمة سمات العلامة تلقائيًا في مواصفات PinElement. يمكنك أيضًا استخدام رمز HTML مخصّص للحصول على خيارات تخصيص أكثر تنوعًا.
في هذا المثال، سنستخدم سمتَي علامة لعرض بيانات وقت الانتظار بشكل مرئي:
- لون علامة التحديد: أزرق إذا كان وقت الانتظار أقل من 5 دقائق، وأصفر إذا كان أكثر من 5 دقائق
- محتوى العلامة (يتطلب علامات HTML مخصّصة): سنُدرِج وقت الانتظار الحالي بالدقائِق في العلامة نفسها.
الخطوة 2: ضبط الاتصال بمصادر البيانات في الوقت الفعلي
تتوفّر طرق متعدّدة للربط بمصادر البيانات، ويعتمد الحلّ المناسب على حالة الاستخدام والبنية الأساسية للتكنولوجيا. في هذا المثال، نستخدم أسلوب سحب البيانات، حيث نطلب بيانات وقت الانتظار المعدّلة من خلال طلبات HTTP (REST) بشكل منتظم. في الأقسام التالية، سترى تصاميم بديلة تستفيد من طرق الدفع.
لتمكين تطبيقنا من الوصول إلى بيانات وقت الانتظار من خادمنا، تستفيد معماريتنا من وظائف السحابة الإلكترونية لبرنامج Firebase. تتيح لنا دوال السحابة تحديد دالة خلفية للوصول إلى هذه البيانات وحسابها. ونُدرِج أيضًا مكتبة Firebase في تطبيق الويب الخاص بنا، ما يتيح لنا الوصول إلى وظائف Cloud من خلال طلب HTTP.
الخطوة التالية هي التأكّد من إبقاء البيانات محدّثة للمستخدم. لإجراء ذلك، نُعدّ موقّتًا باستخدام دالة setInterval في JavaScript مع مهلة 30 ثانية. وفي كل مرة يتم فيها تشغيل الموقّت، نطلب بيانات محدَّثة عن وقت الانتظار كما هو موضَّح أعلاه. بعد الحصول على البيانات الجديدة، يجب إعادة تحميل مظهر علامات الخريطة. توضّح الخطوة التالية كيفية إجراء هذه التغييرات.
الخطوة 3 - عرض محددات الخريطة
يمكننا الآن استخدام "محدّدات المواقع المتقدّمة" لعرض المحدّدات المصمّمة على الخريطة. يمكن عرض محدّدات المواقع المتقدّمة على الخرائط التي تمّ إنشاؤها باستخدام واجهة برمجة تطبيقات JavaScript للخرائط في "منصة خرائط Google". عند استخدام محدّدات المواقع المتقدّمة، احرص على تضمين مَعلمة رقم تعريف الخريطة في طلب الخريطة باستخدام JavaScript.
في مقتطف الرمز البرمجي الظاهر أدناه، ننشئ العلامات ونحدّد محتوى العلامة من خلال إنشاء عنصر div في HTML:
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
الخطوة الأخيرة هي تحديث نص العلامة ونمط CSS لكل متجر. يقرأ الرمز البرمجي أدناه بيانات أوقات الانتظار المعدَّلة ويحدّد تنسيقًا لكل إبرة متجر استنادًا إلى وقت الانتظار:
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
تستخدم الخريطة الآن واجهة برمجة التطبيقات الحالية لأوقات الانتظار لعرض أوقات الانتظار المحدّثة للمستخدمين:
طرق بديلة للربط بمصادر البيانات في الوقت الفعلي
هناك طرق مختلفة للاتصال بمصادر البيانات في الوقت الفعلي. نراجع في ما يلي خيارَين بديلَين: "المراسلة عبر السحابة الإلكترونية من Firebase" وWebSockets. أيًا كان النهج الذي تختاره، احرص على مراعاة العوامل التالية للحفاظ على أداء أداة الخريطة:
- تكرار التحديثات
- حجم البيانات
- عدد العلامات في عرض الخريطة
- إمكانات الأجهزة والمتصفّحات
المراسلة عبر السحابة الإلكترونية من Firebase
توفّر المراسلة عبر السحابة الإلكترونية من Firebase طريقة لإرسال البيانات بشكل فوري. باستخدام هذا النهج، سترسل تحديثات إلى تطبيق الخرائط في كل مرة يتم فيها تحديث بيانات وقت الانتظار في الخلفية. ستؤدي رسائل التعديل إلى تشغيل دالة ردّ اتصال الغرض منها تعديل مظهر العلامة ومحتوياتها.
هناك شيء واحد يجب مراعاته قبل اختيار هذه البنية، وهو أنها تتطلب الحفاظ على اتصال دائم بالخادم لكل متصفح يقوم بتشغيل تطبيق الخرائط. لهذا السبب، قد تكون تكلفة تشغيله أعلى، وقد يكون أقل كفاءة في ما يتعلّق بمشاكل الاتصال.
WebSockets
WebSockets هي طريقة أخرى تستند إلى ميزة "الدفع" لإبقاء البيانات محدّثة. على غرار السيناريو السابق، يمكنك استخدام WebSockets لإنشاء اتصال دائم بين الخلفية وتطبيق الخرائط. تتشابه المزايا الوظيفية لهذا النهج مع مزايا خدمة "المراسلة عبر السحابة الإلكترونية من Firebase"، ولكن قد يكون هناك عمل إضافي مطلوب لضبط البنية الأساسية اللازمة.
الخاتمة
يمكن للمطوّرين دمج مصادر البيانات في الوقت الفعلي مع "العلامات المتقدّمة" لإنشاء عروض مرئية سهلة الاستخدام على "خرائط Google". هناك عدة طرق لربط مصادر البيانات هذه استنادًا إلى متطلبات الخريطة والأجهزة والمتصفّح لدى المستخدم وحجم البيانات. ويمكن بعد ذلك استخدام البيانات المدمجة للتحكم في شكل "العلامات المتقدمة" وأسلوبها في الوقت الفعلي، ما يتيح للمستخدمين تجربة ديناميكية.
الإجراءات التالية
مراجع إضافية:
- العلامات المتقدمة - مركز مطوّري برامج Google
- إنشاء علامات باستخدام رمز HTML المخصّص
- وظائف السحابة الإلكترونية لبرنامج Firebase
- المراسلة عبر السحابة الإلكترونية من Firebase
المساهمون
المؤلفون الرئيسيون:
جيم ليفلار | مهندس حلول في "منصة خرائط Google"
جون برانين | كبير مهندسي إرشاد العملاء في Google Cloud Platform
Steve Barrett | مهندس حلول في "منصة خرائط Google"