نظرة عامة
تتوفّر "منصة خرائط Google" للويب (JS وTS) وAndroid وiOS، وتقدّم أيضًا واجهات برمجة تطبيقات لخدمات الويب من أجل الحصول على معلومات عن الأماكن والاتجاهات والمسافات. تمت كتابة النماذج في هذا الدليل لمنصة واحدة، ولكن يتم توفير روابط المستندات للتنفيذ على منصات أخرى.
تتيح لك أداة Quick Builder في وحدة تحكّم Google Cloud إنشاء أداة تحديد مواقع بسرعة، بما في ذلك استيراد بيانات "الملف التجاري" وتضمين روابط حجز المواعيد تلقائيًا من مقدّمي الخدمات الخارجيين. تتيح لك واجهة المستخدم التفاعلية إنشاء الرموز البرمجية ونشرها على Cloud في غضون دقائق.
يريد المستخدمون البحث عن المنتجات والخدمات على الإنترنت والعثور على أفضل موقع جغرافي وأكثره ملاءمةً لزيارته أو حجز موعد فيه أو استلام طلب منه. سيرغبون في الوصول إلى موقعك الجغرافي في أسرع وقت ممكن، وستحتاج إلى منحهم تجارب غنية على الإنترنت تزيد من الزيارات إلى مواقعك الجغرافية، وتعزز رضا المستخدمين، وتقلل من مكالمات الدعم. ستحتاج أيضًا إلى قياس مدى نجاح أداة تحديد المواقع الجغرافية لمعرفة ما إذا كان بإمكان عملائك العثور على موقعك الجغرافي، وستحتاج إلى معرفة الجوانب التي يجب تحسينها.
Locator Plus، أي الإرشادات ونصائح التخصيص التي نقدّمها في هذا المستند، هو ما ننصح به كأفضل مجموعة من واجهات برمجة التطبيقات في "منصة خرائط Google" لإنشاء تجارب مستخدمين رائعة في ما يتعلّق بتحديد المواقع الجغرافية. باتّباع هذه الممارسات، يمكنك مساعدة المستخدمين في العثور على مواقعك الجغرافية على الخريطة، والاطّلاع على المعلومات التفصيلية التي يحتاجون إليها لاتخاذ القرارات، والحصول على الاتجاهات، سواء كانوا يقودون سيارة أو دراجة أو يمشون أو يستخدمون وسائل النقل العام.
بالنسبة إلى مستخدمي Locator Plus، تساعدك لوحة بيانات الإحصاءات في تحليل البيانات وإنشاء إحصاءات منشأة تلقائيًا منها، ما يمنحك صورة واضحة عن مدى تفاعل المتسوّقين مع محدِّد مواقع المتاجر. للوصول إلى هذا التقرير، انتقِل إلى قسم تقارير التفاعل في Play Console. لمزيد من التفاصيل حول هذا التقرير، يُرجى الاطّلاع على تقارير التفاعل.
يوضّح المخطّط البياني التالي واجهات برمجة التطبيقات الأساسية المستخدَمة في تنفيذ Locator Plus. يعرض المخطّط البياني أيضًا قاعدة بيانات لبيانات موقعك الجغرافي التي يمكنك دمجها مع "تفاصيل المكان" لتزويد المستخدمين بأفضل مجموعة من المعلومات وأكثرها اكتمالاً. (انقر لتكبير الصورة)
تفعيل واجهات برمجة التطبيقات
لتنفيذ هذه الممارسات، يجب تفعيل واجهات برمجة التطبيقات التالية في وحدة تحكّم Google Cloud: لمزيد من المعلومات حول عملية الإعداد، يُرجى الاطّلاع على مقالة بدء استخدام "منصة خرائط Google".أقسام التنفيذ
في ما يلي الممارسات وعمليات التخصيص التي سنتناولها في هذا المستند.
- رمز علامة صح هو تمرين أساسي.
- رمز النجمة هو تخصيص اختياري ولكن يُنصح به لتحسين الحلّ.
| عرض مواقعك الجغرافية على خريطة تفاعلية |
يمكنك إنشاء خريطة تتيح للمستخدمين الاطّلاع على تفاصيل الموقع الجغرافي والتنقّل والتكبير والتصغير. يمكنك أيضًا استكشاف حلّ Quick Builder Locator Plus لإنشاء خريطة بسرعة، بما في ذلك استيراد تفاصيل النشاط التجاري من بيانات ملفك التجاري وتضمين روابط حجز المواعيد والنشر على Google Cloud Storage. |
|
| تقديم تفاصيل المكان | بعد أن يعثر المستخدمون على أقرب مواقع جغرافية لك على الخريطة، يمكنك تزويدهم بتفاصيل المكان عن هذه الأماكن لمساعدتهم في اتخاذ القرارات. | |
| عرض المواقع الجغرافية من زاوية 45 درجة | يمكنك منح المستخدمين مرئيات أفضل لموقعك الجغرافي في عرض القمر الصناعي من زاوية 45 درجة. | |
| تحديد الموقع الجغرافي للمستخدم | يمكنك إضافة وظيفة الكتابة أثناء التنقّل لتحسين تجربة المستخدم على جميع المنصات وتحسين دقة العناوين بأقل عدد من ضغطات المفاتيح. | |
| عرض مدة الرحلة والمسافة إلى أقرب المواقع الجغرافية | يمكنك احتساب مسافة الرحلة ومدتها لعدة نقاط انطلاق ووجهات، مع إمكانية تحديد أشكال مختلفة من وسائل النقل، مثل المشي أو القيادة أو ركوب الدراجات. | |
| مساعدة المستخدمين في حجز المواعيد |
يمكنك السماح للمستخدمين بحجز موعد من اللوحة الجانبية "تفاصيل المكان". يمكنك أيضًا استكشاف حلّ Quick Builder Locator Plus لإنشاء خريطة بسرعة، بما في ذلك استيراد تفاصيل النشاط التجاري من بيانات ملفك التجاري وتضمين روابط حجز المواعيد والنشر على Google Cloud Storage. |
|
| عرض العروض المحلية | اعرض للمستخدمين عروضًا محلية قابلة للنقر في اللوحة الجانبية "تفاصيل المكان". | |
| تقديم اتجاهات التنقّل | يمكنك الحصول على بيانات الاتجاهات من نقطة الانطلاق إلى الوجهة باستخدام وسائل نقل مختلفة، مثل المشي والقيادة وركوب الدراجات ووسائل النقل العام. | |
| تخصيص الخريطة | يمكنك إنشاء علامات مخصّصة على الخريطة لمساعدة المستخدمين في العثور على مواقعك الجغرافية بسهولة، وتصميم الخريطة بما يتوافق مع ألوان علامتك التجارية. يمكنك عرض (أو إخفاء) نقاط اهتمام معيّنة على خريطتك لمساعدة المستخدمين في توجيه أنفسهم بشكل أفضل، والتحكّم في كثافة نقاط الاهتمام لمنع ازدحام الخريطة. | |
| الحصول على إحصاءات الاستخدام من خلال الإحصاءات | يمكنك ضبط "إحصاءات Google" واستخدامها للحصول على إحصاءات حول استراتيجية أداة تحديد المواقع الجغرافية وتنفيذها. | |
| إرسال الاتجاهات إلى جهاز جوّال | بالإضافة إلى عرض الاتجاهات على أداة تحديد المواقع الجغرافية، يمكنك أيضًا إرسال الاتجاهات إلى هاتف المستخدم للتنقّل باستخدام "خرائط Google" أثناء التنقّل. | |
| عرض صور "التجوّل الافتراضي" لمساعدة المستخدمين في تصوّر المواقع الجغرافية | قدِّم للمستخدمين صور "التجوّل الافتراضي" بزاوية 360 درجة لتوجيههم بشكل أفضل ومساعدتهم في العثور على مواقعك الجغرافية بشكل أسرع. | |
| تحديد الموقع الجغرافي للمستخدم باستخدام ميزة "رصد الموقع الجغرافي" | إذا كنت لا تريد الاعتماد على الخدمات المستندة إلى الموقع الجغرافي على الجهاز، استخدِم "تحديد الموقع الجغرافي" للمساعدة في تحديد الموقع الجغرافي للمستخدم. | |
| دمج بيانات الموقع الجغرافي المخصّصة مع تفاصيل المكان | يمكنك دمج تفاصيل الموقع الجغرافي المخصّصة مع تفاصيل المكان لتزويد المستخدمين بمجموعة غنية من البيانات لاتخاذ القرارات. |
عرض مواقعك الجغرافية على خريطة تفاعلية
يُعدّ محدّد المواقع الجغرافية جزءًا مهمًا من تجربة المستخدم. ومع ذلك، قد تفتقر بعض المواقع الإلكترونية إلى خريطة، ما يتطلّب من المستخدمين مغادرة الموقع الإلكتروني أو التطبيق للعثور على موقع جغرافي قريب. ويؤدي ذلك إلى تجربة غير مثالية للمستخدمين الذين يتعيّن عليهم التنقّل بين الصفحات للحصول على المعلومات التي يحتاجون إليها. بدلاً من ذلك، يمكنك تحسين هذه التجربة من خلال تضمين الخرائط وتخصيصها في تطبيقاتك.
يمكنك تفعيل هذه الوظيفة بطريقتَين: باستخدام حلّ Quick Builder Locator Plus لتوفيرها بشكل جاهز، أو باستخدام عملية تنفيذ "الخرائط الديناميكية" الخاصة بك. يصف هذا القسم هذه الخيارات بالتفصيل.
استخدام Quick Builder Locator Plus
يمكنك استخدام حلّ Quick Builder Locator Plus لاستيراد تفاصيل النشاط التجاري من ملفك التجاري. وبالتالي، سيظهر الآن أي تغيير في تفاصيل مؤسستك في ملفك التجاري ضمن محدِّد مواقع المتاجر على موقعك الإلكتروني. ويمكن أن تشمل هذه التغييرات ساعات العمل ومعلومات الاتصال والصور وخيارات الخدمة والمزيد. تتيح لك أداة Quick Builder استكشاف كيفية إعداد المواقع الجغرافية للأنشطة التجارية على الخريطة بسرعة، أو إنشاء رمز قابل للنشر، أو النشر مباشرةً في Google Cloud Storage في غضون دقائق.
استخدام عملية تنفيذ "الخرائط الديناميكية" الخاصة بك
| يستخدم هذا المثال: Maps JavaScript API | متوفّر أيضًا على: Android | iOS |
يمكنك إضافة خريطة ديناميكية إلى صفحتك، أي خريطة يمكن للمستخدمين التنقّل فيها وتكبيرها وتصغيرها والحصول على تفاصيل حول المواقع الجغرافية المختلفة والمعالم المهمة، وذلك باستخدام بضعة أسطر من الرموز البرمجية.
أولاً، عليك تضمين Maps JavaScript API في الصفحة.
ويتم ذلك من خلال ربط النص البرمجي التالي في صفحة HTML، بما في ذلك
libraries=marker لتتمكّن من إضافة علامات متقدّمة إلى الخريطة.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
يشير عنوان URL إلى دالة JavaScript initMap التي يتم تشغيلها عند تحميل الصفحة. في عنوان URL، يمكنك أيضًا تحديد لغة الخريطة أو منطقتها للتأكّد من تنسيقها بالطريقة الصحيحة للبلد المحدّد الذي تستهدفه. يضمن ضبط المنطقة أيضًا أن يكون سلوك التطبيقات المستخدَمة خارج الولايات المتحدة منحازًا إلى المنطقة التي تضبطها. يمكنك الاطّلاع على
تفاصيل تغطية "منصة خرائط Google"
للحصول على قائمة كاملة باللغات والمناطق المتاحة، والتعرّف على مزيد من المعلومات حول
استخدام المَعلمة region.
بعد ذلك، تحتاج إلى عنصر div في HTML بارتفاع صريح لوضع خريطتك على الصفحة.
هذه هي الحاوية التي يتم عرض الخريطة فيها.
<div id="map" style="height: 500px; width: 100%;"></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 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
بالنسبة إلى أداة تحديد المواقع الجغرافية، يهمّك عادةً ضبط الموقع الجغرافي الأولي، ونقطة المركز أو الحدود، ومستوى التكبير (مقدار تكبير الخريطة في ذلك الموقع الجغرافي). ومعظم العناصر الأخرى، مثل ضبط عناصر التحكّم، اختيارية لأنّك تحدّد مستوى التفاعل مع الخريطة.
الحصول على أرقام تعريف الأماكن
| يستخدم هذا المثال: Places API (جديدة) | متوفّر أيضًا: JavaScript |
من المحتمل أن يكون لديك قاعدة بيانات لمواقعك الجغرافية تتضمّن معلومات أساسية، مثل اسم الموقع الجغرافي وعنوانه ورقم هاتفه. لجلب معلومات "منصة خرائط Google" عن هذا المكان، بما في ذلك الإحداثيات الجغرافية والمعلومات التي يساهم بها المستخدمون، ابحث عن رقم تعريف المكان الذي يتوافق مع كل موقع جغرافي في قاعدة بياناتك. يمكنك إجراء
طلب إلى
نقطة نهاية "البحث النصي (الجديد)" في Places API (الجديد)
وطلب حقل places.id فقط في قناع الحقل لتفعيل
رمز التخزين التعريفي "البحث النصي (الأساسي) - أرقام التعريف فقط".
في ما يلي مثال على طلب رقم تعريف المكان لمكتب Google في لندن:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'يمكنك تخزين رقم تعريف المكان هذا في قاعدة بياناتك واستخدامه كطريقة فعّالة لطلب معلومات عن المكان. في ما يلي تعليمات لاستخدام رقم تعريف المكان لإجراء الترميز الجغرافي واسترداد تفاصيل المكان وطلب الاتجاهات إلى المكان.
الترميز الجغرافي لمواقعك الجغرافية
| يستخدم هذا المثال: 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إضافة مواقع جغرافية إلى الخريطة
الخطوة التالية هي إضافة مواقعك الجغرافية إلى الخريطة. يتم ذلك عادةً من خلال إضافة علامات متقدّمة إلى الخريطة، ولكن هناك عدد من الخيارات الأخرى التي يمكنك استخدامها، مثل طبقات البيانات.
بعد الحصول على خط العرض وخط الطول لموقعك الجغرافي، إليك مثال على إضافة علامة متقدّمة مع رمز نصي مخصّص إلى الخريطة:
const pin = new google.maps.marker.PinElement({ glyphText: "A", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.146550 }, title: "Location Name", }); marker.append(pin);
باستخدام بعض العلامات، يمكنك الاطّلاع على الموقع الجغرافي لعدد من المواقع الجغرافية معًا.
إذا كان هناك عدد كبير من المواقع الجغرافية، يمكنك استخدام أداة تجميع محدّدات المواقع للغة JavaScript أو Android أو iOS. إليك مثال على أداة تجميع محدّدات المواقع في نموذج GitHub لمحدِّد مواقع المتاجر المستند إلى JavaScript.
تقديم تفاصيل المكان
| يستخدم هذا المثال: Maps JavaScript API | تتوفّر أيضًا: Places API (الإصدار الجديد) | Android | iOS |
يمكنك مشاركة تفاصيل المكان التي يحتاجها المستخدمون قبل زيارة أحد مواقعك الجغرافية. من خلال تفاصيل المكان الغنية، مثل معلومات الاتصال وساعات العمل والتقييمات والصور وحالة الإغلاق المؤقت، يعرف المستخدمون بالضبط ما يمكن توقّعه عند زيارة موقعك الجغرافي. بعد إجراء طلب إلى Places API (الجديدة)، يمكنك فلترة الردّ وعرضه في نافذة معلومات أو شريط جانبي على الويب أو بأي طريقة أخرى تريدها.
لطلب تفاصيل المكان، ستحتاج إلى رقم تعريف المكان لكل موقع جغرافي. اطّلِع على الحصول على أرقام تعريف الأماكن لاسترداد رقم تعريف مكان موقعك الجغرافي.
يمكنك توسيع القسم للاطّلاع على فيديوهات حول طلب تفاصيل المكان:
الاطّلاع على ساعات العمل
الاطّلاع على عمليات الإغلاق
التحكّم في التكاليف
يستخدم المثال التالي فئة Place في "مكتبة الأماكن" ضمن Maps JavaScript API لاسترداد تفاصيل المكان وإضافتها إلى InfoWindow. يستخدم هذا التنفيذ استراتيجية توفير التكلفة المتمثلة في تشغيل طلب تفاصيل المكان فقط عندما يطلب المستخدم التفاصيل عن طريق النقر على العلامة بدلاً من جلب التفاصيل بشكل استباقي لجميع المواقع بغض النظر عن اهتمام المستخدم.
const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.14655 }, }); const place = new google.maps.places.Place({ id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", }); const infowindow = new google.maps.InfoWindow(); marker.addEventListener("click", async () => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "rating", "websiteURI"], }); infowindow.setContent( "<div><strong>" + place.displayName + "</strong><br>" + place.formattedAddress + "<br>" + "Rating: " + place.rating + " stars<br>" + place.websiteURI + "</div>" ); infowindow.open({ map, anchor: marker, }); });
عرض المواقع الجغرافية من زاوية 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" على الأجهزة الجوّالة والويب. عندما يكتب المستخدم عنوانًا، تملأ ميزة الإكمال التلقائي الباقي من خلال استخدام التطبيقات المصغّرة. يمكنك أيضًا توفير وظيفة الإكمال التلقائي الخاصة بك باستخدام واجهة برمجة التطبيقات Place Autocomplete Data API مباشرةً.
لإضافة مكتبة "الإكمال التلقائي للمكان" إلى موقعك الإلكتروني، ما عليك سوى إضافة بعض معلمات طلب البحث إلى عنوان URL الخاص بالنص البرمجي لواجهة برمجة التطبيقات Maps JavaScript API. في المثال التالي، الإضافة هي libraries=places,marker.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
بعد ذلك، أضِف عنصر حاوية إلى صفحتك حيث سيتم إلحاق تطبيق PlaceAutocompleteElement المصغّر.
<div id="autocomplete-container"></div>
أخيرًا، عليك إعداد تطبيق PlaceAutocompleteElement المصغّر وإلحاقه
بالحاوية. يؤدي تقييد عبارات البحث المقترحة في ميزة "إكمال تلقائي للأماكن" باستخدام includedPrimaryTypes: ["geocode"] إلى ضبط التطبيق المصغّر لقبول عناوين الشوارع والأحياء والمدن والرموز البريدية حتى يتمكّن المستخدمون من إدخال أي مستوى من التحديد لوصف نقطة انطلاقهم. عندما يختار المستخدم توقّعًا، يتم تنشيط الحدث gmp-select ويمكنك استدعاء place.fetchFields() لطلب الحقل location الذي يحتوي على خط العرض وخط الطول لنقطة انطلاق المستخدم. ستستخدم إحداثيات الخريطة هذه لإعادة توسيط الخريطة والإشارة إلى علاقة
مواقعك الجغرافية بنقطة الأصل.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // zoom to the selected location and add an advanced marker. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["location", "formattedAddress"], }); addUserLocation(place); });
في هذا المثال، بعد أن يختار المستخدم العنوان، يتم تنفيذ الدالة addUserLocation(). يؤدي ذلك إلى أخذ الموقع الجغرافي للنتيجة المطابقة، ونقل الخريطة إلى ذلك الموقع الجغرافي، وإضافة علامة متقدّمة.
function addUserLocation(place) { const pin = new google.maps.marker.PinElement({ glyphText: "C", }); // Add an advanced marker to the map. const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: place.location, }); marker.append(pin); // Pan and zoom the map to the marker. map.panTo(place.location); map.setZoom(12); }
يمكنك بعد ذلك الاطّلاع على العلاقة بين المستخدم وأي مواقع جغرافية معيّنة، كما هو موضّح في الصورة التالية.
يمكنك توسيع هذا القسم للاطّلاع على فيديوهات توضيحية حول إضافة ميزة "الإكمال التلقائي" للأماكن إلى تطبيقك:
الموقع الإلكتروني
تطبيقات Android
تطبيقات iOS
عرض مدة الرحلة والمسافة إلى أقرب المواقع الجغرافية
| يستخدم هذا المثال: Routes API | تتوفّر أيضًا: مكتبة المسارات وMaps JavaScript API |
بعد الحصول على الموقع الجغرافي للمستخدم، يمكنك مقارنته بمواقعك الجغرافية. سيساعد تنفيذ ذلك باستخدام ميزة احتساب مصفوفة المسارات في Routes API (أو فئة RouteMatrix في مكتبة المسارات، Maps JavaScript API) المستخدمين في اختيار الموقع الجغرافي الأنسب لهم حسب وقت القيادة أو المسافة على الطريق.
يتطلب عرض المواقع الجغرافية القريبة من المستخدم أن تكون قد أضفت مواقعك الجغرافية مسبقًا. عند استخدام قاعدة بيانات المواقع الجغرافية الخاصة بك، يجب التأكّد من أنّ البيانات بتنسيق يمكن استخدامه في خريطة، مثل GeoJSON، الموضّح في موضوع طبقة البيانات.
الطريقة المعتادة لتنظيم قائمة المواقع الجغرافية هي ترتيبها حسب المسافة. غالبًا ما يتم احتساب هذه المسافة باستخدام الخط المستقيم من المستخدم إلى الموقع الجغرافي، ولكن قد يكون ذلك مضللاً. قد يمر الخط المستقيم فوق نهر لا يمكن عبوره أو عبر طرق مزدحمة في وقت قد يكون فيه موقع جغرافي آخر أكثر ملاءمة. وهذا مهم إذا كانت لديك مواقع جغرافية متعددة على بُعد بضعة كيلومترات من بعضها البعض.
تعمل طريقة computeRouteMatrix من خلال أخذ قائمة بالمواقع الجغرافية لنقاط الانطلاق والوجهات وعرض ليس فقط مسافة الرحلة ولكن أيضًا مدة الرحلة بينها. في حالة المستخدم، ستكون نقطة الانطلاق هي موقعه الجغرافي الحالي أو نقطة البداية المفضّلة لديه، وستكون الوجهات هي المواقع الجغرافية.
يمكن تحديد نقاط الانطلاق والوجهات كأزواج إحداثيات أو أرقام تعريف أماكن أو عناوين. يمكنك استخدام
computeRouteMatrix مع الإعدادات المفضّلة للتوجيه، مثل TRAFFIC_AWARE
لعرض النتائج استنادًا إلى أوقات القيادة الحالية أو المستقبلية.
يستدعي المثال التالي نقطة النهاية computeRouteMatrix في Routes API،
مع تحديد رقم تعريف مكان نقطة الانطلاق والوجهة للمستخدم. يحتسب هذا المثال المسافة ومدة الرحلة من مركز الخريطة إلى ثلاثة مكاتب لشركة Google في لندن:
curl -X POST -d '{
"origins": [
{
"waypoint": {
"location": {
"latLng": {
"latitude": 51.493490,
"longitude": -0.097288
}
}
}
}
],
"destinations": [
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
}
},
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
}
},
{
"waypoint": {
"placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
}
}
],
"travelMode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'تحتوي الاستجابة من الخدمة على المسافة (بالأمتار) والمدة لكل زوج من نقطة الانطلاق والوجهة، على غرار ما هو موضّح في المثال التالي:
انقر لتوسيع نموذج الردّ:
[
{
"originIndex": 0,
"destinationIndex": 0,
"status": {},
"distanceMeters": 4540,
"duration": "924s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 1,
"status": {},
"distanceMeters": 5043,
"duration": "1044s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 2,
"status": {},
"distanceMeters": 6919,
"duration": "1357s",
"condition": "ROUTE_EXISTS"
}
]تعرض الصورة التالية نقطة الانطلاق (العلامة الحمراء C) والوجهات على الخريطة:
غالبًا ما تختلف المسافة في خط مستقيم عن مسافة المسار، كما هو موضّح في الجدول التالي.
| الموقع الجغرافي | المسافة المستقيمة | الطريق في حركة المرور / الوقت |
|---|---|---|
| الموقع الجغرافي "أ" | 3.32 كيلومتر | 4.5 كيلومتر / 15 دقيقة |
| الموقع الجغرافي (ب) | 3.20 كلم | 5.0 كيلومتر / 17 دقيقة |
| الموقع الجغرافي "ج" | 4.84 كلم | 6.9 كم / 23 دقيقة |
على الرغم من أنّ الموقع الجغرافي "ب" هو الأقرب من حيث المسافة، فإنّ المسار والوقت اللازمَين للوصول إليه أطول لأنّ الموقع الجغرافي "أ" يمكن الوصول إليه عبر طريق سريع.
بمجرد تقديم هذا الطلب، يمكنك معالجة المطابقة لترتيب الردود حسب مدة القيادة. يمكنك العثور على أمثلة على هذه الدالة في الدرس التطبيقي حول الترميز الخاص بأداة تحديد الموقع.
تقديم اتجاهات التنقّل
| يستخدم هذا المثال: Routes Library, Maps JavaScript API | تتوفّر أيضًا: خدمة الويب Routes API للاستخدام على أجهزة Android وiOS، إما مباشرةً من التطبيق أو عن بُعد من خلال خادم وكيل |
إنّ عرض الاتجاهات للمستخدمين من داخل موقعك الإلكتروني أو تطبيقاتك يعني أنّهم لن يحتاجوا إلى مغادرة موقعك الإلكتروني، ما يعني أنّ المستخدمين لن يتشتتوا بصفحات أخرى أو يروا المنافسين على الخريطة. باستخدام Routes API، يمكنك أيضًا طلب مسارات صديقة للبيئة لتقدير استهلاك الوقود أو الطاقة وعرض التأثير البيئي للرحلة.
تتضمّن فئة Route في مكتبة المسارات ضمن Maps JavaScript API أيضًا طرقًا مثل createPolylines() وcreateWaypointAdvancedMarkers() تتيح لك معالجة النتائج وعرضها على الخريطة.
في ما يلي مثال على طلب مسار وعرضه على خريطة. لمزيد من المعلومات عن النموذج، يُرجى الاطّلاع على الحصول على مسار.
لمزيد من المعلومات حول ميزات "خرائط Google" هذه، يُرجى الاطّلاع على مستندات Maps JavaScript API أو إلقاء نظرة على الدرس التطبيقي حول الترميز خطوة بخطوة لإنشاء محدِّد مواقع جغرافية.
مساعدة المستخدمين في حجز المواعيد
عندما يعرض المستخدمون تفاصيل المكان لموقعك الجغرافي في لوحة جانبية، يمكنك أن توفّر لهم إمكانية حجز موعد بسهولة من خلال النقر على زر، كما هو موضّح في الشكل التالي.
هناك طرق متعدّدة لتفعيل هذه الميزة: (1) استخدام حلّ Quick Builder Locator Plus لتوفير هذه الوظيفة الجاهزة للاستخدام، و(2) استخدام ملفك التجاري. يصف هذا القسم هذه الخيارات بالتفصيل.
استخدام Quick Builder Locator Plus
يمكنك استخدام حلّ Quick Builder Locator Plus لاستيراد تفاصيل نشاطك التجاري بسرعة من ملفك التجاري. بعد استيراد المواقع الجغرافية إلى أداة Quick Builder، يمكنك تفعيل الروابط المضمّنة لحجز المواعيد، حيثما كانت متاحة، لمواقعك الجغرافية التجارية باستخدام الحجز عبر Google. حتى إذا لم يكن لديك ملف تجاري مرتبط بحساب Google، يمكنك استخدام Quick Builder لتضمين روابط الحجز للمؤسسات التي سبق لك تفعيلها من خلال مقدّمي خدمات الحجز التابعين لجهات خارجية عبر ميزة "الحجز عبر Google"*.
*لا تتوفّر ميزة "الحجز عبر Google" إلا في بلدان/مناطق معيّنة تتعامل فيها الأنشطة التجارية مع مقدّم خدمة حجز معتمَد. إذا كنت مهتمًا بميزة "الحجز عبر 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 Business Information API.
- أدرِج
metadataفيreadMaskلكي يتضمّن كل موقع جغرافي يتم عرضهmetadata.placeId، والذي يمكنك مقارنته برقم تعريف المكان المعروض في "منصة خرائط Google".
-
باستخدام معرّف الموقع الجغرافي، يمكنك الحصول على الرابط المطلوب لاتّخاذ إجراء. لاسترداد موعد حالي
placeActionLink، أدرِجplaceActionLinksالحالية للموقع الجغرافي، وفلتِرها حسبplaceActionTypeللعثور على رابط الموعد الذي تريد استخدامه (APPOINTMENTأوONLINE_APPOINTMENTأوDINING_RESERVATION).يوضّح المثال التالي موعدًا (APPOINTMENT)
placeActionLinkفي الردّ من طلب 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، راجِع منصة حجز المواعيد للحصول على مستندات حول تضمين تطبيق مصغّر للحجز في موقع إلكتروني أو تطبيق. يمكنك أيضًا استخدام Google Cloud، مثل Cloud Spanner لنظام إدارة المخزون (فيديو).
عرض العروض المحلية
في اللوحة الجانبية "تفاصيل المكان" لموقع جغرافي معيّن، يمكنك عرض عروض محلية ليتمكّن المستخدمون من النقر عليها. تتيح لك Google My Business API إنشاء واسترداد "المشاركات" (مثل العروض المحلية) المرتبطة بمواقعك الجغرافية. يعرض الشكل التالي مثالاً على عرض ترويجي محلي في اللوحة الجانبية "تفاصيل المكان".
(يعرض المخطّط البياني للبنية في قسم Quick Builder التكنولوجيات المتاحة لإضافة العروض إلى أداة تحديد المواقع الجغرافية).
بما أنّ العروض المحلية مرتبطة بالمواقع الجغرافية، عليك العثور على معرّف الموقع الجغرافي للملف التجاري المرتبط برقم تعريف المكان في "منصة خرائط Google" للموقع الجغرافي الذي يطّلع عليه المستخدمون.
عندما يكون لديك معرّف الموقع الجغرافي للملف التجاري، يمكنك استرداد العرض الترويجي ذي الصلة كـ localPost لعرضه في اللوحة الجانبية "تفاصيل المكان". إليك الخطوات التي يمكنك اتّباعها:
- باستخدام Google My Business API،
أنشئ أي منشورات عروض تريد
عرضها، من النوع
OFFER. -
ابحث عن الموقع الجغرافي للملف التجاري أو معرّف الموقع الجغرافي المرتبط برقم تعريف المكان على الخريطة.
عندما يطّلع المستخدمون على تفاصيل المكان، فإنّهم يطّلعون على تفاصيل رقم تعريف المكان في "منصة خرائط Google". يرتبط رقم تعريف المكان برقم تعريف الموقع الجغرافي للملف التجاري، لذا عليك العثور على رقم تعريف الموقع الجغرافي استنادًا إلى رقم تعريف المكان على الخريطة لاسترداد رابط العرض المحلي لموقعك الجغرافي وعرضه. أجرِ طلبات البيانات التالية من واجهات برمجة التطبيقات للملفات التجارية:
- أدرِج حسابات مشروعك.
- عرض قائمة بجميع المواقع الجغرافية ضمن حساب باستخدام Business Profile Business Information API
- أدرِج
metadataفيreadMaskلكي يتضمّن كل موقع جغرافيmetadata.placeId، والذي يمكنك مقارنته برقم تعريف المكان للموقع الجغرافي الذي يتم عرضه.
يطلب المثال التالي تفاصيل موقع جغرافي من الإصدار 1 من Business Profile Business Information API:
GET https://mybusinessbusinessinformation.googleapis.com/v1/locations/15899957830169237700?readMask=name,title,phoneNumbers,categories,regularHours,storefrontAddress,latlng,openInfo,metadata,profile
تحتوي الاستجابة على حقل
metadata.placeIdيتوافق مع رقم تعريف المكان الذي تستخدمه في طلبات "منصة خرائط Google".انقر على "توسيع" للاطّلاع على نموذج الردّ.
{ "name": "locations/15899957830169237700", "title": "Sushi Sushi", "phoneNumbers": { "primaryPhone": "+49 2222 22222" }, "categories": { "primaryCategory": { "name": "categories/gcid:restaurant", "displayName": "Restaurant" } }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": { "hours": 9, "minutes": 0 }, "closeDay": "MONDAY", "closeTime": { "hours": 9, "minutes": 10 } }, { "openDay": "TUESDAY", "openTime": { "hours": 11, "minutes": 30 }, "closeDay": "TUESDAY", "closeTime": { "hours": 24, "minutes": 0 } } ] }, "metadata": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "mapsUri": "https://maps.google.com/maps?cid=15899957830169237700" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "storefrontAddress": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } } -
بعد الحصول على معرّفَي الحساب ومعرّف الموقع، يمكنك استرداد العرض الذي تريده. على الرغم من أنّ إدارة المواقع الجغرافية تستخدم الإصدار 1 من Business Profile Business Information API، تظلّ المشاركات المحلية على نقطة نهاية
mybusiness.googleapis.com/v4accounts.locations.localPostsالقديمة لمشاريع واجهة برمجة التطبيقات للملفات التجارية التي تمت الموافقة عليها. يمكنك عرض قائمة بـlocalPostsالحالية للموقع الجغرافي والفلترة حسبtopicTypeمنOFFER.في ما يلي مثال على طلب لإدراج "المشاركات المحلية" النشطة لموقع جغرافي:
GET https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
يوضّح المثال التالي
OFFERlocalPostفي الردّ.انقر على "توسيع" للاطّلاع على نموذج الردّ.
{ "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.
تخصيص الخريطة
يمكنك تغيير مظهر الخريطة وتفاصيلها بعدة طرق. يمكنك مثلاً:
- يمكنك إنشاء محدّدات مواقع مخصّصة لاستبدال دبابيس الخريطة التلقائية.
- تغيير ألوان ميزات الخريطة لتعكس علامتك التجارية
- يمكنك التحكّم في المعالم التي تعرضها (المعالم السياحية والمطاعم وأماكن الإقامة وما إلى ذلك) وكثافتها، ما يتيح لك تركيز انتباه المستخدم على مواقعك الجغرافية مع إبراز المعالم التي تساعد المستخدمين في الوصول إلى أقرب موقع جغرافي.
إنشاء علامات مخصّصة على الخريطة
يمكنك تخصيص العلامات المتقدّمة من خلال تغيير لون الخلفية أو الحدود أو الرمز التلقائي للدبوس (على سبيل المثال، للإشارة إلى ما إذا كان الموقع الجغرافي مفتوحًا)، أو استبدال العلامة بصورة رسومية مخصّصة مثل شعار علامتك التجارية، أو إنشاء علامات HTML وCSS مخصّصة. يمكن أن توفّر نوافذ المعلومات معلومات إضافية للمستخدمين، مثل ساعات العمل أو رقم الهاتف أو الصور.
في ما يلي نموذج خريطة تستخدم علامات رسومية مخصّصة. (يمكنك الاطّلاع على الرمز المصدر في موضوع العلامات الرسومية المخصّصة في Maps JavaScript API).
للحصول على معلومات تفصيلية، يُرجى الاطّلاع على مستندات العلامات المتقدّمة لكلّ من JavaScript (الويب) وAndroid وiOS.
تخصيص مظهر الخريطة
تتيح لك "منصة خرائط Google" تصميم خريطتك بطرق تساعد المستخدمين في العثور على أقرب موقع جغرافي والوصول إليه في أسرع وقت ممكن، كما تساعدك في تعزيز علامتك التجارية. على سبيل المثال، يمكنك تغيير ألوان الخريطة لتتطابق مع علامتك التجارية، ويمكنك تقليل عناصر التشتيت على الخريطة من خلال التحكّم في المعالم التي تظهر للمستخدمين. توفّر "منصة خرائط Google" أيضًا عددًا من نماذج الخرائط المخصّصة للمبتدئين، وقد تم تحسين بعضها ليناسب مجالات مختلفة، مثل السفر والخدمات اللوجستية والعقارات والبيع بالتجزئة.
يمكنك إنشاء أنماط الخريطة أو تعديلها في صفحة أنماط الخريطة في مشروعك ضمن Google Cloud Console.
يمكنك توسيع القسم للاطّلاع على صور متحركة لإنشاء نمط الخريطة وتنسيقه في Cloud Console:
أنماط الخرائط حسب المجال
تعرض هذه الصورة المتحركة أنماط خرائط محدّدة مسبقًا خاصة بمجال معيّن يمكنك استخدامها. وتوفّر هذه الأنماط نقطة بداية مثالية لكل نوع من أنواع المجالات. على سبيل المثال، يقلّل نمط خريطة البيع بالتجزئة من نقاط الاهتمام على الخريطة، ما يتيح للمستخدمين التركيز على مواقعك الجغرافية، بالإضافة إلى المعالم لمساعدتهم في الوصول إلى أقرب موقع جغرافي بأسرع وقت ممكن وبثقة تامة.
التحكّم في نقاط الاهتمام
تضبط هذه الصورة المتحركة لون العلامة لنقاط الاهتمام وتزيد كثافة نقاط الاهتمام في نمط الخريطة. وكلما زادت الكثافة، زاد عدد علامات نقاط الاهتمام التي تظهر على الخريطة.
ولكل نمط خريطة معرّف خاص به. بعد نشر نمط في وحدة تحكّم Cloud، يمكنك الإشارة إلى معرّف الخريطة هذا في الرمز البرمجي، ما يعني أنّه يمكنك تعديل نمط الخريطة في الوقت الفعلي بدون إعادة تصميم تطبيقك. سيظهر المظهر الجديد تلقائيًا في التطبيق الحالي وسيتم استخدامه على جميع المنصات. توضّح الأمثلة التالية كيفية إضافة معرّف خريطة إلى صفحة ويب باستخدام Maps JavaScript API.
من خلال تضمين سمة map_ids واحدة أو أكثر في عنوان URL الخاص بالنص البرمجي، تتيح Maps JavaScript API هذه الأنماط تلقائيًا لعرض الخريطة بشكل أسرع عند طلب هذه الأنماط في الرمز البرمجي.
<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>
يعرض الرمز التالي خريطة ذات تصميم خاص على صفحة الويب. (لا يظهر عنصر HTML <div id="map"></div> حيث ستظهر الخريطة على الصفحة).
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، تساعد لوحة بيانات الإحصاءات في تحليل البيانات واستخلاص الإحصاءات المنشأة تلقائيًا استنادًا إلى بيانات مجهولة الهوية.
للوصول إلى هذا التقرير، انتقِل إلى قسم تقارير التفاعل في Cloud Console. لمزيد من التفاصيل حول هذا التقرير، يُرجى الاطّلاع على تقارير التفاعل.
بما أنّ "إحصاءات Google" تقدّم العديد من الميزات، لن نقدّم معلومات شاملة عن الإعداد والاستخدام. بدلاً من ذلك، سنوجّهك إلى المستندات الرئيسية لمزيد من القراءة والتعليمات مع تسليط الضوء على اعتبارات الإحصاءات الرئيسية لتطبيق تحديد المواقع الجغرافية.
إعداد برنامج Google Analytics
إذا كنت تستخدم "إحصاءات Google" مع تطبيقك، يمكنك تخطّي هذا القسم.
في ما يلي مثال على "علامة تتبُّع من 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 Tag Manager أو تضيف "إحصاءات Google" مباشرةً إلى موقعك الإلكتروني، من المهم فهم كيفية استخدام عملية تنفيذ "إحصاءات Google" لإجراء ما يلي:
- بدء تفاعلات المستخدمين، مثل النقرات، التي يمكن قياسها بشكل مستقل عن مشاهدات صفحات الويب (الأحداث)
- عرض البيانات الأولية (المقاييس) في مجموعات مفيدة (السمات أو السمات المخصّصة)
استخدام الأحداث المخصّصة
في ما يلي مثال على تحديد حدث مخصّص في أداة تحديد المواقع:
gtag('event', 'location', { 'method': 'address' });
من المهم تسمية event وmethod بوضوح كافٍ
لتتمكّن من فهم الأحداث في التقارير. ويمكنك تفعيلها للتفاعلات المحدّدة التي تريد قياسها، مثلاً عندما يختار المستخدم عنوانًا من القائمة المنسدلة للإكمال التلقائي، كما هو موضّح في الشكل التالي.
يمكنك إرسال طلب التتبّع التالي إلى "إحصاءات 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" في عرض "فحص" في المتصفّح، ضمن علامة التبويب "الشبكة". (انقر لتكبير الصورة).
يمكنك التأكّد من تسجيل علامات الأحداث المخصّصة بشكلٍ سليم من خلال الاطّلاع على عرض "الوقت الفعلي" في "إحصاءات Google". على سبيل المثال، يظهر حدث "الموقع الجغرافي" الذي تم إعداده سابقًا لميزة "الإكمال التلقائي للأماكن" في "إحصاءات Google" كما هو موضّح في الشكلَين التاليَين.
بدلاً من ذلك، يمكنك مراقبة الأحداث في الوقت الفعلي باستخدام DebugView، كما هو موضّح في الشكل التالي. يُرجى العِلم أنّه عليك الانتظار لمدة 24 ساعة قبل الوصول إلى تقرير "الأحداث" الكامل في قسم التفاعل > الأحداث ضمن "إحصاءات Google".
يمكنك أيضًا تطوير وقياس الاستراتيجيات لزيادة عدد الزيارات إلى المتجر إلى مواقعك الجغرافية من تطبيق تحديد المواقع. على سبيل المثال، تتضمّن "إحصاءات Google" عرض زيارات المتجر في "إحصاءات Google" الذي يربط إحصاءات زيارات المتجر (التي تقيسها "إعلانات Google") بإحصاءات تطبيق تحديد المواقع. يمكنك أيضًا تطوير استراتيجياتك الخاصة للانتقال من التطبيق إلى الموقع الجغرافي، مثل العروض على الإنترنت التي يمكن الاستفادة منها في مواقعك الجغرافية.
مقاييس "الملف التجاري"
بالإضافة إلى تتبُّع الأحداث والمقاييس والسمات باستخدام "إحصاءات Google"، يمكنك الاستعلام عن مقاييس التفاعل مع الموقع الجغرافي من Business Profile Performance API.
تتيح لك قيم DailyMetric المتاحة تتبُّع مرات الظهور على "بحث Google" و"خرائط Google"، وطلبات الاتجاهات، والنقرات على الموقع الإلكتروني وزر الاتصال، والحجوزات التي تم إجراؤها من خلال ميزة "الحجز عبر Google".
يستدعي نموذج الطلب التالي
locations.fetchMultiDailyMetricsTimeSeries لاسترداد مرّات الظهور اليومية وطلبات الاتجاهات
والنقرات التي تؤدي إلى الموقع الإلكتروني والحجوزات لموقع جغرافي:
انقر لتوسيع القسم والاطّلاع على نموذج الطلب.
GET https://businessprofileperformance.googleapis.com/v1/locations/15899957830169237700:fetchMultiDailyMetricsTimeSeries?dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_SEARCH&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_SEARCH&dailyMetrics=BUSINESS_DIRECTION_REQUESTS&dailyMetrics=WEBSITE_CLICKS&dailyMetrics=BUSINESS_BOOKINGS&dailyRange.start_date.year=2025&dailyRange.start_date.month=1&dailyRange.start_date.day=1&dailyRange.end_date.year=2025&dailyRange.end_date.month=1&dailyRange.end_date.day=31
انقر على "توسيع" للاطّلاع على نموذج الردّ.
{
"multiDailyMetricTimeSeries": [
{
"dailyMetricTimeSeries": [
{
"dailyMetric": "BUSINESS_IMPRESSIONS_DESKTOP_MAPS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "48"
}
]
}
},
{
"dailyMetric": "BUSINESS_IMPRESSIONS_MOBILE_MAPS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "112"
}
]
}
},
{
"dailyMetric": "BUSINESS_DIRECTION_REQUESTS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "14"
}
]
}
},
{
"dailyMetric": "WEBSITE_CLICKS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "29"
}
]
}
},
{
"dailyMetric": "BUSINESS_BOOKINGS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "6"
}
]
}
}
]
}
]
}
يعرض كل إدخال dailyMetricTimeSeries عددًا يوميًا على مدار النطاق الزمني المطلوب، بما في ذلك:
- مرات الظهور على أجهزة الكمبيوتر والأجهزة الجوّالة في "خرائط Google" و"بحث Google"
- طلبات الاتجاهات إلى الموقع الجغرافي للنشاط التجاري (
BUSINESS_DIRECTION_REQUESTS) - النقرات التي تؤدي إلى الموقع الإلكتروني للنشاط التجاري (
WEBSITE_CLICKS) والحجوزات من خلال ميزة "الحجز عبر Google" (BUSINESS_BOOKINGS)
هناك خيار آخر للمقاييس يتضمّن استخدام الحجز عبر 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.
تحديد الموقع الجغرافي للمستخدم باستخدام Geolocation
في معظم الحالات، يمكنك تحديد الموقع الجغرافي للمستخدم بدقة باستخدام الخدمات المستندة إلى الموقع الجغرافي المضمّنة في أجهزته أو متصفّحاته. نقدّم مثالاً على استخدام ميزة "الموقع الجغرافي" في HTML5 في المتصفّح لعرض الموقع الجغرافي لمستخدم أو جهاز على خريطة Google، وهناك مستندات حول طلب الأذونات والحصول على الموقع الجغرافي في Android و iOS. ومع ذلك، قد تكون هناك حالات تحتاج فيها إلى أداة بديلة للعثور على الموقع الجغرافي، على سبيل المثال، إذا تم إيقاف الخدمات المستندة إلى الموقع الجغرافي على الجهاز أو إذا كانت لديك مخاوف بشأن انتحال الموقع الجغرافي للجهاز.
واجهة برمجة التطبيقات Geolocation API هي واجهة برمجة تطبيقات من جهة الخادم تعرض الموقع الجغرافي ونصف قطر الدقة استنادًا إلى معلومات حول أبراج الاتصالات وعُقد Wi-Fi التي يمكن للعميل رصدها. يمكنك استخدام ميزة "تحديد الموقع الجغرافي" كآلية احتياطية لتحديد الموقع الجغرافي للمستخدم، أو يمكنك استخدامها للتحقّق من الموقع الجغرافي الذي يبلّغ عنه الجهاز.
دمج بيانات الموقع الجغرافي المخصّصة مع تفاصيل المكان
في قسم تقديم تفاصيل المكان السابق، تناولنا استخدام تفاصيل المكان لمنح المستخدمين مستوى غنيًا من المعلومات حول مواقعك الجغرافية، مثل ساعات العمل والصور والمراجعات.
من المفيد فهم الأسعار ومستويات رموز التخزين التعريفية لحقول البيانات المختلفة في Places API (الإصدار الجديد). لإدارة تكاليفك، تتمثل إحدى الاستراتيجيات في الجمع بين المعلومات المتوفّرة لديك عن مواقعك الجغرافية والمعلومات الجديدة من "خرائط Google"، مثل الإغلاق المؤقت وساعات العمل في العطلات وتقييمات المستخدمين والصور والمراجعات. إذا كانت لديك معلومات الاتصال الخاصة بمواقعك الجغرافية، لن تحتاج إلى طلب هذه الحقول من "تفاصيل المكان" ويمكنك حصر قناع الحقل في جلب الحقول التي تريد عرضها فقط.
قد تكون لديك بيانات أماكن خاصة بك لتكملة "تفاصيل المكان" أو استخدامها بدلاً منها. يقدّم الدرس التطبيقي حول الترميز لمحدّد المواقع الجغرافية الكامل مثالاً على استخدام GeoJSON مع قاعدة بيانات لتخزين تفاصيل موقعك الجغرافي واستردادها.