نظرة عامة
يتوفر "منصة خرائط Google" للويب (JS وTS) وAndroid وiOS، ويقدّم أيضًا واجهات برمجة تطبيقات لخدمات الويب للحصول على معلومات حول الأماكن والاتجاهات والمسافات. تمت كتابة النماذج الواردة في هذا الدليل لإحدى المنصات، بينما تتوفر روابط للمستندات يمكن استخدامها على منصات أخرى.
فعندما يرى المستخدمون منتجاتك على الإنترنت، فإنهم يريدون العثور على أفضل الطرق وأكثرها ملاءمةً لطلب المنتجات. ننصحك بدليل تنفيذ "أداة تحديد موقع المنتج" ونصائح التخصيص التي نقدّمها في هذا الموضوع باعتبارها التركيبة المثلى من واجهات برمجة التطبيقات في النظام الأساسي لخرائط Google لإنشاء تجارب رائعة للمستخدمين بشأن محدد مواقع المنتجات.
وباتّباع دليل التنفيذ هذا، يمكنك مساعدة العملاء في الاطّلاع على المعلومات التفصيلية التي يحتاجون إليها للعثور على منتجاتك، ومنحهم اتجاهات الوصول إلى المتجر الذي يحتوي على سلعهم، سواء كانوا يقودون أو يركبون الدراجة أو يمشي أو يركبون وسائل نقل عام.
تفعيل واجهات برمجة التطبيقات
لاستخدام محدد موقع المنتج، يجب تفعيل واجهات برمجة التطبيقات التالية في Google Cloud Console. تنقلك الروابط التشعبية التالية إلى Google Cloud Console لتفعيل كل واجهة برمجة تطبيقات للمشروع المحدد:
- واجهة برمجة تطبيقات JavaScript للخرائط
- واجهة برمجة تطبيقات الأماكن
- واجهة برمجة التطبيقات للترميز الجغرافي
- واجهة برمجة التطبيقات لمصفوفة المسافات
- Directions API
لمزيد من المعلومات حول الإعداد، راجع بدء استخدام "منصة خرائط Google".
أقسام دليل التنفيذ
في ما يلي عمليات التنفيذ والتخصيص التي سنتناولها في هذا الموضوع.
- يمثّل رمز علامة الاختيار خطوة تنفيذ أساسية.
- إنّ رمز النجمة هو إجراء اختياري ولكنّنا ننصح به من أجل تحسين الحلّ.
| ربط المواقع الجغرافية للمتاجر بأماكن "منصة خرائط Google" | مطابقة موقع جغرافي للمتجر مع مكان في "منصة خرائط Google". | |
| تحديد الموقع الجغرافي للمستخدم | يمكنك إضافة وظيفة "الكتابة أثناء التنقّل" لتحسين تجربة المستخدم على جميع الأنظمة الأساسية وتحسين دقة العناوين بأقل عدد من ضغطات المفاتيح. | |
| تحديد المتاجر الأقرب | يمكنك حساب مسافة السفر ومدة الرحلة لعدة أصول ووجهات، مع تحديد أشكال النقل المختلفة اختياريًا، مثل المشي أو القيادة أو النقل العام أو ركوب الدراجات. | |
| عرض معلومات المتجر | اعرض معلومات غنية بالبيانات في متاجرك، حتى يتمكّن المستخدمون من الانتقال إليها بسهولة أكبر. | |
| توفير اتجاهات التنقّل | يمكنك الحصول على بيانات الاتجاهات من نقطة الانطلاق إلى الوجهة باستخدام وسائل النقل المختلفة، مثل المشي والقيادة وركوب الدراجات والنقل العام. | |
| إرسال الاتجاهات إلى جهاز جوّال | بالإضافة إلى عرض الاتجاهات على صفحة الويب، يمكنك أيضًا إرسال الاتجاهات إلى هاتف المستخدم للتنقّل باستخدام "خرائط Google" أثناء التنقل. | |
| عرض مواقعك الجغرافية على خريطة تفاعلية | يمكنك إنشاء محددات مواقع مخصصة للمساعدة في إبراز مواقعك، وتصميم الخريطة بما يتناسب مع ألوان علامتك التجارية. يمكنك عرض (أو إخفاء) نقاط اهتمام محددة على الخريطة لمساعدة المستخدمين في توجيه أنفسهم بشكل أفضل والتحكّم في كثافة نقاط الاهتمام لمنع تشتيت الخرائط. | |
| الجمع بين بيانات الموقع الجغرافي المخصّصة وتفاصيل المكان | يمكنك دمج تفاصيل موقعك الجغرافي المخصّصة مع تفاصيل المكان لتزويد المستخدمين بمجموعة غنية من البيانات لمساعدتهم في اتخاذ القرارات. |
ربط المواقع الجغرافية للمتاجر بأماكن "منصة خرائط Google"
الحصول على معرّفات الأماكن
| يستخدم هذا المثال: Places API | متوفّرة أيضًا: JavaScript |
قد تكون لديك قاعدة بيانات لمتاجرك تتضمّن معلومات أساسية، مثل اسم
هذا الموقع الجغرافي وعنوانه ورقم هاتفه، وتريد ربطه بمكان في "منصة خرائط Google" كمجموعة من الوجهات النهائية التي يمكن للمستخدمين
استلام المنتجات من خلالها. لجلب المعلومات المتوفّرة لدى "منصة خرائط Google" عن هذا المكان، بما في ذلك الإحداثيات الجغرافية والمعلومات التي يساهم بها المستخدِم، ابحث عن رقم تعريف المكان الذي يتوافق مع كلّ متجر من المتاجر في قاعدة البيانات.
يمكنك الاتصال
بنقطة نهاية "البحث عن المكان" في ميزة "البحث عن الأماكن" في واجهة برمجة تطبيقات الأماكن وطلب الحقل 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_productlocator_v1_a
يمكنك تخزين رقم تعريف المكان هذا في قاعدة بياناتك مع بقية بيانات متجرك واستخدامه كطريقة فعّالة لطلب معلومات حول المتجر. في ما يلي إرشادات حول استخدام معرّف المكان الترميزي واسترداد تفاصيل المكان وطلب الاتجاهات إلى المكان.
ترميز المواقع الجغرافية
| يستخدم هذا المثال: Geocoding API | متوفّرة أيضًا: JavaScript |
إذا كانت قاعدة بيانات المتاجر تحتوي على عناوين شوارع وليس إحداثيات جغرافية، يمكنك استخدام واجهة برمجة تطبيقات الترميز الجغرافي للحصول على خط العرض وخط الطول لهذا العنوان، وذلك لأغراض حساب المتاجر الأقرب إلى عميلك. يمكنك ترميز المتجر جغرافيًا على جانب الخادم، وتخزين خطوط العرض والطول في قاعدة البيانات، وإعادة التحميل كل 30 يومًا على الأقل.
في ما يلي مثال على استخدام واجهة برمجة تطبيقات الترميز الجغرافي للحصول على خط العرض وخط الطول لمعرّف المكان الذي تم إرجاعه لمكتب Google في لندن:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
تحديد موقع المستخدم
| يستخدم هذا المثال ما يلي: مكان مكتبة الإكمال التلقائي للأماكن في واجهة برمجة تطبيقات JavaScript للخرائط | يتوفّر أيضًا: Android | iOS |
يتمثل أحد المكونات الرئيسية في محدد موقع المنتج في تحديد موقع البدء للمستخدم. يمكنك تقديم خيارين للمستخدم لتحديد موقع البدء الخاص به، وهما: كتابة مصدر البحث أو منح أذونات لخدمات الموقع الجغرافي على متصفح الويب أو خدمات الموقع الجغرافي على الجوّال.
التعامل مع الإدخالات المكتوبة باستخدام الإكمال التلقائي
اعتاد المستخدمون اليوم على وظيفة الإكمال التلقائي المُسبقة في إصدار المستهلك من "خرائط Google". ويمكن دمج هذه الوظيفة في أي تطبيق باستخدام مكتبات الأماكن في "منصة خرائط Google" على الأجهزة الجوّالة وعلى الويب. وعندما يكتب مستخدم عنوانًا، تعمل ميزة الإكمال التلقائي على ملء الباقي من خلال استخدام التطبيقات المصغّرة. يمكنك أيضًا توفير وظيفة الإكمال التلقائي الخاصة بك باستخدام مكتبات الأماكن مباشرةً.
في المثال التالي، أضِف مكتبة "الإكمال التلقائي" الخاصة بميزة "أماكن" إلى موقعك الإلكتروني من خلال إضافة المَعلمة libraries=places إلى عنوان URL للنص البرمجي لواجهة برمجة تطبيقات JavaScript لـ "خرائط Google".
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_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", searchFromOrigin);
}
في هذا المثال، بمجرد أن يختار المستخدم العنوان، تبدأ
الدالة searchFromOrigin(). يأخذ ذلك الشكل الهندسي للنتيجة المطابقة التي تمثّل موقع المستخدم الجغرافي، ثم يبحث عن أقرب المواقع الجغرافية استنادًا إلى تلك الإحداثيات باعتبارها نقطة الانطلاق، كما هو موضّح في القسم تحديد أقرب المتاجر.
يمكنك توسيع هذه الصفحة للاطّلاع على فيديوهات توضيحية حول إضافة الإكمال التلقائي لميزة "المكان" إلى تطبيقك:
الموقع الإلكتروني
التطبيقات المتوافقة مع Android
تطبيقات iOS
استخدام الموقع الجغرافي في المتصفح
لطلب رصد الموقع الجغرافي في متصفّح HTML5 والتعامل معه، اطّلِع على كيفية تفعيل نافذة استخدام موقعي الجغرافي:
جارٍ تحديد أقرب المتاجر
| يستخدم هذا المثال ما يلي: خدمة مصفوفة المسافة وواجهة برمجة تطبيقات JavaScript للخرائط | السمة متوفّرة أيضًا: واجهة برمجة التطبيقات لمصفوفة المسافات |
بعد تحديد الموقع الجغرافي للمستخدم، يمكنك مقارنة هذا الموقع الجغرافي بموقع متجرك الجغرافي. من خلال إجراء ذلك باستخدام خدمة مصفوفة المسافة، تساعد واجهة برمجة تطبيقات JavaScript للخرائط المستخدمين في اختيار الموقع الجغرافي الأكثر ملاءمةً لهم من خلال وقت القيادة أو مسافة الطريق.
تتمثل الطريقة القياسية لتنظيم قائمة المواقع في فرزها حسب المسافة. غالبًا ما يتم حساب هذه المسافة ببساطة باستخدام الخط المستقيم من المستخدم إلى الموقع، ولكن هذا قد يكون مضللاً. قد يكون الخط المستقيم فوق نهر غير سالكة أو عبر طرق مزدحمة في وقت قد يكون فيه موقع آخر أكثر ملاءمة. وهذا مهم عندما تكون لديك عدة مواقع على بُعد بضعة كيلومترات من بعضها البعض.
تعمل خدمة مصفوفة المسافة و"واجهة برمجة تطبيقات JavaScript للخرائط" من خلال أخذ قائمة بمواقع المنشأ والوجهة وإرجاع ليس فقط مسافة السفر ولكن أيضًا بالمدة الفاصلة بينهما. في حالة المستخدم، سيكون المنشأ هو المكان الذي وصل إليه حاليًا، أو نقطة البداية المطلوبة، والوجهات هي المواقع الجغرافية. يمكن تحديد المصادر والوجهات كأزواج من الإحداثيات أو كعناوين؛ عند استدعاء الخدمة، تتطابق الخدمة مع العناوين. ويمكنك استخدام خدمة مصفوفة المسافة وواجهة Maps JavaScript API مع معلَمات إضافية لعرض النتائج استنادًا إلى أوقات القيادة الحالية أو المستقبلية.
يسمي المثال التالي خدمة مصفوفة المسافة، Maps JavaScript API، مع تحديد مصدر المستخدم و25 موقعًا للمتجر في وقت واحد.
function getDistances(place) {
let distanceMatrixService = new google.maps.DistanceMatrixService();
const origins = [place];
return new Promise((resolve, reject) => {
const callback = (response, status) => {
if (status === google.maps.DistanceMatrixStatus.OK && response) {
resolve(response);
} else {
reject(status);
}
};
distanceMatrixService.getDistanceMatrix(
{
origins,
destinations: stores.slice(0, 25).map((store) => store.location),
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
},
callback
);
});
}
function update(location) {
if (!location) {
return;
}
// ...
// sort by spherical distance
stores.sort((a, b) => {
return (
google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(a.location),
location
) -
google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(b.location),
location
)
);
});
// display travel distance and time
getDistances(location)
.then((response) => {
for (let i = 0; i < response.rows[0].elements.length; i++) {
stores[i].address = response.destinationAddresses[i];
stores[i].travelDistance = response.rows[0].elements[i].distance.value;
stores[i].travelDistanceText =
response.rows[0].elements[i].distance.text;
stores[i].travelDuration = response.rows[0].elements[i].duration.value;
stores[i].travelDurationText =
response.rows[0].elements[i].duration.text;
}
})
.finally(() => {
renderCards(stores);
autocompleteInput.disabled = false;
isUpdateInProgress = false;
});
}
يمكنك عرض حالة مخزون المنتج لكل موقع قريب بناءً على قاعدة بيانات المخزون.
جارٍ عرض معلومات المتجر
| يستخدم هذا المثال: Places Library, Maps JavaScript API | هذه الحزمة متوفّرة أيضًا: حزمة SDK الخاصة بالأماكن لنظام التشغيل Android | حزمة SDK الخاصة بالأماكن لنظام التشغيل iOS | واجهة برمجة تطبيقات الأماكن |
يمكنك مشاركة تفاصيل دقيقة عن المكان، مثل معلومات الاتصال وساعات العمل والحالة المفتوحة حاليًا لمساعدة العملاء في اختيار موقعهم المفضل أو إنهاء طلبهم.
بعد إجراء استدعاء لواجهة برمجة تطبيقات JavaScript للخرائط للحصول على تفاصيل المكان، يمكنك فلترة الردّ وعرضه.
لطلب تفاصيل المكان، ستحتاج إلى رقم تعريف كل موقع من مواقعك الجغرافية. راجع الحصول على معرّفات الأماكن لاسترداد معرّف المكان لموقعك الجغرافي.
يعرض طلب تفاصيل المكان التالي العنوان والإحداثيات والموقع الإلكتروني ورقم الهاتف والتقييم وساعات العمل لمعرّف المكان في Google في لندن:
var request = {
placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
}
تحسين محدِّد مواقع المنتجات
بناءً على احتياجات عملك أو المستخدمين، يمكنك تعزيز تجربة المستخدم.
توفير اتجاهات التنقل
| يستخدم هذا المثال ما يلي: Maps JavaScript API Directions Service | تتوفّر أيضًا: خدمة Directions API على الويب للاستخدام على نظامَي التشغيل Android وiOS، إمّا مباشرةً من التطبيق أو عن بُعد من خلال خادم وكيل. |
عندما تعرض للمستخدمين الاتجاهات من داخل موقعك الإلكتروني أو تطبيقاتك، لن يكون المستخدمون بحاجة إلى الانتقال من موقعك الإلكتروني أو تشتيت انتباههم بالصفحات الأخرى أو مشاهدة المنافسين على الخريطة. يمكنك أيضًا عرض انبعاثات الكربون لوسيلة السفر المحددة وإظهار تأثير أي رحلة معينة باستخدام مجموعة بيانات الكربون التي قد تمتلكها.
تحتوي خدمة الاتجاهات أيضًا على وظائف تتيح لك معالجة النتائج وعرضها بسهولة على الخريطة.
فيما يلي مثال على عرض لوحة اتجاهات. ولمزيد من المعلومات عن العيّنة، يمكنك الاطّلاع على عرض اتجاهات النص.
إرسال الاتجاهات إلى الهاتف الجوّال
لتسهيل وصول المستخدمين إلى موقع جغرافي، يمكنك إرسال رابط الاتجاهات إليه في رسالة نصية أو إرسال رسالة إلكترونية إليه. وعند النقر عليه، سيتم تشغيل تطبيق "خرائط 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 باستخدام تنسيق العنوان نفسه المستخدَم في الوجهة. ولكن من خلال حذف هذا العنوان، تبدأ التوجيهات من الموقع الجغرافي الحالي للمستخدم، والذي قد يختلف عن المكان الذي كان يستخدم فيه تطبيق "محدد مواقع المنتجات".
توفّر عناوين URL للخرائط
خيارات إضافية لمَعلمات طلب البحث، مثل travelmode و
dir_action=navigate لإطلاق الاتجاهات مع تفعيل ميزة التنقّل.
هذا الرابط القابل للنقر، الذي يوسّع مثال عنوان URL أعلاه، يحدّد
origin كملعب لكرة القدم في لندن ويستخدم
travelmode=transit لتوفير اتجاهات النقل العام إلى
الوجهة.
لإرسال رسالة نصية أو رسالة إلكترونية تحتوي على عنوان URL هذا، ننصحك حاليًا باستخدام تطبيق تابع لجهة خارجية مثل twilio. إذا كنت تستخدم App Engine، يمكنك الاستعانة بشركات الجهات الخارجية لإرسال رسائل قصيرة SMS أو بريد إلكتروني. لمزيد من المعلومات، يُرجى الاطّلاع على إرسال رسائل باستخدام خدمات الجهات الخارجية.
عرض مواقعك الجغرافية على خريطة تفاعلية
استخدام الخرائط الديناميكية
| يستخدم هذا المثال: Maps JavaScript API | يتوفّر أيضًا: Android | iOS |
يُعد محدِّد المواقع جزءًا مهمًا من تجربة المستخدم. ومع ذلك، قد لا تتوفّر خريطة بسيطة لبعض المواقع الإلكترونية، ما يتطلّب من المستخدمين مغادرة الموقع الإلكتروني أو التطبيق للعثور على موقع جغرافي قريب. وهذا يعني تقديم تجربة دون المستوى المطلوب للمستخدمين الذين يجب عليهم التنقل بين الصفحات من أجل الحصول على المعلومات التي يحتاجونها. بدلاً من ذلك، يمكنك تحسين هذه التجربة من خلال تضمين الخرائط وتخصيصها في تطبيقاتك.
يمكن إضافة خريطة ديناميكية إلى صفحتك — أي خريطة يمكن للمستخدمين تحريكها وتكبيرها وتصغيرها والحصول على تفاصيل حول المواقع ونقاط الاهتمام المختلفة — يمكن إجراء ذلك باستخدام بضعة أسطر من الرموز.
أولاً، يجب تضمين واجهة برمجة تطبيقات JavaScript للخرائط في الصفحة. يتم ذلك من خلال ربط النص البرمجي التالي في صفحة HTML.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>يشير عنوان URL إلى وظيفة initMap في JavaScript التي يتم تشغيلها عند تحميل الصفحة. في عنوان URL، يمكنك أيضًا تحديد اللغة أو المنطقة على الخريطة للتأكد من تنسيقها بالطريقة الصحيحة للبلد المعيّن الذي تستهدفه. إنّ تحديد منطقة يضمن أيضًا انحياز سلوك التطبيقات المستخدَمة خارج الولايات المتحدة للمنطقة التي تحدِّدها. يمكنك الاطّلاع على تفاصيل تغطية "منصة خرائط Google"
للحصول على قائمة كاملة باللغات والمناطق المتاحة، والاطّلاع على مزيد من المعلومات حول
region
استخدام المعلَمات.
بعد ذلك، يجب رمز HTML div لوضع خريطتك على الصفحة.
هذا هو المكان الذي سيتم عرض الخريطة فيه.
<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
});
}
بالنسبة إلى محدِّد المواقع، تهتم عادةً بتحديد الموقع الجغرافي المبدئي، ونقطة الوسط أو الحدود، ومستوى التكبير/التصغير (مدى تكبير الخريطة في ذلك الموقع). معظم العناصر الأخرى، مثل ضبط عناصر التحكم، تكون اختيارية أثناء تحديد مستوى التفاعل مع الخريطة.
تخصيص خريطتك
يمكنك تغيير مظهر الخريطة وتفاصيلها بعدة طرق. على سبيل المثال، يمكنك:
- يمكنك إنشاء علامات مخصّصة لك لاستبدال دبابيس الخريطة التلقائية.
- يمكنك تغيير ألوان ميزات الخريطة لتعكس علامتك التجارية.
- يمكنك التحكّم في نقاط الاهتمام التي تعرضها (المعالم السياحية والطعام والإقامة وما إلى ذلك) ومدى كثافة عرضها، ما يتيح لك تركيز انتباه المستخدم على مواقعك الجغرافية مع إبراز المعالم التي تساعد المستخدمين في الوصول إلى أقرب موقع جغرافي.
إنشاء علامات خريطة مخصصة
يمكنك تخصيص علاماتك عن طريق تغيير اللون الافتراضي (ربما عرض ما إذا كان الموقع مفتوحًا حاليًا) أو استبدال العلامة بصورة مخصصة، مثل شعار علامتك التجارية. يمكن أن توفر نوافذ المعلومات أو النوافذ المنبثقة معلومات إضافية للمستخدمين، مثل ساعات العمل أو رقم الهاتف أو حتى الصور. يمكنك أيضًا إنشاء علامات مخصصة تكون نقطية ومتجهة وقابلة للسحب وحتى متحركة.
فيما يلي نموذج لخريطة تستخدم علامات مخصصة. (اطّلِع على رمز المصدر في موضوع العلامات المخصّصة لواجهة برمجة تطبيقات JavaScript لـ "خرائط Google".)
للحصول على معلومات مفصّلة، يمكنك الاطّلاع على مستندات العلامات الخاصة بJavaScript (على الويب) وAndroid وiOS.
تصميم الخريطة
تتيح لك "منصة خرائط Google" وضع تصميم لخريطتك بطرق تساعد المستخدمين في العثور على أقرب موقع جغرافي والوصول إليه في أسرع وقت ممكن، كما تساعدك على تعزيز علامتك التجارية. على سبيل المثال، يمكنك تغيير ألوان الخريطة لتتناسب مع علامتك التجارية، ويمكنك تقليل عوامل التشتيت على الخريطة عن طريق التحكم في نقاط الاهتمام المرئية للمستخدمين. توفّر "منصة خرائط Google" أيضًا عددًا من نماذج البدء مع الخرائط، والتي تم تحسين بعضها ليتناسب مع مجالات مختلفة، مثل السفر والخدمات اللوجستية والعقارات والبيع بالتجزئة.
يمكنك إنشاء أنماط الخرائط أو تعديلها في صفحة أنماط الخرائط في Google Cloud Console في مشروعك.
التوسيع لعرض الصور المتحركة لإنشاء نمط الخريطة وتصميمها في Cloud Console:
أنماط خريطة مجال العمل
تعرض هذه الصورة المتحركة أنماط الخرائط المحدّدة مسبقًا الخاصة بالمجال والتي يمكنك استخدامها. توفر هذه الأنماط نقطة انطلاق مثالية لكل نوع من المجالات. على سبيل المثال، يقلّل نمط خريطة البيع بالتجزئة من نقاط الاهتمام على الخريطة، ما يتيح للمستخدمين التركيز على مواقعك الجغرافية، بالإضافة إلى المعالم لمساعدتهم في الوصول إلى أقرب موقع جغرافي بثقة وبأسرع وقت ممكن.
عنصر التحكّم في نقاط الاهتمام
تعمل هذه الصورة المتحركة على ضبط لون العلامة لنقاط الاهتمام وزيادة كثافة نقاط الاهتمام على نمط الخريطة. كلما زادت الكثافة، ازدادت علامات نقاط الاهتمام على الخريطة.
لكل نمط خريطة رقم تعريفه الخاص. بعد نشر نمط في 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_productlocator_v1_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 مثل الإغلاق المؤقت، وساعات العمل خلال العطلات، وتقييمات المستخدمين والصور والمراجعات. وإذا كان لديك بالفعل معلومات الاتصال لمتاجرك، فلن تحتاج إلى طلب هذه الحقول من تفاصيل المكان ويمكنك تقييد طلبك لجلب حقول بيانات أساسية أو الغلاف الجوي فقط بناءً على ما تريد عرضه.
قد يكون لديك بيانات مكان خاصة بك لاستكمالها أو استخدامها بدلاً من تفاصيل المكان. يقدم الدرس التطبيقي حول الترميز لمحدد موقع الحزمة الكاملة مثالاً على استخدام GeoJSON مع قاعدة بيانات لتخزين تفاصيل الموقع الخاصة بك واستردادها.