نظرة عامة
تتوفّر "منصة خرائط Google" للويب (JS وTS) وAndroid وiOS. وتوفر أيضًا واجهات برمجة تطبيقات لخدمات الويب للحصول على معلومات عن الأماكن والاتجاهات والمسافات. النماذج الواردة في هذا الدليل مكتوبة لمنصة واحدة، ولكن يتم توفير روابط المستندات للتنفيذ على المنصات الأخرى.
أداة إنشاء سريعة في Google Cloud Console لإنشاء محدِّد مواقع بسرعة، بما في ذلك استيراد بيانات الملفات التجارية وتضمين روابط حجز المواعيد تلقائيًا من ومقدمي خدمات من جهات خارجية. تتيح لك واجهة المستخدم التفاعلية إنشاء التعليمات البرمجية ونشرها السحابة في غضون دقائق.
يريد المستخدمون البحث عن المنتجات والخدمات عبر الإنترنت والعثور على أفضل وأكثر مكان ملائم للزيارة أو تحديد موعد أو استلام طلب. إنهم يريدون الوصول إلى موقعك في أسرع وقت ممكن، وتريد منح تجارب ثرية على الإنترنت تزيد من عدد الزيارات إلى مواقعك الجغرافية وتقوية رضا المستخدم وتقليل مكالمات الدعم. تريد أيضًا قياس مدى نجاح محدِّد المواقع في تحديد ما إذا كان بإمكان عملائك العثور على موقعك، وتريد أن تفهم أين يجب إجراء التحسينات.
Locator Plus: إرشادات ونصائح حول التخصيص نقدّمها في هذه الدورة هذا الموضوع — هو ما نوصي به كمجموعة مثالية من منصة خرائط Google واجهات برمجة تطبيقات لإنشاء تجارب رائعة لمستخدمي محدِّد المواقع. باتباع هذه الممارسات، يمكنك يمكن أن يساعد المستخدمين في العثور على مواقعك على الخريطة، ورؤية المعلومات التفصيلية التي يحتاجون إليها القرارات، وإعطائهم الاتجاهات، سواء كانوا يقودون أو ركوب الدراجات أو المشي أو ركوب وسائل النقل العام.
بالنسبة إلى مستخدمي Locator Plus، تساعدك لوحة بيانات الإحصاءات على تحليل الإحصاءات وإنشاء الإحصاءات من البيانات، مما يمنحك صورة واضحة عن مدى تفاعل المتسوقين مع محدد موقع المتجر. للوصول إلى هذا التقرير، انتقِل إلى قسم قسم تقارير التفاعل وحدة التحكم. للحصول على مزيد من التفاصيل عن هذا التقرير، يُرجى الاطّلاع على تقارير التفاعل:
يوضح المخطّط التالي واجهات برمجة التطبيقات الأساسية المُستخدَمة في تنفيذ Locator Plus. يعرض الرسم البياني أيضًا قاعدة بيانات تضم بيانات موقعك الجغرافي يمكنك دمجها مع تفاصيل المكان لمنح المستخدمين أفضل مجموعة كاملة من المعلومات الممكنة. (انقر للتكبير.)
![على الجانب الأيسر من المخطط، يعرض متصفح ويب خريطة بها النافذة المنبثقة "تفاصيل المكان".
على يسار المخطّط البياني، تظهر قائمة بواجهات برمجة التطبيقات التي توفّر وظائف مختلفة:
واجهة برمجة تطبيقات JavaScript للخرائط لتصوير الموقع الجغرافي ومحتواه، وتصميم الخريطة، والخريطة
العلامات وعرض التجوّل الافتراضي المخصص وعرض المسارات. وضع الإكمال التلقائي لـ
إكمال معالجة العنوان ووظيفة الكتابة المسبقة. أماكن وواجهات برمجة تطبيقات Geocoding لـ
الموقع الجغرافي للعنوان. واجهة برمجة التطبيقات لمصفوفة المسافة لترتيب المواقع حسب المسافة والوقت
وضع السفر. واجهة برمجة التطبيقات Directions API لعرض مسار استنادًا إلى مدة السفر ووضع السفر.
منتصف المخطّط البياني، رمز تخزين بيانات يمثّل نقاط بيانات الموقع الجغرافي المخصّصة
رمز خادم الويب مع سهم مزدوج الرأس يشير إلى قراءة البيانات وكتابتها
بين خادم الويب ومخزن البيانات. أسهم بين متصفّح الويب
وتمر واجهات برمجة التطبيقات عبر خادم الويب كوسيط.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/locator_arch_diagram.png?authuser=8&hl=ar)
تمكين واجهات برمجة التطبيقات
لتنفيذ هذه الممارسات، يجب تفعيل واجهات برمجة التطبيقات التالية في وحدة التحكّم في Google Cloud:- واجهة برمجة تطبيقات 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) استخدام عملية تنفيذ الخرائط الديناميكية لديك. يصف هذا القسم هذه الخيارات بالتفصيل.
استخدام أداة Quick Builder Locator Plus
يمكنك استخدام صفحة حلّ Quick Builder Locator Plus لاستيراد تفاصيل النشاط التجاري من ملفك التجاري الآن، أدى التغيير في أعمال ستظهر تفاصيل ملفك التجاري في أداة البحث عن المتاجر على موقعك الإلكتروني. وقد تشمل هذه التغييرات ساعات العمل ومعلومات الاتصال والصور وخيارات الخدمة والمزيد. تتيح لك الأداة Quick Builder استكشاف خطوات إعداد مواقع الأنشطة التجارية على الخريطة بسرعة، إنشاء رمز قابل للنشر أو نشره مباشرةً على Google Cloud Storage في غضون دقائق.
![دمج "الملف التجاري"](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_gbp_integration.gif?authuser=8&hl=ar)
![النشر على السحابة الإلكترونية](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_deploy_to_cloud.gif?authuser=8&hl=ar)
استخدام عملية تنفيذ الخرائط الديناميكية الخاصة بك
يستخدم هذا المثال ما يلي: واجهة برمجة تطبيقات JavaScript للخرائط | متوفّر أيضًا: 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 | متوفّر أيضًا: 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-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/maps.png?authuser=8&hl=ar)
في حال وجود عدد كبير من المواقع، يمكنك استخدام التجميع العنقودي للعلامة فائدة لـ JavaScript Android iOS في ما يلي مثال على تجميع العلامات في نموذج GitHub لتحديد الموقع الجغرافي لمتجر JavaScript.
تقديم تفاصيل المكان
يستخدم هذا المثال: Maps JavaScript API. | متوفّر أيضًا: واجهة برمجة التطبيقات | Android | iOS |
يمكنك مشاركة تفاصيل المكان التي يحتاج المستخدمون إلى معرفتها قبل زيارة أحد مواقعك الجغرافية. مع تفاصيل غنية عن الأماكن مثل معلومات الاتصال وساعات العمل وتقييمات المستخدمين وصور المستخدمين حالة الإغلاق، سيعرف المستخدمون بالضبط ما يمكن توقّعه عند زيارة موقعك الجغرافي. بعد إجراء اتصال بواجهة برمجة تطبيقات الأماكن، يمكنك تصفية عرض الرد في نافذة معلومات أو شريط جانبي للويب أو بأي طريقة أخرى تريدها
لطلب تفاصيل المكان، ستحتاج إلى رقم تعريف كل موقع من مواقعك الجغرافية. راجع الحصول على أرقام تعريف الأماكن لاسترداد رقم تعريف المكان الموقع.
التوسيع لعرض فيديوهات لطلب تفاصيل المكان:
الحصول على ساعات العمل
التحقّق من حالات الإغلاق
التحكم في التكاليف
يستخدم المثال التالي مكتبة الأماكن وواجهة برمجة تطبيقات 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-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/autocomplete.png?authuser=8&hl=ar)
وسِّع هذا القسم لمشاهدة فيديوهات تفصيلية حول إضافة مكان الإكمال التلقائي في تطبيقك:
الموقع الإلكتروني
تطبيقات Android
تطبيقات iOS
عرض وقت السفر والمسافة إلى أقرب المواقع الجغرافية
يستخدم هذا المثال ما يلي: واجهة برمجة التطبيقات لمصفوفة المسافة | متوفّر أيضًا: خدمة مصفوفة المسافة وMaps JavaScript API |
بعد تحديد الموقع الجغرافي للمستخدم، يمكنك مقارنة هذا الموقع الجغرافي بالمواقع الجغرافية. وعند إجراء ذلك باستخدام خدمة مصفوفة المسافة، تساعدك واجهة برمجة تطبيقات 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-dot-devsite-v2-prod.appspot.com/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 للخرائط | متوفّر أيضًا: واجهة برمجة التطبيقات للاتجاهات خدمة ويب للاستخدام على Android وiOS، إما مباشرةً من التطبيق أو عن بُعد من خلال خادم وكيل |
فعرض الاتجاهات من داخل موقعك الإلكتروني أو تطبيقاتك على المستخدمين يعني عدم التمكّن من ذلك. المستخدمين إلى الانتقال بعيدًا عن موقعك، مما يعني أن المستخدمين لن يشتت انتباههم الصفحات أو مشاهدة المنافسين على الخريطة. يمكنك أيضًا إظهار انبعاثات الكربون وسيلة نقل محددة وإظهار تأثير أي رحلة معينة.
تقوم خدمة الاتجاهات أيضًا بوظائف تتيح لك معالجة النتائج وعرضها بسهولة على الخريطة.
فيما يلي مثال على عرض لوحة الاتجاهات. لمزيد من المعلومات حول عيّنة، راجع عرض الاتجاهات النصية
لمعرفة المزيد عن هذه الميزات في "خرائط Google"، يمكنك الاطّلاع على مستندات JavaScript API في "خرائط Google" أو إلقاء نظرة على الخطوات الدروس التطبيقية حول الترميز لإنشاء محدِّد مواقع جغرافية
مساعدة المستخدمين في حجز المواعيد
عندما يعرض المستخدمون تفاصيل المكان الخاصة بموقعك الجغرافي في لوحة جانبية، يمكنك عرض سهولة حجز موعد بنقرة زر، كما هو موضح في الشكل التالي.
![](https://developers-dot-devsite-v2-prod.appspot.com/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-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_reserve_with_google.gif?authuser=8&hl=ar)
*تتوفّر ميزة "الحجز عبر 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 API:
- أدرج حسابات مشروعك.
- إدراج جميع المواقع الجغرافية داخل حساب.
- في مواقع الحسابات، سيتم
LocationKey
يحتوي على معرّف المكان في Google Maps Platform، والذي يمكنك مقارنته رقم تعريف المكان للموقع الجغرافي الذي يتم عرضه.
-
باستخدام معرّف الموقع الجغرافي، يمكنك الحصول على رابط الإجراء الذي تريده. لاسترداد ملف الموعد
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 إنشاء "المشاركات" واستردادها (مثل العروض المحلية) المرتبطة بمواقعك الجغرافية يوضّح الشكل التالي مثالاً على عرض محلي في المكان في اللوحة الجانبية لتفاصيل المكان
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/store-locator-offers.png?authuser=8&hl=ar)
(المخطّط الهندسي في القسم السابق تعرض التكنولوجيات المتاحة لإضافة عروض إلى أداة تحديد المواقع).
بما أنّ العروض المحلية مرتبطة بمواقع جغرافية، عليك العثور على "الملف التجاري".
رقم تعريف الموقع الجغرافي المرتبط برقم تعريف المكان في "منصة خرائط 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
.
تخصيص خريطتك
يمكنك تغيير مظهر الخريطة وتفاصيلها بعدة طرق. يمكنك مثلاً:
- يمكنك إنشاء محدّدات موقع مخصّصة لاستبدال دبابيس الخريطة التلقائية.
- يمكنك تغيير ألوان ميزات الخريطة لتعكس علامتك التجارية.
- التحكم في نقاط الاهتمام التي تعرضها (معالم الجذب، والطعام، وأماكن الإقامة، وما إلى ذلك) وبأي كثافة، مما يتيح لك تركيز انتباه المستخدم على مواقعك مع إبراز المعالم التي تساعد المستخدمين في الوصول إلى أقرب موقع.
إنشاء محددات خرائط مخصصة
يمكنك تخصيص علاماتك عن طريق تغيير اللون الافتراضي (مع احتمال إظهار ما إذا أحد المواقع مفتوحة حاليًا) أو استبدال العلامة بصورة مخصصة، مثل شعار علامتك التجارية. يمكن أن توفّر نوافذ المعلومات أو النوافذ المنبثقة معلومات إضافية للمستخدمين، مثل ساعات العمل أو رقم الهاتف أو حتى الصور. يمكنك أيضًا إنشاء علامات مخصصة تكون نقطية ومتجهة وقابلة للسحب وحتى مؤثرة متحركة.
فيما يلي نموذج خريطة يستخدم محددات مخصصة. (اطّلِع على رمز المصدر في موضوع العلامات المخصّصة لواجهة برمجة تطبيقات JavaScript للخرائط).
للحصول على معلومات تفصيلية، اطّلِع على وثائق العلامات لـ JavaScript (الويب) Android iOS
تصميم خريطتك
تتيح لك "منصة خرائط Google" تصميم خريطتك بطرق تساعد المستخدمين في العثور أقرب موقع جغرافي، والوصول إليه في أسرع وقت ممكن، ومساعدتك على تعزيز علامتك التجارية. على سبيل المثال، يمكنك تغيير ألوان الخريطة لتتناسب مع علامتك التجارية، كما يمكنك تقليل عوامل التشتيت على الخريطة عن طريق التحكم في النقاط المهمة المرئية للمستخدمين. توفّر "منصة خرائط Google" أيضًا رقمًا من نماذج أولية الخرائط، والتي تم تحسين بعضها لمختلف الصناعات، مثل السفر واللوجستيات والعقارات والبيع بالتجزئة.
يمكنك إنشاء أنماط خريطة أو تعديلها في Google Cloud Console. صفحة أنماط الخريطة في مشروعك.
وسِّع لعرض الصور المتحركة لإنشاء نمط الخريطة وتصميمه في Cloud Console:
أنماط الخرائط على مستوى المجال
تعرض هذه الصورة المتحركة أنماط الخرائط المحددة مسبقًا والخاصة بالمجال والتي يمكنك استخدامها. هذه وأنماطه نقطة انطلاق مثالية لكل نوع من الصناعة. على سبيل المثال، يقلل نمط خريطة البيع بالتجزئة من نقاط الاهتمام على الخريطة، مما يتيح للمستخدمين التركيز على والمواقع، بالإضافة إلى المعالم لمساعدتهم في الوصول إلى أقرب موقع في أسرع وقت ممكن وبثقة قدر الإمكان.
![في صفحة "نمط الخريطة"، ينقر الماوس على "إنشاء نمط خريطة جديد". في صفحة
صفحة نمط خريطة جديدة، ينقر الماوس على زر الاختيار بجوار كل
الأنماط التالية المحسَّنة في المجال: السفر، والخدمات اللوجستية، والعقارات
البيع بالتجزئة: وعندما يتم النقر فوق كل زر، يظهر وصف نمط الخريطة
ومعاينة التغييرات.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/ioms_animation.gif?authuser=8&hl=ar)
التحكم في نقاط الاهتمام
تضبط هذه الصورة المتحركة لون العلامة لنقاط الاهتمام وتزيد من كثافة نقاط الاهتمام على نمط الخريطة. كلما زادت الكثافة، زادت تظهر علامات نقاط الاهتمام على الخريطة.
![في صفحة "نمط الخريطة"، ينقر الماوس على "إنشاء نمط خريطة جديد". في صفحة
صفحة "نمط خريطة جديدة"، ضمن "إنشاء نمطك الخاص"، زرّ اختيار "خرائط Google"
. ينقر الماوس على زر الاختيار Versa 3 لأسلوب Versa 3،
ثم النقر على "فتح" في "محرر الأنماط". في محرر الأنماط، يؤدي النقر على الماوس
ميزة نقاط الاهتمام، ثم ينقر على العنصر "رمز"، مما يؤدي إلى تعيين
اللون إلى الأحمر. يحدد الماوس بعد ذلك مربع اختيار "كثافة نقطة الاهتمام" والشرائح
عنصر التحكم في الكثافة إلى اليمين للحصول على أقصى كثافة. المزيد والمزيد من الأحمر
تظهر العلامات على معاينة الخريطة عند زيادة الكثافة. بعد ذلك يتحرك الماوس
إلى الزر "حفظ".](https://developers-dot-devsite-v2-prod.appspot.com/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>
يعرض الكود التالي خريطة ذات نمط على صفحة الويب. (النص غير المعروض هو ملف HTML
العنصر <div id="map"></div>
الذي ستظهر فيه الخريطة على
page.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
معرفة المزيد حول دمج تصميم الخرائط المستند إلى السحابة الإلكترونية في JavaScript (على الويب) Android، أو iOS
الحصول على إحصاءات الاستخدام من خلال التحليلات
باستخدام التحليلات، يمكنك الحصول على رؤى قيّمة حول كيفية تفاعل المستخدمين مع محدد الموقع. يقدم هذا القسم إرشادات حول تهيئة ومراقبة Google Analytics إحصاءات "الملف التجاري" لتتبُّع البيانات التي تهمّك لأداة الإنشاء السريع مستخدمي Locator Plus، تساعدك لوحة بيانات الإحصاءات في تحليل الإحصاءات وإنشاء الإحصاءات، ما يمنحك صورة عن مدى تفاعل زوار موقعك الإلكتروني مع محدِّد مواقع المتاجر، استنادًا إلى بيانات مخفية الهوية.
![إحصاءات Locator Plus](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_analytics.png?authuser=8&hl=ar)
للوصول إلى هذا التقرير، انتقِل إلى قسم قسم تقارير التفاعل في Cloud Console للحصول على مزيد من التفاصيل عن هذا التقرير، يُرجى الاطّلاع على تقارير التفاعل
نظرًا إلى قوة ومرونة Google Analytics، لن نحاول تقديم معلومات شاملة عن الإعداد والاستخدام. بدلاً من ذلك، سنوجهك إلى الوثائق الرئيسية المزيد من القراءة والإرشادات مع إبراز اعتبارات التحليلات الرئيسية تطبيق تحديد المواقع.
إعداد برنامج Google Analytics
إذا كنت تستخدم "إحصاءات Google" مع تطبيقك، يمكنك تخطي هذا القسم.
في ما يلي مثال على "علامة عامة" تلصقها في موقعك الإلكتروني لتفعيل Google "إحصاءات YouTube"
<!-- 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" لتنفيذ ما يلي:
- تؤدي إلى تفاعلات المستخدمين، مثل النقرات، التي يمكن قياسها بشكل مستقل عن الموقع الإلكتروني مشاهدات الصفحات على الويب (الأحداث).
- عرض البيانات الأولية (المقاييس) في مجموعات مفيدة (السمات) أو السمات المخصّصة).
استخدام الأحداث المخصّصة
في ما يلي مثال على تحديد حدث مخصّص في أداة البحث عن المواقع:
gtag('event', 'location', { 'method': 'address' });
من المهم تسمية event
وmethod
بوضوح كافٍ
على فهم الأحداث في التقارير ادفعها للخيار المحدد
للتفاعلات التي ترغب في قياسها، مثل عندما يختار المستخدم ويتعامل مع
القائمة المنسدلة الخاصة بالإكمال التلقائي والموضحة في الشكل التالي.
![](https://developers-dot-devsite-v2-prod.appspot.com/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-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_inspect.png?authuser=8&hl=ar)
يمكنك التحقق من أنّه يتم التقاط علامات الأحداث المخصّصة بشكلٍ سليم من خلال عرض في الوقت الفعلي في "إحصاءات Google" على سبيل المثال، يمثّل "الموقع" حدث تم إعداده سابقًا تظهر ميزة الإكمال التلقائي للأماكن في Google Analytics كما هو موضح في الأشكال التالية.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_realtime.png?authuser=8&hl=ar)
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_realtime2.png?authuser=8&hl=ar)
بدلاً من ذلك، يمكنك مراقبة الأحداث في الوقت الفعلي باستخدام DebugView، كما هو موضَّح في الشكل التالي. تجدر الإشارة إلى أنّه عليك الانتظار لمدة 24 ساعة قبل الوصول إلى تقرير كامل عن "الأحداث" في التفاعل > الأحداث في "إحصاءات Google".
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_debug.png?authuser=8&hl=ar)
يمكنك أيضًا تطوير استراتيجيات وقياسها لزيادة عدد الزيارات إلى متجرك المواقع الجغرافية من تطبيق محدِّد المواقع الجغرافية. على سبيل المثال، تمتلك "إحصاءات Google" زيارات المتجر في "إحصاءات Google" التي توفّر روابط تنقل إلى زيارات المتجر analytics (التي تقيسها "إعلانات Google") بإحصاءات محدِّد المواقع. يمكنك أيضًا تطوير استراتيجيات الربط بين التطبيق والموقع الجغرافي، مثل العروض على الإنترنت التي يمكن تحصيل قيمتها في المواقع الجغرافية لنشاطك التجاري.
مقاييس الملف التجاري
بالإضافة إلى تتبُّع الأحداث والمقاييس والسمات التي تهمّك تتوفّر أيضًا مقاييس خاصة بخدمة "إحصاءات Google" والملف التجاري. على سبيل المثال، في حال إضافة روابط حجز مواعيد وعروض محلية إلى أداة البحث عن الأماكن، يمكنك الحصول على مقاييس حول المشاهدات والنقرات
يطلب نموذج الطلب التالي إلى واجهات برمجة تطبيقات الملف التجاري أنواعًا متعددة من
والمقاييس. لتتبّع النقرات على العروض، لا يتم تضمين 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 للخرائط لإنشاء عنوان URL للاتجاهات كما يلي، مع
اسم المكان الذي تم ترميزه باستخدام عنوان URL كمعلمة destination
ورقم تعريف المكان باعتباره
مَعلمة destination_place_id
. ما مِن تكلفة للإنشاء أو الاستخدام
عناوين URL للخرائط، لذا لا تحتاج إلى تضمين مفتاح واجهة برمجة التطبيقات في عنوان 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. أو رسالة إلكترونية. لمزيد من المعلومات، يُرجى مراجعة إرسال الرسائل باستخدام خدمات تابعة لأطراف ثالثة
عرض محتوى "التجوّل الافتراضي" لمساعدة المستخدمين في الاطّلاع على المواقع الجغرافية
يمكن استخدام ميزة "التجوّل الافتراضي" في العديد من المواقع الجغرافية في العالم لعرض ما قد يكون خارج الموقع، مما يوفر للمستخدمين عرضًا مرئيًا للموقع قبل وصولهم. يمكنك تقديم التجوّل الافتراضي في interactive (على الويب) أو ثابتة (واجهة برمجة التطبيقات) اعتمادًا على ما إذا كنت تريد من المستخدمين "إلقاء نظرة" المنطقة في 360 درجة. التجوّل الافتراضي متاح أيضًا Android و iOS:
تحديد الموقع الجغرافي للمستخدم باستخدام ميزة "رصد الموقع الجغرافي"
في معظم الحالات، يمكنك تحديد الموقع الجغرافي للمستخدم باستخدام خدمات الموقع المضمّنة في أجهزتهم أو متصفحاتهم. نقدم مثالاً على باستخدام ميزة تحديد الموقع الجغرافي عبر HTML5 في المتصفح لعرض الموقع الجغرافي مستخدم أو جهاز على خريطة Google، وهناك وثائق حول طلب الأذونات والحصول على موقع في Android و iOS ومع ذلك، قد تحتاج في بعض الحالات إلى حل بديل أداة البحث عن الموقع الجغرافي مثلاً، إذا كانت خدمات الموقع الجغرافي للجهاز غير مفعّلة أو تم تفعيل مخاوف بشأن انتحال الموقع الجغرافي للجهاز.
صفحة Geolocation API هي واجهة برمجة تطبيقات من جهة الخادم تعرض معلومات الموقع الجغرافي والدقة. نصف القطر استنادًا إلى معلومات حول أبراج الاتصالات وعُقد Wi-Fi التي يستطيع العميل الجديدة. يمكنك استخدام تحديد الموقع الجغرافي كآلية احتياطية لتحديد الموقع الجغرافي للمستخدم، أو يمكنك استخدامه للتحقّق من الموقع الجغرافي الذي أبلغ عنه الجهاز.
الجمع بين بيانات الموقع الجغرافي المخصّصة وتفاصيل المكان
في القسم تقديم تفاصيل المكان السابق، تناولنا استخدام تفاصيل المكان لمنح المستخدمين مستوى غنيًا من معلومات عن مواقعك الجغرافية، مثل ساعات العمل والصور والمراجعات
من المفيد أن تفهم وتكلفة البيانات المختلفة في "تفاصيل المكان"، والتي يتم تصنيفها على أنها "بيانات أساسية" و"بيانات الاتصال" و"بيانات الغلاف الجوي". لإدارة تكاليفك، تتمثّل إحدى الإستراتيجيات في دمج المعلومات التي لديك بالفعل عن مواقعك الجغرافية باستخدام معلومات حديثة من Google (عادةً ما تكون أساسية وبيانات الاتصال) خرائط مثل الإغلاق المؤقت، وساعات العمل في العطلات، وتقييمات المستخدمين، والصور، والمراجعات. إذا كان لديك معلومات الاتصال لمواقعك الجغرافية، لن تحتاج إلى طلب هذه الحقول من "تفاصيل المكان" ويمكن أن تقيد طلبك لجلب "أساسي" فقط أو حقول بيانات الغلاف الجوي بناءً على ما تريد عرضه.
قد يكون لديك بيانات مكان خاصة بك لاستكمالها أو استخدامها بدلاً من تفاصيل المكان. تشير رسالة الأشكال البيانية درس تطبيقي حول الترميز لمُحدِّد موقع تسلسل استدعاء الدوال البرمجية بالكامل مثالاً على استخدام GeoJSON مع قاعدة بيانات لتخزين تفاصيل موقعك واستردادها.