نظرة عامة
تتوفّر "منصة خرائط Google" للويب (JS وTS) وAndroid وiOS، وتوفّر أيضًا واجهات برمجة تطبيقات لخدمات الويب تتيح لك الحصول على معلومات حول الأماكن والاتجاهات والمسافات. النماذج الواردة في هذا الدليل مكتوبة لمنصة واحدة، ولكن يتم توفير روابط مستندات للتنفيذ على منصات أخرى.
تتيح لك أداة الإنشاء السريع في Google Cloud Console إنشاء محدِّد مواقع بسرعة، بما في ذلك استيراد بطاقات بيانات "الملف التجاري" وتضمين روابط حجز المواعيد تلقائيًا من مقدّمي الخدمات التابعين لجهات خارجية. تتيح لك واجهة المستخدم التفاعلية إنشاء رمز ونشره على Google Cloud في غضون دقائق.
يريد المستخدمون البحث عن المنتجات والخدمات على الإنترنت والعثور على أفضل موقع جغرافي وأكثر ملاءمة للزيارة أو تحديد موعد أو استلام طلب. يريدون الوصول إلى موقعك الجغرافي في أسرع وقت ممكن، ويهدفون إلى منحهم تجارب غنية على الإنترنت تزيد من عدد الزيارات إلى مقراتهم وتعزّز رضا المستخدمين وتقلل من طلبات الدعم. وتريد أيضًا قياس مدى نجاح أداة البحث لتحديد ما إذا كان بإمكان عملائك العثور على موقعك الجغرافي، وأردت أيضًا معرفة الجوانب التي يجب إجراء التحسينات عليها.
في هذا الموضوع، نقترح لك Locator Plus كمجموعة مثالية من واجهات برمجة التطبيقات في "منصة خرائط Google" لتقديم تجارب رائعة لمستخدمي أدوات تحديد المواقع الجغرافية. باتّباع هذه الممارسات، يمكنك مساعدة المستخدمين في العثور على المواقع الجغرافية لنشاطك التجاري على الخريطة، والاطّلاع على المعلومات التفصيلية التي يحتاجون إليها لاتّخاذ القرارات، ومنحهم الاتجاهات، سواء كانوا يقودون أو يقودون دراجة أو يسيرون أو يستقلون وسائل النقل العام.
بالنسبة إلى مستخدمي Locator Plus، تساعدك لوحة بيانات الإحصاءات في تحليل البيانات وإنشاء إحصاءات استنادًا إليها، ما يمنحك صورة واضحة عن مدى تفاعل المتسوّقين مع أداة البحث عن متاجرك. للاطّلاع على هذا التقرير، انتقِل إلى قسم تقارير التفاعل في وحدة التحكّم. لمزيد من التفاصيل حول هذا التقرير، يمكنك مراجعة تقارير التفاعل.
يوضح المخطّط التالي واجهات برمجة التطبيقات الأساسية المُستخدَمة في تنفيذ Locator Plus. يعرض الرسم البياني أيضًا قاعدة بيانات تتضمّن بيانات موقعك الجغرافي يمكنك دمجها مع "تفاصيل المكان" لمنح المستخدمين أفضل مجموعة كاملة وأكثرها اكتمالاً. (انقر للتكبير.)
![على الجانب الأيسر من المخطط، يعرض متصفح ويب خريطة بها النافذة المنبثقة "تفاصيل المكان".
على يسار المخطّط البياني، هناك قائمة بواجهات برمجة التطبيقات التي توفّر وظائف مختلفة: واجهة برمجة تطبيقات JavaScript للخرائط لعرض المحتوى وعرضها، وتصميم الخريطة، ومحدِّدات الخريطة، والتجوّل الافتراضي المخصّص، وعرض المسارات. ويمكنك وضع ميزة "الإكمال التلقائي"
لإكمال العنوان واستخدام وظيفة الكتابة المسبقة. الأماكن وواجهات برمجة تطبيقات Geocoding
لموقع العنوان. واجهة برمجة التطبيقات لمصفوفة المسافات لترتيب المواقع الجغرافية حسب المسافة والوقت وطريقة السفر واجهة برمجة التطبيقات Directions API لعرض مسار استنادًا إلى مدة السفر ووضع السفر.
يظهر في منتصف المخطّط رمز متجر بيانات يمثّل نقاط بيانات موقع جغرافي مخصّصة
وصولاً إلى رمز خادم ويب مع سهم مزدوج الرأس يشير إلى البيانات التي تتم قراءتها والكتابة
بين خادم الويب ومخزن البيانات. تمر الأسهم بين متصفح الويب وواجهات برمجة التطبيقات عبر خادم الويب كوسيط.](https://developers.google.cn/static/maps/solutions/images/store-locator/locator_arch_diagram.png?authuser=8&hl=ar)
تمكين واجهات برمجة التطبيقات
لتنفيذ هذه الممارسات، يجب تفعيل واجهات برمجة التطبيقات التالية في Google Cloud Console:- واجهة برمجة تطبيقات JavaScript للخرائط
- Places API
- Geocoding API
- واجهة برمجة التطبيقات لمصفوفة المسافة
- واجهة برمجة التطبيقات للاتجاهات
أقسام التنفيذ
في ما يلي الممارسات والتخصيصات التي سنتناولها في هذا الموضوع.
- يُعدّ رمز علامة الاختيار من الممارسات الأساسية.
- إنّ رمز النجمة هو إجراء اختياري لكنّنا ننصح به لتحسين الحلّ.
عرض مواقعك الجغرافية على خريطة تفاعلية |
يمكنك إنشاء خريطة تتيح للمستخدمين الاطّلاع على تفاصيل الموقع الجغرافي والتنقل والتكبير والتصغير. أو يمكنك استكشاف حل Quick Builder Locator Plus لإنشاء خريطة بسرعة، بما في ذلك استيراد تفاصيل النشاط التجاري بسهولة من بيانات ملفك التجاري، وتضمين روابط حجز المواعيد، ونشرها في Google Cloud Storage. |
|
توفير تفاصيل المكان | بعد أن يعثر المستخدمون على أقرب المواقع الجغرافية لنشاطك التجاري على الخريطة، يمكنك أن تقدّم لهم تفاصيل مكان مفيدة حول المواقع الجغرافية لمساعدتهم في اتّخاذ القرارات. | |
عرض المواقع الجغرافية من عرض بزاوية 45 درجة | منح المستخدمين إمكانية تصوير أفضل لموقعك في عرض القمر الصناعي من زاوية 45 درجة. | |
تحديد الموقع الجغرافي للمستخدم | يمكنك إضافة وظيفة "النوع أثناء التنقل" لتحسين تجربة المستخدم على جميع الأنظمة الأساسية وتحسين دقة العنوان من خلال الحد الأدنى من ضغطات المفاتيح. | |
عرض وقت السفر والمسافة إلى أقرب المواقع الجغرافية | يمكنك احتساب مسافة السفر ومدة الرحلة لأصول ووجهات متعدّدة، مع تحديد أشكال النقل المختلفة بشكل اختياري، مثل المشي أو القيادة أو ركوب الدراجات. | |
مساعدة المستخدمين في حجز المواعيد |
يمكنك السماح للمستخدمين بحجز موعد من اللوحة الجانبية لـ "تفاصيل المكان". أو يمكنك استكشاف حل Quick Builder Locator Plus لإنشاء خريطة بسرعة، بما في ذلك استيراد تفاصيل النشاط التجاري بسهولة من بيانات ملفك التجاري، وتضمين روابط حجز المواعيد، ونشرها في Google Cloud Storage. |
|
عرض العروض المحلية | إظهار عروض محلية قابلة للنقر للمستخدمين في اللوحة الجانبية لـ "تفاصيل المكان". | |
توفير اتجاهات التنقّل | يمكنك الحصول على بيانات الاتجاهات من نقطة الانطلاق إلى الوجهة باستخدام وسائل نقل مختلفة مثل المشي والقيادة وركوب الدراجات والنقل العام. | |
تخصيص خريطتك | يمكنك إنشاء علامات مخصّصة للخرائط للمساعدة في إبراز مواقعك الجغرافية وتعديل تصميم الخريطة بما يتوافق مع ألوان علامتك التجارية. يمكنك عرض (أو إخفاء) نقاط اهتمام محدّدة على خريطتك لمساعدة المستخدمين في توجيه أنفسهم بشكل أفضل والتحكّم في كثافة نقاط الاهتمام لمنع الفوضى في الخريطة. | |
الحصول على إحصاءات الاستخدام من خلال الإحصاءات | يمكنك ضبط "إحصاءات Google" واستخدامها للحصول على إحصاءات حول استراتيجية محدِّد المواقع وتنفيذها. | |
إرسال الاتجاهات إلى الجهاز الجوّال | بالإضافة إلى عرض الاتجاهات على أداة البحث عن المواقع، يمكنك أيضًا إرسال الاتجاهات إلى هاتف المستخدم للتنقّل باستخدام "خرائط Google" أثناء التنقُّل. | |
عرض محتوى "التجوّل الافتراضي" لمساعدة المستخدمين في تمثيل المواقع الجغرافية | يمكنك منح المستخدمين صور "التجوّل الافتراضي" بزاوية 360 درجة لتوجيههم بشكل أفضل ومساعدتهم في العثور على مواقعك الجغرافية بسرعة أكبر. | |
تحديد الموقع الجغرافي للمستخدم باستخدام ميزة رصد الموقع الجغرافي | إذا كنت لا تريد الاعتماد على خدمات الموقع الجغرافي داخل الجهاز، يمكنك استخدام ميزة "رصد الموقع الجغرافي" للمساعدة في تحديد الموقع الجغرافي للمستخدم. | |
الجمع بين بيانات الموقع الجغرافي المخصّص وتفاصيل المكان | يمكنك دمج تفاصيل الموقع الجغرافي المخصّصة مع تفاصيل المكان لمنح المستخدمين مجموعة واسعة من البيانات لاتخاذ القرارات. |
عرض مواقعك الجغرافية على خريطة تفاعلية
محدِّد المواقع هو جزء مهم من تجربة المستخدم. في المقابل، قد لا تتوفّر بعض المواقع الإلكترونية حتى خريطة بسيطة، ما يتطلّب من المستخدمين مغادرة الموقع الإلكتروني أو التطبيق للعثور على موقع جغرافي قريب. ويعني ذلك تقديم تجربة دون المستوى المطلوب للمستخدمين الذين عليهم التنقّل بين الصفحات للحصول على المعلومات التي يحتاجون إليها. بدلاً من ذلك، يمكنك تحسين هذه التجربة من خلال تضمين الخرائط وتخصيصها في تطبيقاتك.
هناك عدة طرق لتفعيل هذه الميزة: (1) باستخدام حل Quick Builder Locator Plus لإتاحة هذه الوظيفة بطريقة غير تقليدية، و (2) استخدام طريقة تنفيذ "خرائط Google" الديناميكية. يصف هذا القسم هذه الخيارات بالتفصيل.
استخدام أداة Quick Builder Locator Plus
يمكنك استخدام حل Quick Builder Locator Plus لاستيراد تفاصيل النشاط التجاري من ملفك التجاري. والآن، سينطبق أي تغيير على تفاصيل النشاط التجاري في ملفك التجاري على أداة البحث عن المتاجر على موقعك الإلكتروني. وقد تشمل هذه التغييرات ساعات العمل ومعلومات الاتصال والصور وخيارات الخدمة والمزيد. تتيح لك الأداة Quick Builder استكشاف خطوات إعداد المواقع الجغرافية للنشاط التجاري على الخريطة بسرعة، أو إنشاء رمز قابل للنشر، أو النشر المباشر على Google Cloud Storage في دقائق معدودة.
![دمج "الملف التجاري"](https://developers.google.cn/static/maps/images/locator_gbp_integration.gif?authuser=8&hl=ar)
![النشر على السحابة الإلكترونية](https://developers.google.cn/static/maps/images/locator_deploy_to_cloud.gif?authuser=8&hl=ar)
استخدام عملية تنفيذ الخرائط الديناميكية الخاصة بك
يستخدم هذا المثال: Maps JavaScript API | متوفّر أيضًا: Android | iOS |
يمكن إضافة خريطة ديناميكية إلى صفحتك، أي خريطة يمكن للمستخدمين التنقّل فيها، وتكبيرها وتصغيرها، والحصول على تفاصيل حول المواقع الجغرافية ونقاط الاهتمام المختلفة، باستخدام بضعة أسطر من الرموز.
أولاً، يجب تضمين واجهة برمجة تطبيقات JavaScript للخرائط في الصفحة. يتم ذلك من خلال ربط النص البرمجي التالي في صفحة HTML.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
يشير عنوان URL إلى وظيفة initMap
في JavaScript التي يتم تشغيلها عند تحميل الصفحة. في عنوان URL، يمكنك أيضًا تحديد
اللغة أو المنطقة المتوفرة في خريطتك للتأكّد من أنّه تم تنسيقها بالطريقة الصحيحة
للبلد المحدّد الذي تستهدفه. ويضمن ضبط منطقة معيّنة أيضًا أنّ سلوك
التطبيقات المستخدَمة خارج الولايات المتحدة متحيّز تجاه المنطقة التي حدّدتها. يمكنك الاطّلاع على تفاصيل تغطية منصة "خرائط Google" للحصول على قائمة كاملة باللغات والمناطق المتاحة، والاطّلاع على مزيد من المعلومات حول استخدام مَعلمات region
.
بعد ذلك، ستحتاج إلى div
بتنسيق HTML لوضع خريطتك على الصفحة.
هذا هو المكان الذي سيتم عرض الخريطة فيه.
<div id="map"></div>
الخطوة التالية هي تعيين الوظائف الأساسية لخريطتك. يتم ذلك في دالة النص البرمجي initMap
المحدّدة في عنوان URL للنص البرمجي. في هذا النص البرمجي، الموضح في المثال التالي، يمكنك تحديد الموقع الجغرافي الأولي ونوع الخريطة وعناصر التحكم التي ستكون متاحة على الخريطة للمستخدمين. يُرجى العلم أنّ getElementById()
يشير إلى رقم تعريف div
"الخريطة" أعلاه.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, zoomControl: false }); }
بالنسبة إلى محدِّد المواقع، تهتم عادةً بضبط الموقع الجغرافي الأولي والنقطة المركزية أو الحدود وكذلك مستوى التكبير (مدى تكبير الخريطة لعرض ذلك الموقع الجغرافي). تكون معظم العناصر الأخرى، مثل ضبط عناصر التحكّم، اختيارية لتحديد مستوى التفاعل مع الخريطة.
الحصول على أرقام تعريف الأماكن
يستخدم هذا المثال: Places API | متوفّر أيضًا: JavaScript |
قد تكون لديك قاعدة بيانات لمواقعك الجغرافية تحتوي على معلومات أساسية، مثل اسم ذلك الموقع الجغرافي وعنوانه ورقم هاتفه. لجلب المعلومات المتوفّرة في "منصة خرائط Google" عن ذلك المكان، بما في ذلك الإحداثيات الجغرافية والمعلومات التي يساهم بها المستخدم، ابحث عن رقم تعريف المكان المناسب لكل موقع من المواقع الجغرافية في قاعدة بياناتك. يمكنك
إجراء مكالمة مع
نقطة نهاية البحث عن مكان في تطبيق "البحث عن الأماكن" في Places API وطلب الحقل place_id
فقط. في ما يلي مثال على طلب رقم تعريف المكان لمكتب Google في لندن:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
يمكنك تخزين رقم تعريف المكان في قاعدة بياناتك واستخدامه كطريقة فعّالة لطلب معلومات عن المكان. في ما يلي تعليمات استخدام رقم تعريف المكان بهدف الترميز الجغرافي واسترداد تفاصيل المكان وطلب الاتجاهات إلى المكان.
ترميز المواقع الجغرافية
يستخدم هذا المثال: Geocoding API | متوفّر أيضًا: JavaScript |
إذا كانت قاعدة بيانات المواقع الجغرافية تحتوي على عناوين شوارع بدون إحداثيات جغرافية، استخدِم Geocoding API للحصول على خط العرض وخط الطول لهذا العنوان لأغراض وضع العلامة على الخريطة. يمكنك ترميز عناوينك جغرافيًا على جهة الخادم، وتخزين خطوط العرض والطول في قاعدة البيانات، وإعادة تحميل العناوين كل 30 يومًا على الأقل.
في ما يلي مثال على استخدام Geocoding API للحصول على خط العرض وخط الطول لمعرّف المكان الذي تم إرجاعه لمكتب Google في لندن:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
جارٍ إضافة مواقع جغرافية إلى الخريطة.
الخطوة التالية هي إضافة مواقعك الجغرافية إلى الخريطة. ويتم إجراء ذلك عادةً من خلال إضافة علامات إلى الخريطة، ولكن هناك عددًا من الخيارات الأخرى التي يمكنك استخدامها مثل طبقات البيانات.
بعد أن يتوفّر لديك خط العرض وخط الطول لموقعك الجغرافي، إليك مثال على إضافة علامة إلى الخريطة:
var marker = new google.maps.Marker({ position: { lat: 51.493073, lng: -0.146550 }, label:"A", title:"Location Name" }); // To add the marker to the map, call setMap(); marker.setMap(map);
باستخدام بضع علامات، يمكنك رؤية موقع عدد من المواقع معًا.
![](https://developers.google.cn/static/maps/solutions/images/store-locator/maps.png?authuser=8&hl=ar)
إذا كان هناك عدد كبير من المواقع الجغرافية، يمكنك استخدام أداة تجميع العلامات في JavaScript أو Android أو iOS. في ما يلي مثال على تجميع العلامات في نموذج GitHub لتحديد الموقع الجغرافي لمتجر JavaScript.
تقديم تفاصيل المكان
يستخدم هذا المثال: Maps JavaScript API. | متوفّر أيضًا: API | Android | iOS |
يمكنك مشاركة تفاصيل المكان التي يحتاج المستخدمون إلى معرفتها قبل زيارة أحد مواقعك الجغرافية. وبفضل تفاصيل المكان الغنية بصريًا مثل معلومات الاتصال وساعات العمل وتقييمات المستخدمين وصور المستخدمين وحالة الإغلاق المؤقت، سيعرف المستخدمون بالضبط ما يمكن توقّعه عند زيارة موقعك الجغرافي. بعد إجراء مكالمة إلى Places API، يمكنك فلترة الردّ وعرضه في نافذة معلومات أو شريط جانبي على الويب أو بأي طريقة أخرى.
لطلب تفاصيل المكان، ستحتاج إلى رقم تعريف كل موقع من مواقعك الجغرافية. راجِع الحصول على أرقام تعريف الأماكن لاسترداد رقم تعريف المكان الخاص بموقعك الجغرافي.
التوسيع لعرض فيديوهات لطلب تفاصيل المكان:
الحصول على ساعات العمل
التحقّق من حالات الإغلاق
التحكم في التكاليف
يستخدم المثال التالي مكتبة الأماكن وواجهة برمجة تطبيقات JavaScript للخرائط لاسترداد تفاصيل المكان وإضافتها إلى InfoWindow. وتجدر الإشارة إلى أن عملية التنفيذ هذه تستخدم استراتيجية توفير التكلفة التي تتمثل في إرسال طلب "تفاصيل المكان" فقط عندما يطلب المستخدم التفاصيل من خلال النقر على محدّد الموقع بدلاً من جلب تفاصيل بشكل استباقي عن جميع المواقع الجغرافية بغض النظر عن اهتمام المستخدم.
const marker = new google.maps.Marker({ map, position: { lat: 51.493073, lng: -0.14655 }, }); const request = { placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", fields: ["name", "formatted_address", "rating", "website"], }; const infowindow = new google.maps.InfoWindow(); const service = new google.maps.places.PlacesService(map); google.maps.event.addListener(marker, "click", function () { service.getDetails(request, (place, status) => { if (status === google.maps.places.PlacesServiceStatus.OK && place) { infowindow.setContent( "<div><strong>" + place.name + "</strong><br>" + place.formatted_address + "<br>" + "Rating: " + place.rating + " stars<br>" + place.website + "</div>" ); infowindow.open(map, this); } }); });
إظهار المواقع الجغرافية من عرض بزاوية 45 درجة
يستخدم هذا المثال: Maps JavaScript API. | متوفّر أيضًا: Android | iOS |
من خلال عرض صور جوّية لموقعك الجغرافي، يحصل المستخدمون على فكرة أوضح عن موقعك الجغرافي، ما يساعدهم في العثور عليه بسهولة أكبر. عندما يختار المستخدم موقعًا جغرافيًا واحدًا للاطّلاع على المزيد من التفاصيل، يمكنك تكبير هذا الموقع الجغرافي لعرض صور القمر الصناعي المتاحة بزاوية 45 درجة.
يساعد نموذج الرمز البرمجي التالي في ضبط الخريطة على مستوى تكبير مرتفع ونوع خريطة متوافق وزاوية إمالة تعرض صورًا بزاوية 45 درجة، في حال توفّرها. يمكنك الاطّلاع على تفاصيل حول مدى توفّر الصور بزاوية 45 درجة في المستندات.
function seeDetail(location) { map.setCenter(location); map.setZoom(19); map.setMapTypeId(google.maps.MapTypeId.HYBRID); map.setTilt(45); }
إعادة الضبط على عرض الخريطة الأصلي
يحتاج المستخدمون في أغلب الأحيان إلى التبديل بين العرض التفصيلي لموقع جغرافي واحد والعرض الملخّص لعدة مواقع جغرافية قريبة. لتسهيل ذلك، يمكنك إضافة
أداة استماع لرصد الحالات التي يترك فيها المستخدم عرض التفاصيل، سواء في التفاعلات على الخريطة أو في
عرض القائمة. على سبيل المثال، إنّ الاستماع إلى حدث zoom_changed
على العنصر map
يشير إلى أنّ المستخدم إما التصغير يدويًا من العرض التفصيلي أو استدعى
دالة أخرى عدّلت مستوى التكبير أو التصغير. في هذا النموذج، يؤدي التصغير إلى إعادة ضبط الخريطة على نوع الخريطة الأصلي والإمالة.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP; map.addListener("zoom_changed", () => { const newZoom = map.getZoom()!; if (newZoom < 19) { map.setTilt(0); map.setMapTypeId(originalMapTypeId); } });
تحديد الموقع الجغرافي للمستخدم
يستخدم هذا المثال: Maps JavaScript API | متوفّر أيضًا: Android | iOS |
المكوّن الرئيسي التالي في أي محدِّد مواقع هو تحديد موقع البدء للمستخدم. يمكنك تلقائيًا استخدام خدمات الموقع الجغرافي على الأجهزة الجوّالة وميزة رصد الموقع الجغرافي في متصفّح الويب لطلب أذونات المستخدمين لضبط المصدر على أنّه الموقع الجغرافي الحالي للمستخدم. ومع ذلك، قد يرفض المستخدم هذه الأذونات أو قد يريد ضبط موقع جغرافي آخر كنقطة بداية له.
اعتاد المستخدمون اليوم على وظيفة الإعداد المسبق "الإكمال التلقائي" في إصدار المستهلك من "خرائط Google". ويمكن دمج هذه الوظيفة في أي تطبيق باستخدام مكتبات الأماكن في "منصة خرائط Google" على الأجهزة الجوّالة والويب. عندما يكتب مستخدم عنوانًا، يملأ الإكمال التلقائي بقية العناوين باستخدام التطبيقات المصغّرة. يمكنك أيضًا تقديم وظيفة الإكمال التلقائي الخاصة بك باستخدام مكتبات الأماكن مباشرةً.
إنّ إضافة مكتبة الإكمال التلقائي للأماكن إلى موقعك الإلكتروني هي مجرد إضافة مَعلمتَي طلب بحث إلى عنوان URL للنص البرمجي لواجهة برمجة تطبيقات JavaScript للخرائط. في المثال التالي، تكون الإضافة libraries=places
.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
بعد ذلك، أضف مربع نص إلى صفحتك لإدخال المستخدم.
<input id="autocomplete" placeholder="Enter starting address, city, or zip code" type="text"></input>
وأخيرًا، تحتاج إلى تهيئة خدمة الإكمال التلقائي وربطها بمربع النص المسمى.
يؤدّي فرض
عبارات بحث مقترحة لميزة "الإكمال التلقائي" على أنواع الترميز الجغرافي إلى ضبط حقل الإدخال
لقبول عناوين الشوارع والأحياء والمدن والرموز البريدية، ما يتيح للمستخدمين إدخال
أي مستوى من الخصوصية لوصف أصلهم. احرص على طلب الحقل geometry
لكي يحتوي الردّ على خط العرض وخط الطول لمصدر المستخدم. ستستخدم
إحداثيات الخريطة هذه لإعادة توسيط الخريطة وتوضيح علاقة مواقعك الجغرافية
بالأصل.
// Create the autocomplete object, restricting the search predictions to // geographical location types. const autocomplete = new google.maps.places.Autocomplete( document.getElementById("autocomplete"), { types: ["geocode"], componentRestrictions: {'country': ['gb']}, fields: ['place_id', 'geometry', 'formatted_address'] } ); // When the user selects an address from the drop-down // zoom to the select location and add a marker. autocomplete.addListener("place_changed", addUserLocation); }
في هذا المثال، بعد أن يختار المستخدم العنوان، يتم تنفيذ الدالة addUserLocation()
. يؤدي ذلك إلى تحديد الشكل الهندسي للنتيجة المطابقة، والموقع الجغرافي للمستخدم، ثم نقل الخريطة إلى هذا الموقع وإضافة علامة.
function addUserLocation() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); // Add a marker to the map. const marker = new google.maps.Marker({ map: map }); marker.setLabel("C"); marker.setPosition(place.geometry.location); // Zoom the map to the marker. map.panTo(place.geometry.location); map.setZoom(12); }
يمكنك بعد ذلك الاطّلاع على العلاقة بين المستخدم وأي مواقع جغرافية معيّنة، كما هو موضّح في الصورة التالية.
![](https://developers.google.cn/static/maps/solutions/images/store-locator/autocomplete.png?authuser=8&hl=ar)
يمكنك توسيع هذا القسم لمشاهدة مقاطع الفيديو التفصيلية حول إضافة ميزة "الإكمال التلقائي" للأماكن إلى تطبيقك:
الموقع الإلكتروني
تطبيقات Android
تطبيقات iOS
عرض وقت السفر والمسافة إلى أقرب المواقع الجغرافية
يستخدم هذا المثال: واجهة برمجة تطبيقات مصفوفة المسافة | متوفّر أيضًا: خدمة مصفوفة المسافة وواجهة برمجة تطبيقات JavaScript للخرائط |
بعد تحديد الموقع الجغرافي للمستخدم، يمكنك مقارنة هذا الموقع الجغرافي بموقعك الجغرافي. من خلال استخدام خدمة مصفوفة المسافة، تساعد واجهة برمجة تطبيقات JavaScript للخرائط المستخدمين في اختيار الموقع الجغرافي الأكثر ملاءمةً لهم من خلال وقت القيادة أو المسافة على الطريق.
يشير عرض المواقع الجغرافية بالقرب من مستخدم إلى أنّه تمّت تعبئة مواقعك الجغرافية من قبل. عند استخدام قاعدة بيانات المواقع الجغرافية الخاصة بك، من المهم التأكّد من أنّ البيانات بتنسيق يمكن استخدامه في خريطة، مثل GeoJSON، كما هو موضّح في موضوع طبقة البيانات.
الطريقة القياسية لتنظيم قائمة المواقع هي فرزها حسب المسافة. وفي أغلب الأحيان، يتم احتساب هذه المسافة بسهولة من خلال استخدام الخط المستقيم الذي يربط بين المستخدم والموقع الجغرافي، إلا أن ذلك قد يكون مضللاً. قد يكون الخط المستقيم فوق نهر لا يمكن عبوره أو يمرّ عبر طرق مزدحمة في الوقت الذي يكون فيه هناك موقع جغرافي آخر أكثر ملاءمة. وهذا الإجراء مهم عندما تكون لديك عدة مواقع جغرافية على بُعد بضعة كيلومترات من بعضها.
تعمل خدمة مصفوفة المسافة من خلال أخذ قائمة بالمواقع الجغرافية لنقطة الانطلاق والوجهة، ولا تقتصر على عرض مسافة السفر فحسب، بل تشمل أيضًا الوقت بينهما. وفي حالة المستخدم، ستكون نقطة الانطلاق هي المكان الذي يتواجد فيه حاليًا أو نقطة البداية التي يريدها، وستكون الوجهات هي الوجهة الخاصة بالمواقع الجغرافية. يمكن تحديد المصادر والوجهات كأزواج إحداثية أو كعناوين، وستتم مطابقة العنوان الثاني عند استدعاء الخدمة. يمكنك استخدام مصفوفة المسافة مع عدد من المعلَمات الإضافية لعرض النتائج استنادًا إلى أوقات القيادة الحالية أو المستقبلية.
يطلب المثال التالي "خدمة مصفوفة المسافة" التي تحدّد أصل المستخدم ومواقعه الجغرافية. ويوضّح هذا المثال المسافة من مركز الخرائط إلى ثلاثة مكاتب Google في لندن.
المرجع السريع لترميز عناوين URL: %2C
= و(فاصلة) و%3A
= : (نقطتان) و%7C
= | (شريط رأسي).
https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
&units=metric
&mode=driving
&key=YOUR_API_KEY
&solution_channel=GMP_guides_locatorplus_v2_a
إليك نسخة يمكنك نسخها وتشغيلها:
https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a
ستكون الاستجابة الفعلية من الخدمة قائمة بالعناوين المطابقة والمسافات والمدد، على غرار ما يظهر في المثال التالي:
التوسيع لعرض نموذج الرد:
{ "destination_addresses": [ "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK", "1-13 St Giles High St, West End, London WC2H 8AG, UK", "6 Pancras Square, Kings Cross, London N1C 4AG, UK" ], "origin_addresses": [ "Unnamed Road, London, UK" ], "rows": [ { "elements": [ { "distance": { "text": "4.5 km", "value": 4540 }, "duration": { "text": "15 mins", "value": 924 }, "status": "OK" }, { "distance": { "text": "5.0 km", "value": 5043 }, "duration": { "text": "17 mins", "value": 1044 }, "status": "OK" }, { "distance": { "text": "6.9 km", "value": 6919 }, "duration": { "text": "23 mins", "value": 1357 }, "status": "OK" } ] } ], "status": "OK" }
توضح الصورة التالية المصدر (العلامة الحمراء C) والوجهات على الخريطة:
![تعرِض الصورة خريطة مدينة مع موقع المستخدم الجغرافي كمحدِّد باللون الأحمر والمواقع الجغرافية المحيطة به في شكل علامات خضراء.](https://developers.google.cn/static/maps/solutions/images/store-locator/distance_matrix.png?authuser=8&hl=ar)
غالبًا ما تختلف مسافة الخط المستقيم عن مسافة المسار، كما هو موضّح في الجدول التالي.
الموقع الجغرافي | مسافة مستقيمة | طريق في حركة المرور / الوقت |
---|---|---|
الموقع الجغرافي (أ) | 3.32 كم | 4.5 كم / 15 دقيقة |
الموقع "ب" | 3.20 كم | 5.0 كم / 17 دقيقة |
الموقع الجغرافي "ج" | 4.84 كم | 6.9 كم / 23 دقيقة |
مع أنّ الموقع الجغرافي "ب" هو الأقرب من حيث المسافة، يكون المسار والوقت للوصول إلى هناك أطول لأنّ الموقع الجغرافي "أ" يمكن الوصول إليه عبر طريق سريع.
بعد تقديم هذا الطلب، يمكنك معالجة المطابقة لترتيب الردود حسب مدة القيادة. يمكنك العثور على أمثلة لهذه الدوال في الدروس التطبيقية حول الترميز الخاصة بأداة البحث.
توفير اتجاهات التنقل
يستخدم هذا المثال: خدمة اتجاهات واجهة برمجة تطبيقات JavaScript للخرائط | متوفّرة أيضًا: خدمة الويب Directions API لاستخدامها على Android وiOS، إما مباشرةً من التطبيق أو عن بُعد من خلال خادم وكيل للخادم |
عند عرض الاتجاهات من داخل موقعك الإلكتروني أو تطبيقاتك على المستخدمين، لن يضطروا إلى الانتقال بعيدًا عن موقعك الإلكتروني، ما يعني أنّ المستخدمين لن يشتت انتباههم عن الصفحات الأخرى ولن يرى منافسين على الخريطة. ويمكنك أيضًا عرض انبعاثات الكربون الناتجة عن وسيلة النقل المحدّدة وتأثير أي رحلة معيّنة.
تقدّم خدمة الاتجاهات أيضًا وظائف تتيح لك معالجة النتائج وعرضها بسهولة على الخريطة.
فيما يلي مثال على عرض لوحة الاتجاهات. لمزيد من المعلومات عن النموذج، يُرجى الاطّلاع على عرض الاتجاهات النصية.
للاطّلاع على مزيد من المعلومات حول ميزات "خرائط Google"، يمكنك الاطّلاع على مستندات JavaScript API في "خرائط Google" أو الاطّلاع على الدروس التطبيقية حول الترميز المفصّلة لإنشاء محدِّد المواقع.
مساعدة المستخدمين في حجز المواعيد
عندما يطّلع المستخدمون على "تفاصيل المكان" الخاصة بموقعك الجغرافي في لوحة جانبية، يمكنك تسهيل حجز موعد بنقرة على الزر، كما هو موضّح في الشكل التالي.
![](https://developers.google.cn/static/maps/solutions/store-locator/images/store-locator-appointments.png?authuser=8&hl=ar)
هناك عدة طرق لتفعيل هذه الميزة: (1) باستخدام حل Quick Builder Locator Plus لتوفير هذه الوظيفة بطريقة غير تقليدية، و (2) باستخدام ملفك التجاري. يصف هذا القسم هذه الخيارات بالتفصيل.
استخدام أداة Quick Builder Locator Plus
يمكنك استخدام حل Quick Builder Locator Plus لاستيراد تفاصيل النشاط التجاري بسهولة من ملفك التجاري. بعد الاستيراد إلى "أداة الإنشاء السريع"، يمكنك تفعيل روابط حجز المواعيد المضمَّنة في المواقع الجغرافية لنشاطك التجاري من خلال ميزة "الحجز عبر Google". حتى إذا لم يكن لديك ملف تجاري مرتبط بحساب على Google، لا يزال بإمكانك استخدام "أداة الإنشاء السريع" لتضمين روابط الحجز للأنشطة التجارية التي سبق لك تفعيلها مع مقدّمي خدمات حجز تابعين لجهات خارجية من خلال ميزة "الحجز عبر Google"*.
![الحجز عبر Google](https://developers.google.cn/static/maps/images/locator_reserve_with_google.gif?authuser=8&hl=ar)
*تتوفّر ميزة "الحجز عبر Google" في بلدان أو مناطق معيّنة فقط حيث تعمل الأنشطة التجارية مع مقدّم حجز معتمَد. إذا كنت مهتمًا بميزة "الحجز عبر Google"، ولكنّك لا تعمل حاليًا مع أحد شركاء ميزة "الحجز عبر Google"، يُرجى توجيه مقدّم الخدمة لإبداء الاهتمام من خلال ملء هذا النموذج ومراجعة مستنداتنا لمعرفة كيفية البدء. إذا لم تكن تعمل مع مقدّم خدمة حجوزات، يمكنك الاطّلاع على مقدّمي الخدمات المؤهلين في قسم الحجوزات ضمن لوحة إدارة الملفات التجارية.
استخدام الملف التجاري لتفعيل حجز المواعيد
عند إدارة حضورك على الإنترنت باستخدام الملف التجاري، يتم ربط المواقع الجغرافية للأنشطة التجارية التي تنشئها بأرقام تعريف الأماكن في "منصة خرائط Google" لتفعيل وظيفة إعداد خرائط متكاملة مع بيانات النشاط التجاري.
تتيح لك واجهات برمجة تطبيقات الملف التجاري إنشاء إجراءات، مثل حجز المواعيد، يمكنك استردادها وعرضها في تطبيقاتك، ولكنّها تتطلّب بعض الخطوات اليدوية لتفعيل ذلك، كما هو موضّح أدناه.
عندما يعرض المستخدمون تفاصيل المكان لأحد مواقعك في لوحة جانبية، يمكنك توفير رابط لهم لتحديد موعد. يصف هذا القسم كيفية إجراء ذلك.
-
يمكنك إنشاء واجهات برمجة تطبيقات الملف التجاري
placeActionLink
للموقع الجغرافي من النوعAPPOINTMENT
أوONLINE_APPOINTMENT
أوDINING_RESERVATION
. سيكونplaceActionLink
هو الكائن الذي تستخدمه لرابط الموعد في اللوحة الجانبية. (إذا سبق لك إنشاء رابط إجراء الموعد الذي تريده، انتقِل إلى الخطوة التالية.) في ما يلي مثال لرد من عملية POST ناجحة لـplaceActionLinks.create
:{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" }
-
ابحث عن الموقع الجغرافي في "الملف التجاري" المرتبط برقم تعريف المكان في "منصة خرائط Google".
عندما يطّلع المستخدمون على تفاصيل المكان، فإنهم يشاهدون تفاصيل رقم تعريف المكان في "منصة خرائط Google". يرتبط رقم تعريف المكان برقم تعريف الموقع الجغرافي للملف التجاري، لذا عليك العثور على رقم تعريف الموقع الجغرافي استنادًا إلى رقم تعريف المكان على الخريطة لاسترداد وعرض رابط حجز المواعيد الذي أنشأته. يمكنك إجراء طلبات البيانات التالية من واجهات برمجة التطبيقات في Business Profile API:
- أدرج حسابات مشروعك.
- إدراج جميع المواقع الجغرافية داخل حساب.
- في المواقع الجغرافية للحسابات، تحتوي
LocationKey
على رقم تعريف المكان في "منصة خرائط Google"، والذي يمكنك مقارنته برقم تعريف المكان للموقع الجغرافي الذي يتم عرضه.
-
باستخدام معرّف الموقع الجغرافي، يمكنك الحصول على رابط الإجراء الذي تريده. لاسترداد موعد حالي
placeActionLink
، أدرِجplaceActionLinks
الحالي للموقع الجغرافي، وفلتِر البيانات حسبplaceActionType
للعثور على رابط الموعد الذي تريد استخدامه (APPOINTMENT
أوONLINE_APPOINTMENT
أوDINING_RESERVATION
).يعرض المثال التالي علامة
placeActionLink
APPOINTMENT في الرد من المكالمة على LIST.{ "placeActionLinks": [ { "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/", "placeActionType": "APPOINTMENT", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } ] }
- يمكنك إنشاء
<div>
وملؤها في اللوحة الجانبية بالبيانات ذات الصلة من عنصرplaceActionLink
، لا سيما معرّف الموارد المنتظم (URI) الخاص برابط حجز الموعد.
بدائل أخرى لإضافة روابط مواعيد
إذا لم تكن تدير ملفًا تجاريًا أو لا تريد استخدام حلّ Quick Builder Locator Plus، يمكنك مراجعة منصة حجز المواعيد للحصول على مستندات عن تضمين أداة حجز في موقع إلكتروني أو تطبيق. ويتوفّر خيار آخر، مثل Cloud Spanner لإدارة المستودع (فيديو).
جارٍ إظهار العروض المحلية
في لوحة "تفاصيل المكان" الجانبية لموقع جغرافي، يمكنك إظهار العروض المحلية التي يمكن للمستخدمين النقر عليها. تتيح لك واجهة برمجة تطبيقات "نشاطي التجاري على Google" إنشاء "مشاركات" واستردادها (مثل العروض المحلية) المرتبطة بمواقعك الجغرافية. يوضح الشكل التالي مثالاً لعرض محلي في اللوحة الجانبية لتفاصيل المكان.
![](https://developers.google.cn/static/maps/solutions/store-locator/images/store-locator-offers.png?authuser=8&hl=ar)
(يوضِّح المخطّط الهندسي في القسم السابق التكنولوجيات المتاحة لإضافة عروض إلى أداة البحث عن المواقع الجغرافية).
نظرًا لأن العروض المحلية مرتبطة بالمواقع الجغرافية، ستحتاج إلى العثور على رقم تعريف الموقع الجغرافي في "الملف التجاري" المرتبط برقم تعريف المكان في "منصة خرائط Google" للموقع الجغرافي الذي يطّلع عليه المستخدمون.
عند توفُّر رقم تعريف الموقع الجغرافي في "الملف التجاري على Google"، يمكنك استرداد العرض ذي الصلة على شكل
localPost
لعرضه في اللوحة الجانبية لـ "تفاصيل المكان". إليك الخطوات التي يمكنك اتّباعها:
- باستخدام واجهة برمجة تطبيقات "نشاطي التجاري على Google"، يمكنك إنشاء أي مشاركات للعروض تريد عرضها من النوع
OFFER
. -
ابحث عن الموقع الجغرافي أو رقم تعريف الموقع الجغرافي في "الملف التجاري" المرتبط برقم تعريف المكان على الخريطة.
عندما يطّلع المستخدمون على تفاصيل المكان، فإنهم يشاهدون تفاصيل رقم تعريف المكان على "منصة خرائط Google". يرتبط رقم تعريف المكان برقم تعريف الموقع الجغرافي للملف التجاري، لذا عليك العثور على رقم تعريف الموقع الجغرافي استنادًا إلى رقم تعريف المكان على الخريطة لاسترداد رابط العرض المحلي الخاص بموقعك الجغرافي وعرضه. يمكنك إجراء طلبات البيانات التالية من واجهات برمجة التطبيقات في Business Profile API:
- أدرِج حسابات مشروعك.
- أدرِج جميع المواقع الجغرافية داخل حساب.
- في المواقع الجغرافية للحسابات، تحتوي
LocationKey
على رقم تعريف المكان على الخريطة، والذي يمكنك مقارنته برقم تعريف المكان للموقع الجغرافي الذي يتم عرضه.
في ما يلي مثال على طلب للحصول على تفاصيل موقع جغرافي في واجهات برمجة تطبيقات الملف التجاري:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
يحتوي الردّ على الحقل
locationKey
، وهو معرّف المكان الذي يمكنك استخدامه مع طلبات "منصة خرائط Google".وسِّع للاطّلاع على نموذج الرد.
{ "name": "accounts/111098884960588804666/locations/15899957830169237700", "locationName": "Sushi Sushi", "primaryPhone": "+49 2222 22222", "primaryCategory": { "displayName": "Restaurant", "categoryId": "gcid:restaurant", }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": "09:00", "closeDay": "MONDAY", "closeTime": "09:10" }, { "openDay": "TUESDAY", "openTime": "11:30", "closeDay": "TUESDAY", "closeTime": "24:00" } ] }, "locationKey": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "locationState": { "isGoogleUpdated": true, "canUpdate": true, "canDelete": true, "isVerified": true, "isPublished": true, "canHaveFoodMenus": true }, "attributes": [ { "attributeId": "has_delivery", "valueType": "BOOL", "values": [ false ] }, { "attributeId": "requires_masks_customers", "valueType": "BOOL", "values": [ true ] }, { "attributeId": "url_order_ahead", "valueType": "URL", "urlValues": [ { "url": "https://example.com/" }, ] }, { "attributeId": "pay_credit_card_types_accepted", "valueType": "REPEATED_ENUM", "repeatedEnumValue": { "setValues": [ "visa" ], "unsetValues": [ "american_express" ] } } ], "address": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } }
-
الآن بعد أن أصبح لديك معرّف الموقع، يمكنك الحصول على العرض الذي تريده. لاسترداد مشاركة عرض حالية، أدرِج
localPosts
الحالية للموقع الجغرافي، وفلتِر البيانات بحثًا عنtopicType
منOFFER
للعثور على محتوى العرض الذي تريد استخدامه.في ما يلي مثال على طلب لإدراج "المشاركات المحلية" النشطة لأحد المواقع الجغرافية:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
يعرض المثال التالي علامة
localPost
OFFER
في الردّ.وسِّع للاطّلاع على نموذج الرد.
{ "localPosts": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680", "languageCode": "en", "summary": "Buy One Get One Free on all order-ahead bento boxes today!", "state": "LIVE", "event": { "title": "Bento BOGO", "schedule": { "startDate": { "year": 2020, "month": 1, "day": 20 }, "startTime": {}, "endDate": { "year": 2021, "month": 1, "day": 21 }, "endTime": {} } }, "updateTime": "2020-09-11T10:56:22.594Z", "createTime": "2020-09-11T10:56:22.594Z", "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680", "media": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS", "mediaFormat": "PHOTO", "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS" } ], "topicType": "OFFER", "offer": { "couponCode": "BOGO-JET-CODE", "redeemOnlineUrl": "https://www.example.com/redeem", "termsConditions": "Offer only valid for order-ahead orders placed online." } }, ], }
- أنشِئ
<div>
وعبئته في اللوحة الجانبية بالبيانات ذات الصلة من العنصرlocalPost
.
تخصيص خريطتك
يمكنك تغيير مظهر الخريطة وتفاصيلها بعدة طرق. على سبيل المثال، يمكنك إجراء ما يلي:
- يمكنك إنشاء محدّدات موقع مخصّصة لاستبدال دبابيس الخريطة التلقائية.
- يمكنك تغيير ألوان ميزات الخريطة لتعكس علامتك التجارية.
- يمكنك تحديد نقاط الاهتمام التي تعرضها (معالم الجذب والطعام وأماكن الإقامة وما إلى ذلك) وتحديد الكثافة، ما يتيح لك تركيز انتباه المستخدمين على المواقع الجغرافية لنشاطك التجاري مع تسليط الضوء على المعالم التي تساعد المستخدمين في الوصول إلى أقرب موقع جغرافي.
إنشاء محددات خرائط مخصصة
يمكنك تخصيص محدّدات المواقع من خلال تغيير اللون التلقائي (من المحتمل أن يظهر ما إذا كان الموقع الجغرافي مفتوحًا حاليًا) أو استبدال محدّد الموقع بصورة مخصّصة، مثل شعار علامتك التجارية. يمكن أن توفّر نوافذ المعلومات أو النوافذ المنبثقة معلومات إضافية للمستخدمين، مثل ساعات العمل أو رقم الهاتف أو حتى الصور. ويمكنك أيضًا إنشاء علامات مخصّصة تكون نقطية ومتّجه وقابلة للسحب وحتى مؤثرة متحركة.
فيما يلي نموذج خريطة يستخدم محددات مخصصة. (اطّلِع على رمز المصدر في موضوع العلامات المخصّصة في Maps JavaScript API.)
للحصول على معلومات تفصيلية، اطّلِع على مستندات العلامات الخاصة بكل من JavaScript (الويب) وAndroid وiOS.
تصميم خريطتك
تتيح لك "منصة خرائط Google" تصميم خريطتك بطرق تساعد المستخدمين في العثور على أقرب موقع جغرافي والوصول إليه في أسرع وقت ممكن وتعزيز علامتك التجارية. على سبيل المثال، يمكنك تغيير ألوان الخريطة لتتناسب مع علامتك التجارية، كما يمكنك تقليل مصادر التشتيت على الخريطة من خلال التحكّم في نقاط الاهتمام التي تكون مرئية للمستخدمين. توفّر "منصة خرائط Google" أيضًا عددًا من نماذج المبتدئين للخرائط، والتي تم تحسين بعضها لمختلف الصناعات، مثل السفر والخدمات اللوجستية والعقارات والبيع بالتجزئة.
يمكنك إنشاء أنماط الخرائط أو تعديلها في صفحة أنماط الخرائط على Google Cloud Console في مشروعك.
يمكنك التوسيع لعرض صور متحركة لإنشاء نمط الخريطة وتصميمه في Cloud Console:
أنماط الخرائط على مستوى المجال
تعرض هذه الصورة المتحركة أنماط الخرائط المحددة مسبقًا والخاصة بالمجال والتي يمكنك استخدامها. تمثّل هذه الأنماط نقطة انطلاق مثالية لكل نوع من المجالات. على سبيل المثال، يقلل نمط خريطة البيع بالتجزئة من نقاط الاهتمام على الخريطة، ما يسمح للمستخدمين بالتركيز على المواقع الجغرافية لنشاطك التجاري بالإضافة إلى المعالم لمساعدتهم في الوصول إلى أقرب موقع جغرافي بثقة قدر الإمكان.
![في صفحة "نمط الخريطة"، ينقر الماوس على "إنشاء نمط خريطة جديد". في صفحة "نمط الخريطة الجديدة"، ينقر الماوس على زر الاختيار بجانب كل نمط من الأنماط التالية المحسّنة في المجال: السفر والخدمات اللوجستية والعقارات والبيع بالتجزئة. وعندما يتم النقر على كل زر، يتغيّر وصف نمط الخريطة والمعاينة الرسومية.](https://developers.google.cn/static/maps/solutions/images/store-locator/ioms_animation.gif?authuser=8&hl=ar)
التحكم في نقاط الاهتمام
تضبط هذه الصورة المتحركة لون العلامة لنقاط الاهتمام وتزيد من كثافة نقاط الاهتمام على نمط الخريطة. كلما زادت الكثافة، زاد عدد علامات نقاط الاهتمام على الخريطة.
![في صفحة "نمط الخريطة"، ينقر الماوس على "إنشاء نمط خريطة جديد". في صفحة "نمط خريطة جديد"، ضمن "إنشاء نمطك الخاص"، يتم تحديد زر اختيار "خرائط Google". ينقر الماوس على زر الاختيار Versa 3 لنمط Versa 3،
ثم ينقر على "فتح في محرر النمط". وفي "محرِّر الأنماط"، ينقر الماوس على ميزة "نقاط الاهتمام"، ثم ينقر على عنصر "الرمز"، ويضبط اللون على اللون الأحمر. يحدد الماوس بعد ذلك مربّع الاختيار "كثافة نقطة الاهتمام" ويمرر
عنصر التحكم في الكثافة إلى اليسار للحصول على أقصى كثافة. يظهر المزيد والمزيد من العلامات الحمراء على معاينة الخريطة مع زيادة الكثافة. ينتقل الماوس بعد ذلك
إلى الزر "حفظ".](https://developers.google.cn/static/maps/solutions/images/store-locator/poi_animation.gif?authuser=8&hl=ar)
لكل نمط خريطة رقم تعريف خاص به. بعد نشر نمط في Cloud Console، عليك الإشارة إلى رقم تعريف الخريطة هذا في رمزك، ما يعني أنّه بإمكانك تعديل نمط الخريطة في الوقت الفعلي بدون إعادة ضبط إعدادات تطبيقك. وسيظهر المظهر الجديد تلقائيًا في التطبيق الحالي وسيتم استخدامه على مختلف الأنظمة الأساسية. توضّح الأمثلة التالية كيفية إضافة معرّف خريطة إلى صفحة ويب باستخدام واجهة برمجة تطبيقات JavaScript للخرائط.
من خلال تضمين علامة map_ids
واحدة أو أكثر في عنوان URL للنص البرمجي، تتيح واجهة برمجة تطبيقات JavaScript للخرائط
هذه الأنماط تلقائيًا لعرض الخريطة بشكل أسرع عند استدعاء هذه الأنماط في رمزك.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</script>
يعرض الكود التالي خريطة ذات نمط على صفحة الويب. (العنصر غير المعروض هو عنصر <div id="map"></div>
HTML، حيث ستظهر الخريطة على الصفحة).
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
تعرّف على مزيد من المعلومات حول دمج تصميم الخرائط المستند إلى السحابة الإلكترونية في JavaScript (الويب) وAndroid وiOS.
الحصول على إحصاءات الاستخدام من خلال التحليلات
باستخدام التحليلات، يمكنك الحصول على رؤى قيّمة حول كيفية تفاعل المستخدمين مع محدِّد المواقع. يقدّم هذا القسم إرشادات حول ضبط ومراقبة "إحصاءات Google" وإحصاءات الملف التجاري لتتبُّع البيانات التي تهمّك. بالنسبة إلى مستخدمي Quick Builder Locator Plus، تساعدك لوحة بيانات "إحصاءات Google" على تحليل الإحصاءات وإنشائها، ما يمنحك صورة عن مدى تفاعل زوّار موقعك الإلكتروني مع أداة البحث عن المتاجر استنادًا إلى بيانات مخفية الهوية.
![إحصاءات Locator Plus](https://developers.google.cn/static/maps/images/locator_analytics.png?authuser=8&hl=ar)
للوصول إلى هذا التقرير، انتقِل إلى قسم "تقارير التفاعل" في Cloud Console. لمزيد من التفاصيل حول هذا التقرير، يمكنك الاطّلاع على تقارير التفاعل.
نظرًا إلى قوة ومرونة Google Analytics، لن نحاول توفير معلومات شاملة حول الإعداد والاستخدام. بدلاً من ذلك، سنوجهك إلى الوثائق الرئيسية لمزيد من القراءة والإرشادات مع إبراز اعتبارات التحليلات الرئيسية لتطبيق محدد المواقع.
إعداد برنامج Google Analytics
إذا كنت تستخدم "إحصاءات Google" مع تطبيقك، يمكنك تخطي هذا القسم.
في ما يلي مثال على "علامة عامة" تلصقها في موقعك الإلكتروني لتفعيل "إحصاءات Google".
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/ gtag/js?id=G-XR5B5D4NW0"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XR5B5D4NW0'); </script>
سواء كنت تستخدم أداة "إدارة العلامات من Google" أو تُضيف "إحصاءات Google" إلى موقعك الإلكتروني مباشرةً، عليك معرفة كيفية استخدام عملية تنفيذ "إحصاءات Google" لإجراء ما يلي:
- تؤدي إلى تفاعلات المستخدمين، مثل النقرات، التي يمكن قياسها بشكلٍ مستقل عن مشاهدات الصفحات على الموقع الإلكتروني (الأحداث).
- اعرض البيانات الأولية (metrics) في مجموعات مفيدة (السمات أو السمات المخصّصة).
استخدام الأحداث المخصّصة
في ما يلي مثال على تحديد حدث مخصّص في أداة البحث عن المواقع:
gtag('event', 'location', { 'method': 'address' });
من المهم تسمية event
وmethod
بوضوح بشكلٍ كافٍ حتى تتمكّن من فهم الأحداث في إعداد التقارير. شغّلها لتفاعلات محددة تريد قياسها، مثلاً عندما يختار المستخدم ويتناولها من القائمة المنسدلة للإكمال التلقائي التي تظهر في الشكل التالي.
![](https://developers.google.cn/static/maps/solutions/store-locator/images/event_autocomplete_select.png?authuser=8&hl=ar)
يمكنك إرسال طلب التتبّع التالي إلى "إحصاءات Google" الذي يستخدِم الحدث والطريقة التي حدّدتها. (سنعرض كل معلمة من معلمات طلب البحث في سطر منفصل لتيسير القراءة).
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
يوضح الشكل التالي كيفية ظهور طلب Google Analytics في طريقة عرض "فحص" للمتصفح، ضمن علامة التبويب "الشبكة". (انقر للتكبير).
![](https://developers.google.cn/static/maps/solutions/store-locator/images/event_inspect.png?authuser=8&hl=ar)
يمكنك التحقّق من أنّه يتم تسجيل علامات الأحداث المخصّصة بشكلٍ سليم من خلال عرض عرض "الوقت الفعلي" في "إحصاءات Google". على سبيل المثال، يظهر حدث "الموقع الجغرافي" الذي تم إعداده سابقًا للإكمال التلقائي للأماكن في "إحصاءات Google" كما هو موضّح في الأشكال التالية.
![](https://developers.google.cn/static/maps/solutions/store-locator/images/event_realtime.png?authuser=8&hl=ar)
![](https://developers.google.cn/static/maps/solutions/store-locator/images/event_realtime2.png?authuser=8&hl=ar)
بدلاً من ذلك، يمكنك مراقبة الأحداث في الوقت الفعلي باستخدام DebugView، كما هو موضّح في الشكل التالي. يُرجى العلم أنّه عليك الانتظار لمدة 24 ساعة قبل الوصول إلى تقرير كامل عن الأحداث في قسم التفاعل > الأحداث ضمن "إحصاءات Google".
![](https://developers.google.cn/static/maps/solutions/store-locator/images/event_debug.png?authuser=8&hl=ar)
يمكنك أيضًا تطوير استراتيجيات وقياسها لزيادة عدد الزيارات إلى مواقعك الجغرافية من تطبيق أدوات تحديد المواقع الجغرافية. على سبيل المثال، توفِّر "إحصاءات Google" عرض زيارات المتجر في "إحصاءات Google" الذي يربط بين إحصاءات زيارات المتجر (التي تم قياسها بواسطة "إعلانات Google") بإحصاءات محدِّد المواقع. يمكنك أيضًا تطوير استراتيجيات الانتقال من تطبيق إلى آخر، مثل العروض على الإنترنت التي يمكن تحصيل قيمتها في مواقعك الجغرافية.
مقاييس الملف التجاري
بالإضافة إلى تتبُّع الأحداث والمقاييس والسمات التي تهمّك باستخدام "إحصاءات Google"، يتضمّن الملف التجاري أيضًا metrics خاصة به. على سبيل المثال، إذا أضفت روابط لحجز المواعيد وروابط العروض المحلية إلى أداة البحث عن المواقع، يمكنك الحصول على مقاييس حول هذه المشاهدات والنقرات.
يطلب نموذج الطلب التالي إلى واجهات برمجة تطبيقات الملف التجاري أنواعًا متعددة من المقاييس. لتتبُّع النقرات على العروض، سيكون المقياسان LOCAL_POST_VIEWS_SEARCH
وLOCAL_POST_ACTIONS_CALL_TO_ACTION
هو الأكثر ملاءمةً.
وسِّع لعرض نموذج الطلب.
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights Body: { "locationNames": [ "accounts/111098884960528804666/locations/15899957830169237700" ], "basicRequest": { "metricRequests": [ { "metric": "QUERIES_DIRECT" }, { "metric": "QUERIES_INDIRECT" }, { "metric": "VIEWS_MAPS" }, { "metric": "VIEWS_SEARCH" }, { "metric": "ACTIONS_DRIVING_DIRECTIONS" }, { "metric": "LOCAL_POST_VIEWS_SEARCH" }, { "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION" } ], "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } } }
وسِّع للاطّلاع على نموذج الرد.
{ "locationMetrics": [ { "locationName": "accounts/111098884960528804666/locations/15899957830169237700", "timeZone": "Asia/Singapore", "metricValues": [ { "metric": "QUERIES_DIRECT", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "82" } }, { "metric": "QUERIES_INDIRECT", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "1493" } }, { "metric": "VIEWS_MAPS", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "1571" } }, { "metric": "VIEWS_SEARCH", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "631" } }, { "metric": "ACTIONS_DRIVING_DIRECTIONS", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "3" } }, { "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "42" } }, { "metric": "LOCAL_POST_VIEWS_SEARCH", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "11" } } ] } ] }
يتضمّن الردّ المقاييس، أبرزها:
- 1571 مشاهدة للموقع الجغرافي على "خرائط Google"
- 631 مشاهدة للموقع الجغرافي على "بحث Google".
- 3 طلبات للحصول على اتجاهات القيادة إلى الموقع الجغرافي
- 42 نقرة على العرض
LOCAL_POST_ACTIONS_CALL_TO_ACTION
. - 11 مشاهدة للمشاركات المحلية على "بحث Google"
يتضمّن خيار مقاييس آخر استخدام الحجز عبر Google لإنشاء روابط إجراءات. عندما ينقر المستخدِمون على روابط الإجراءات التي تمّ إنشاؤها في ميزة "الحجز عبر Google"، يمكنك تسجيل هذه الإجراءات في "إحصاءات Google"، ما يتيح لك تتبُّع الإحالات الناجحة في "إحصاءات Google". اطّلِع على مستندات تتبُّع الإحالات الناجحة للحصول على مزيد من المعلومات.
بغض النظر عن استراتيجية المقاييس التي تستخدمها، يكون القياس أكثر من مجرد معرفة مستوى أدائك مقارنةً بمؤشرات الأداء الرئيسية. تساعدك الأرقام أيضًا في فهم تأثير تحسينات محدِّد المواقع هذه على نشاطك التجاري. بالإضافة إلى ذلك، يمكنك مقارنة المقاييس من "إحصاءات Google" في أداة البحث عن المقاييس بمقاييس "الملف التجاري". على سبيل المثال، من خلال مقارنة هذه المقاييس، يمكنك معرفة عدد العملاء الذين يحصلون على الاتجاهات من أداة البحث عن المواقع الجغرافية و"خرائط Google" لزيارة المواقع الجغرافية لنشاطك التجاري.
تحسين Locator Plus
واستنادًا إلى احتياجات نشاطك التجاري أو المستخدمين، يمكنك إضافة المزيد من التحسينات إلى تجربة المستخدم.
جارٍ إرسال الاتجاهات إلى الهاتف الجوّال
لتسهيل وصول المستخدمين إلى موقع جغرافي معيّن، يمكنك إرسال رسالة نصية أو رسالة إلكترونية تتضمّن رابطًا يؤدي إلى الاتّجاهات. عندما ينقر المستخدمون على التطبيق، سيتم تشغيل تطبيق "خرائط Google" على هواتفهم إذا كان مثبّتًا أو سيتم تحميل Maps.google.com في متصفح الويب على أجهزتهم. توفِّر هاتان التجربتان للمستخدم خيار استخدام الاتّجاهات المفصّلة، بما في ذلك الإرشاد الصوتي، للوصول إلى الوجهة.
استخدِم
عناوين URL في "خرائط Google" لإنشاء عنوان URL للاتجاهات على النحو التالي، مع
اسم المكان الذي تم ترميزه بعنوان URL كمَعلمة destination
ومعرّف المكان كمَعلمة destination_place_id
. ما مِن تكلفة لإنشاء عناوين URL في "خرائط Google" أو استخدامها،
وبالتالي لن تحتاج إلى تضمين مفتاح واجهة برمجة التطبيقات في عنوان URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
يمكنك اختياريًا تقديم معلَمة طلب بحث origin
باستخدام تنسيق العنوان نفسه كوجهة. من خلال حذف الاتجاهات، تبدأ الاتجاهات من الموقع الجغرافي
الحالي للمستخدم، والذي قد يختلف عن المكان الذي كان يستخدم فيه تطبيق Locator Plus.
توفّر عناوين URL في "خرائط Google"
خيارات إضافية لمَعلمات طلب البحث، مثل travelmode
وdir_action=navigate
لإطلاق الاتجاهات مع تفعيل ميزة التنقّل.
إنّ هذا الرابط القابل للنقر، الذي يوسّع مثال عنوان URL أعلاه، يضبط origin
كملعب لكرة القدم في لندن ويستخدم travelmode=transit
لتقديم اتجاهات النقل العام إلى الوجهة.
لإرسال رسالة نصية أو رسالة إلكترونية تتضمّن عنوان URL هذا، ننصح حاليًا باستخدام تطبيق تابع لجهة خارجية مثل twilio. إذا كنت تستخدم App Engine، يمكنك الاستعانة بشركات خارجية لإرسال رسائل SMS أو رسائل إلكترونية. لمزيد من المعلومات، يُرجى الاطّلاع على القسم إرسال الرسائل باستخدام خدمات الجهات الخارجية.
عرض محتوى "التجوّل الافتراضي" لمساعدة المستخدمين في الاطّلاع على المواقع الجغرافية
يمكن استخدام ميزة "التجوّل الافتراضي" في العديد من المواقع الجغرافية في مختلف أنحاء العالم لعرض الجزء الخارجي من الموقع الجغرافي، ما يتيح للمستخدمين الاطّلاع على الموقع الجغرافي قبل وصولهم إليه. يمكنك توفير ميزة "التجوّل الافتراضي" في نموذج تفاعلي (على الويب) أو ثابت (واجهة برمجة التطبيقات)، اعتمادًا على ما إذا كنت تريد أن يتمكن المستخدمون من "إلقاء نظرة حول" المنطقة بزاوية 360 درجة. تتوفر ميزة "التجوّل الافتراضي" أيضًا على أنظمة التشغيل Android وiOS.
تحديد الموقع الجغرافي للمستخدم باستخدام ميزة "رصد الموقع الجغرافي"
في معظم الحالات، يمكنك تحديد الموقع الجغرافي للمستخدم باستخدام خدمات الموقع الجغرافي المضمّنة في أجهزته أو متصفّحاته. ونقدم مثالاً على استخدام ميزة تحديد الموقع الجغرافي في HTML5 في أحد المتصفحات لعرض الموقع الجغرافي لمستخدم أو جهاز على خريطة Google، وهناك مستندات حول طلب الأذونات والحصول على الموقع الجغرافي في Android و iOS. في المقابل، قد تحتاج في بعض الحالات إلى أداة بديلة للعثور على موقع جغرافي، كأن تكون خدمات الموقع الجغرافي غير مفعّلة مثلاً أو إذا كانت لديك مخاوف بشأن انتحال الموقع الجغرافي للجهاز.
Geolocation API هي واجهة برمجة تطبيقات من جهة الخادم تعرض موقعًا جغرافيًا ونطاق دقة استنادًا إلى معلومات حول أبراج الاتصالات وعُقد Wi-Fi التي يمكن للعميل اكتشافها. يمكنك استخدام ميزة "رصد الموقع الجغرافي" كآلية احتياطية لتحديد الموقع الجغرافي للمستخدم، أو يمكنك استخدامها للتحقّق من الموقع الجغرافي الذي أبلغ عنه الجهاز.
الجمع بين بيانات الموقع الجغرافي المخصّصة وتفاصيل المكان
في القسم السابق تقديم تفاصيل المكان، تناولنا استخدام تفاصيل المكان لمنح المستخدمين مستوى وافية من المعلومات عن مواقعك الجغرافية، مثل ساعات العمل والصور والمراجعات.
ومن المفيد أن تفهم تكلفة حقول البيانات المختلفة في "تفاصيل المكان" والتي يتم تصنيفها على أنّها "بيانات أساسية" و"بيانات جهات الاتصال" و"بيانات الغلاف الجوي". لإدارة تكاليفك، تتمثّل إحدى الإستراتيجيات في دمج المعلومات المتوفرة لديك عن مواقعك الجغرافية مع المعلومات الجديدة (عادةً البيانات الأساسية وبيانات جهات الاتصال) من "خرائط Google"، مثل الإغلاق المؤقت وساعات العمل خلال العطلات وتقييمات المستخدمين والصور والمراجعات. إذا كانت لديك معلومات الاتصال لمواقعك الجغرافية، لن تحتاج إلى طلب هذه الحقول من "تفاصيل المكان"، ويمكنك حصر طلبك بجلب حقول "أساسية" أو "بيانات الغلاف الجوي" فقط بناءً على ما تريد عرضه.
قد يكون لديك بيانات مكان خاصة بك لاستكمالها أو استخدامها بدلاً من "تفاصيل المكان". يقدّم الدرس التطبيقي حول الترميز الخاص بمحدِّد مواقع حزم البيانات بالكامل مثالاً على استخدام GeoJSON مع قاعدة بيانات لتخزين تفاصيل موقعك الجغرافي واستردادها.