نظرة عامة
تتوفّر "منصة خرائط Google" للويب (JS وTS) وAndroid وiOS، وتوفّر أيضًا واجهات برمجة تطبيقات لخدمات الويب تتيح لك الحصول على معلومات حول الأماكن والاتجاهات والمسافات. النماذج الواردة في هذا الدليل مكتوبة لمنصة واحدة، ولكن يتم توفير روابط مستندات للتنفيذ على منصات أخرى.
عندما يرى المستخدمون منتجاتك على الإنترنت، فإنهم يريدون العثور على أفضل طريقة وأكثر ملاءمة لطلبهم. دليل تنفيذ محدد موقع المنتج ونصائح التخصيص التي نقدمها في هذا الموضوع هما ما ننصح به كمجموعة مثالية من واجهات برمجة تطبيقات النظام الأساسي لخرائط Google لإنشاء تجارب رائعة لمستخدمي محدِّد مواقع المنتجات.
باتّباع دليل التنفيذ هذا، يمكنك مساعدة العملاء في الاطّلاع على المعلومات التفصيلية التي يحتاجون إليها للعثور على منتجاتك، وتزويدهم بتوجيهات إلى المتجر الذي تتوفّر فيه السلعة، سواء كانوا يقودون أو يركبون الدراجات أو يمشيون أو يستقلون وسائل النقل العام.
تمكين واجهات برمجة التطبيقات
لتنفيذ محدد موقع المنتجات، يجب تفعيل واجهات برمجة التطبيقات التالية في Google Cloud Console. ترسلك الروابط التشعبية التالية إلى Google Cloud Console لتفعيل كل واجهة برمجة تطبيقات لمشروعك المحدد:
- واجهة برمجة تطبيقات JavaScript للخرائط
- Places API
- Geocoding 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 |
إذا كانت قاعدة بيانات المتاجر تحتوي على عناوين شوارع ولكن لا تحتوي على إحداثيات جغرافية، استخدِم 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_productlocator_v1_a
تحديد الموقع الجغرافي للمستخدم
| يستخدم هذا المثال ما يلي: مكتبة الإكمال التلقائي للأماكن في واجهة برمجة تطبيقات JavaScript للخرائط | متوفّر أيضًا: Android | iOS |
يتمثل أحد المكونات الرئيسية في Product Locator في تحديد موقع البدء للمستخدم. يمكنك تقديم خيارَين للمستخدم لتحديد موقع البدء: كتابة مصدر البحث، أو منح أذونات لرصد الموقع الجغرافي في متصفّح الويب أو خدمات الموقع الجغرافي على الأجهزة الجوّالة.
التعامل مع الإدخالات المكتوبة باستخدام الإكمال التلقائي
يعتاد المستخدمون اليوم على وظيفة الإكمال التلقائي المسبقة في إصدار المستهلك من خرائط Google. ويمكن دمج هذه الوظيفة في أي تطبيق باستخدام مكتبات الأماكن في "منصة خرائط Google" على الأجهزة الجوّالة والويب. عندما يكتب أحد المستخدمين عنوانًا، يملأ الإكمال التلقائي باقي العناوين من خلال استخدام الأدوات. يمكنك أيضًا تقديم وظيفة الإكمال التلقائي الخاصة بك باستخدام مكتبات الأماكن مباشرةً.
في المثال التالي، أضِف مكتبة الإكمال التلقائي للأماكن إلى موقعك الإلكتروني من خلال إضافة مَعلمة libraries=places إلى عنوان URL للنص البرمجي لواجهة برمجة تطبيقات JavaScript للخرائط.
<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 للخرائط المستخدمين في تحديد الموقع الأكثر ملاءمةً لهم من خلال وقت القيادة أو المسافة على الطريق.
الطريقة القياسية لتنظيم قائمة المواقع هي فرزها حسب المسافة. غالبًا ما يتم حساب هذه المسافة ببساطة من خلال استخدام الخط المستقيم من المستخدم إلى الموقع، ولكن هذا قد يكون مضللاً. قد يكون الخط المستقيم فوق نهر يسهل مروره أو عبر طرق مزدحمة في وقت يكون فيه موقع آخر أكثر ملاءمة. وهذا مهم عندما تكون لديك عدة مواقع على بُعد بضعة كيلومترات من بعضها البعض.
تعمل "خدمة مصفوفة المسافة" (Maps JavaScript API) من خلال تدوين قائمة بمواقع المنشأ والوجهة وعدم عرض مسافة السفر فحسب، بل تتضمّن أيضًا المدة الفاصلة بينهما. في حالة المستخدم، سيكون المصدر هو المكان الذي يتواجد فيه حاليًا، أو نقطة البداية المطلوبة، وستكون الوجهات هي المواقع الجغرافية. يمكن تحديد المنشأ والوجهات كأزواج إحداثية أو كعناوين. عند استدعاء الخدمة، تطابق الخدمة مع العناوين. يمكنك استخدام خدمة مصفوفة المسافة وواجهة برمجة تطبيقات JavaScript للخرائط مع معلَمات إضافية لعرض النتائج استنادًا إلى أوقات القيادة الحالية أو المستقبلية.
يتّصل المثال التالي بخدمة "مصفوفة المسافة" (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;
});
}
يمكنك عرض حالة مخزون المنتج في كل موقع قريب استنادًا إلى قاعدة بيانات المستودع.
جارٍ عرض معلومات المتجر
يمكنك مشاركة تفاصيل غنية عن المكان، مثل معلومات الاتصال وساعات العمل والحالة الحالية المفتوحة لمساعدة العملاء في اختيار موقعهم المفضّل أو إتمام طلبهم.
بعد إجراء مكالمة إلى Maps JavaScript API للحصول على تفاصيل المكان، يمكنك فلترة الردّ وعرضه.
لطلب تفاصيل المكان، ستحتاج إلى رقم تعريف كل موقع من مواقعك الجغرافية. راجِع الحصول على أرقام تعريف الأماكن لاسترداد رقم تعريف المكان الخاص بموقعك الجغرافي.
يعرض طلب "تفاصيل المكان" التالي العنوان والإحداثيات والموقع الإلكتروني ورقم الهاتف والتقييم والساعات لمعرّف مكان 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);
}
}
تحسين محدِّد مواقع المنتجات
واستنادًا إلى احتياجات نشاطك التجاري أو المستخدمين، يمكنك إضافة المزيد من التحسينات إلى تجربة المستخدم.
توفير اتجاهات التنقل
| يستخدم هذا المثال: خدمة اتجاهات واجهة برمجة تطبيقات JavaScript للخرائط | متوفّرة أيضًا: خدمة الويب Directions API لاستخدامها على Android وiOS، إما مباشرةً من التطبيق أو عن بُعد من خلال خادم وكيل للخادم |
عندما تعرض للمستخدمين الاتجاهات من داخل موقعك أو تطبيقاتك، لا يحتاج المستخدمون إلى الانتقال بعيدًا عن موقعك وتشتيت انتباههم بالصفحات الأخرى أو رؤية المنافسين على الخريطة. يمكنك أيضًا عرض انبعاثات الكربون لوسائل النقل المحددة وإظهار تأثير أي رحلة معيّنة باستخدام مجموعة بيانات الكربون التي تمتلكها.
كما تمتلك خدمة الاتجاهات أيضًا وظائف تتيح لك معالجة النتائج وعرضها بسهولة على الخريطة.
فيما يلي مثال على عرض لوحة الاتجاهات. لمزيد من المعلومات حول العيّنة، راجِع عرض اتجاهات النص.
جارٍ إرسال الاتجاهات إلى الهاتف الجوّال
لتسهيل وصول المستخدمين إلى موقع ما، يمكنك إرسال رسالة نصية أو بريد إلكتروني برابط الاتجاهات. عندما ينقر المستخدمون عليه، سيتم تشغيل تطبيق خرائط 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 باستخدام
تنسيق العنوان نفسه كوجهة. ولكن من خلال حذف هذه الاتجاهات، تبدأ الاتجاهات من الموقع الجغرافي الحالي للمستخدم، والذي قد يكون مختلفًا عن المكان الذي كان يستخدم فيه تطبيق Product Locator.
توفّر عناوين URL في "خرائط Google" خيارات إضافية لمَعلمات طلب البحث، مثل travelmode وdir_action=navigate لإطلاق الاتجاهات مع تفعيل ميزة التنقّل.
هذا الرابط القابل للنقر، الذي يوسّع مثال عنوان URL أعلاه، يضبط
origin كملعب لكرة القدم في لندن ويستخدم travelmode=transit لتقديم اتجاهات النقل العام إلى
الوجهة.
لإرسال رسالة نصية أو رسالة إلكترونية تحتوي على عنوان URL هذا، ننصح حاليًا باستخدام تطبيق تابع لجهة خارجية مثل twilio. إذا كنت تستخدم App Engine، يمكنك الاستعانة بشركات خارجية لإرسال رسائل قصيرة أو رسائل إلكترونية. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة إرسال الرسائل باستخدام خدمات الجهات الخارجية.
عرض مواقعك الجغرافية على خريطة تفاعلية
استخدام الخرائط الديناميكية
| يستخدم هذا المثال: 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.
بعد ذلك، ستحتاج إلى 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
});
}
بالنسبة إلى محدد المواقع، عادة ما تهتم بتعيين الموقع الأولي، ونقطة المركز أو الحدود، ومستوى التكبير (مدى تكبير الخريطة لتكبير ذلك الموقع). معظم العناصر الأخرى، مثل ضبط عناصر التحكم، اختيارية لأنك تحدد مستوى التفاعل مع الخريطة.
تخصيص خريطتك
يمكنك تغيير مظهر الخريطة وتفاصيلها بعدة طرق. على سبيل المثال، يمكنك:
- يمكنك إنشاء محدّدات موقع مخصّصة لاستبدال دبابيس الخريطة التلقائية.
- يمكنك تغيير ألوان ميزات الخريطة لتعكس علامتك التجارية.
- يمكنك تحديد نقاط الاهتمام التي تعرضها (معالم الجذب والطعام وأماكن الإقامة وما إلى ذلك) وتحديد الكثافة، ما يتيح لك تركيز انتباه المستخدمين على المواقع الجغرافية لنشاطك التجاري مع تسليط الضوء على المعالم التي تساعد المستخدمين في الوصول إلى أقرب موقع جغرافي.
إنشاء محددات خرائط مخصصة
يمكنك تخصيص محددات المواقع من خلال تغيير اللون الافتراضي (من المحتمل أن يعرض ما إذا كان الموقع مفتوحًا حاليًا) أو استبدال العلامة بصورة مخصصة، مثل شعار علامتك التجارية. يمكن أن توفر نوافذ المعلومات أو النوافذ المنبثقة معلومات إضافية للمستخدمين، مثل ساعات العمل أو رقم الهاتف أو حتى الصور. يمكنك أيضًا إنشاء علامات مخصصة تكون نقطية ومتجهات وقابلة للسحب وحتى مؤثرة متحركة.
فيما يلي نموذج خريطة يستخدم محددات مخصصة. (اطّلِع على رمز المصدر في موضوع العلامات المخصّصة لواجهة برمجة تطبيقات JavaScript للخرائط.)
للحصول على معلومات تفصيلية، اطّلِع على مستندات العلامات الخاصة بكل من JavaScript (الويب) وAndroid وiOS.
تصميم خريطتك
تتيح لك "منصة خرائط Google" تصميم خريطتك بطرق تساعد المستخدمين في العثور على أقرب موقع، والوصول إلى هناك في أسرع وقت ممكن، وتساعدك على تعزيز علامتك التجارية. على سبيل المثال، يمكنك تغيير ألوان الخريطة لتتناسب مع علامتك التجارية، ويمكنك تقليل عوامل التشتيت على الخريطة عن طريق التحكم في نقاط الاهتمام التي تكون مرئية للمستخدمين. توفّر "منصة خرائط Google" أيضًا عددًا من نماذج المبتدئين للخرائط، والتي تم تحسين بعضها لمختلف الصناعات، مثل السفر والخدمات اللوجستية والعقارات والبيع بالتجزئة.
يمكنك إنشاء أنماط الخرائط أو تعديلها في صفحة أنماط الخرائط على Google Cloud Console في مشروعك.
يمكنك التوسيع لعرض صور متحركة لإنشاء نمط الخريطة وتصميمه في Cloud Console:
أنماط الخرائط على مستوى المجال
تعرض هذه الصورة المتحركة أنماط خرائط محددة مسبقًا يمكنك استخدامها في المجال. تشكّل هذه الأنماط نقطة انطلاق مثالية لكل نوع من المجالات. على سبيل المثال، يقلل نمط خريطة البيع بالتجزئة من نقاط الاهتمام على الخريطة، ما يتيح للمستخدمين التركيز على المواقع الجغرافية لنشاطك التجاري والمعالم الرئيسية لمساعدتهم في الوصول إلى أقرب موقع جغرافي بثقة قدر الإمكان.
التحكم في نقاط الاهتمام
تضبط هذه الصورة المتحركة لون العلامة لنقاط الاهتمام وتزيد من كثافة نقاط الاهتمام على نمط الخريطة. كلما زادت الكثافة، زاد عدد علامات نقاط الاهتمام على الخريطة.
لكل نمط خريطة رقم تعريف خاص به. بعد نشر نمط في Cloud Console، تتم الإشارة إلى معرّف الخريطة هذا في رمزك البرمجي، ما يعني أنّه يمكنك تعديل نمط الخريطة في الوقت الفعلي بدون إعادة ضبط إعدادات تطبيقك. وسيظهر المظهر الجديد تلقائيًا في التطبيق الحالي وسيتم استخدامه على مختلف الأنظمة الأساسية. توضح الأمثلة التالية كيفية إضافة معرّف خريطة إلى صفحة ويب باستخدام واجهة برمجة تطبيقات JavaScript للخرائط.
من خلال تضمين علامة map_ids واحدة أو أكثر في عنوان URL للنص البرمجي، تتيح واجهة برمجة تطبيقات 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_productlocator_v1_a">
</script>
يعرض الكود التالي خريطة ذات نمط على صفحة الويب. (العنصر غير المعروض هو عنصر <div id="map"></div> HTML، حيث ستظهر الخريطة
على الصفحة).
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});
تعرّف على مزيد من المعلومات حول دمج تصميم الخرائط المستند إلى السحابة الإلكترونية في JavaScript (الويب) وAndroid وiOS.
الجمع بين بيانات الموقع الجغرافي المخصّصة وتفاصيل المكان
في القسم السابق عرض المواقع الجغرافية على خريطة تفاعلية، تناولنا استخدام "تفاصيل المكان" لمنح المستخدمين مستوى غنيًا من المعلومات عن مواقعك الجغرافية، مثل ساعات العمل والصور والمراجعات.
من المفيد فهم تكلفة حقول البيانات المختلفة في "تفاصيل المكان" والتي يتم تصنيفها على أنّها "بيانات أساسية" و"بيانات الاتصال" و"بيانات الغلاف الجوي". لإدارة تكاليفك، تتمثل إحدى الإستراتيجيات في دمج المعلومات المتوفرة لديك بالفعل عن مواقعك مع المعلومات الجديدة (عادةً البيانات الأساسية وبيانات جهات الاتصال) من خرائط Google مثل الإغلاق المؤقت، وساعات العمل خلال العطلات، وتقييمات المستخدمين والصور والمراجعات. إذا كانت لديك معلومات الاتصال الخاصة بمتاجرك، لن تحتاج إلى طلب هذه الحقول من "تفاصيل المكان" ويمكنك حصر طلبك بجلب حقول "بيانات أساسية" أو "بيانات الغلاف الجوي" فقط استنادًا إلى ما تريد عرضه.
قد يكون لديك بيانات مكان خاصة بك لتكملها أو تستخدمها بدلاً من تفاصيل المكان. يقدّم الدرس التطبيقي حول الترميز الخاص بمحدِّد مواقع حزم البيانات بالكامل مثالاً على استخدام GeoJSON مع قاعدة بيانات لتخزين تفاصيل موقعك الجغرافي واستردادها.