نظرة عامة
تتوفّر "منصة خرائط Google" على الويب (JS وTS) وAndroid وiOS، وتوفّر أيضًا واجهات برمجة تطبيقات لخدمات الويب للحصول على معلومات حول الأماكن والاتجاهات والمسافات. تمت كتابة النماذج في هذا الدليل لمنصة واحدة، ولكن تم توفير روابط المستندات لتنفيذها على منصات أخرى.
عندما يرى المستخدمون منتجاتك على الإنترنت، يريدون العثور على أفضل طريقة وأكثرها ملاءمة لتلقّي طلباتهم. يُعدّ دليل تنفيذ أداة البحث عن أماكن ونصائح التخصيص ما توصي به Google باعتباره المجموعة المثلى من واجهات برمجة التطبيقات في منصة خرائط Google لإنشاء تجارب مستخدم رائعة لأداة البحث عن أماكن.
من خلال اتّباع دليل التنفيذ هذا، يمكنك مساعدة العملاء في الاطّلاع على المعلومات التفصيلية التي يحتاجون إليها للعثور على منتجاتك، وتزويدهم بتوجيهات إلى المتجر الذي يتوفّر فيه المنتج، سواء كانوا يقودون السيارة أو يركبون الدراجة أو يمشون أو يستخدمون وسائل النقل العام.
تفعيل واجهات برمجة التطبيقات
لتنفيذ Product Locator، يجب تفعيل واجهات برمجة التطبيقات التالية في Google Cloud Console. تنقلك الروابط التشعبية التالية إلى Google Cloud Console لتفعيل كل واجهة برمجة تطبيقات للمشروع الذي اخترته:
لمزيد من المعلومات حول عملية الإعداد، يُرجى الاطّلاع على مقالة بدء استخدام "منصة خرائط Google".
أقسام دليل التنفيذ
في ما يلي عمليات التنفيذ والتخصيص التي يتم تناولها هنا:
- يُعدّ رمز علامة الصح خطوة أساسية في عملية التنفيذ.
- رمز النجمة هو تخصيص اختياري، ولكن يُنصح به لتحسين الحلّ.
| ربط مواقع المتاجر بالأماكن على "منصة خرائط Google" | مطابقة موقع متجر مع مكان في "منصة خرائط Google" | |
| تحديد الموقع الجغرافي للمستخدم | أضِف وظيفة الكتابة أثناء التنقل لتحسين تجربة المستخدم على جميع المنصات وتحسين دقة العناوين بأقل عدد من ضغطات المفاتيح. | |
| تحديد أقرب المتاجر | يمكنك حساب مسافة السفر ومدة السفر لعدة نقاط انطلاق ووجهات، مع تحديد أشكال النقل المختلفة بشكل اختياري، مثل المشي أو القيادة أو وسائل النقل العام أو ركوب الدراجات. | |
| عرض معلومات المتجر | عرض معلومات غنية بالبيانات عن متاجرك، ما يتيح للمستخدمين التنقّل إليها بسهولة أكبر | |
| تقديم اتجاهات التنقّل | الحصول على بيانات الاتجاهات من نقطة الانطلاق إلى الوجهة باستخدام وسائل نقل مختلفة، مثل المشي والقيادة وركوب الدراجة ووسائل النقل العام | |
| إرسال الاتجاهات إلى الجهاز الجوّال | بالإضافة إلى عرض الاتجاهات على صفحة الويب، يمكنك أيضًا إرسال الاتجاهات إلى هاتف المستخدم للتنقّل باستخدام "خرائط Google" أثناء التنقّل. | |
| عرض مواقعك الجغرافية على خريطة تفاعلية | يمكنك إنشاء علامات مخصّصة على الخريطة لمساعدة مواقعك الجغرافية في التميّز، وتصميم الخريطة لتتطابق مع ألوان علامتك التجارية. عرض (أو إخفاء) نقاط اهتمام معيّنة على خريطتك لمساعدة المستخدمين في تحديد مواقعهم بشكل أفضل، والتحكّم في كثافة نقاط الاهتمام لمنع تكدّس العناصر على الخريطة | |
| دمج بيانات الموقع الجغرافي المخصّصة مع خدمة "تفاصيل المكان" | يمكنك الجمع بين تفاصيل الموقع الجغرافي المخصّصة و"تفاصيل المكان" لتزويد المستخدمين بمجموعة غنية من البيانات لاتخاذ القرارات. |
ربط مواقع المتاجر بالأماكن على "منصة خرائط Google"
الحصول على أرقام تعريف الأماكن
| يستخدم هذا المثال: Places API (جديدة) | يتوفّر أيضًا: JavaScript |
قد يكون لديك قاعدة بيانات خاصة بمتاجرك تتضمّن معلومات أساسية، مثل اسم الموقع الجغرافي وعنوانه ورقم هاتفه، وتريد ربطها بمكان في "منصة خرائط Google" كمجموعة من الوجهات النهائية التي يمكن للمستخدمين استلام المنتجات منها. لاسترداد المعلومات التي تتضمّنها "منصة خرائط Google" حول هذا المكان، بما في ذلك الإحداثيات الجغرافية والمعلومات التي يقدّمها المستخدمون، ابحث عن معرّف المكان الذي يتوافق مع كل متجر في قاعدة البيانات.
يمكنك إجراء طلب إلى
نقطة نهاية "البحث النصي (جديد)" في Places API (جديد) وطلب الحقل places.id فقط في قناع الحقل (ما يؤدي إلى تفعيل رمز التخزين التعريفي "أساسيات بحث Google فقط").
يعرض المثال التالي طريقة طلب معرّف المكان لمكتب Google في لندن:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'يمكنك تخزين معرّف المكان هذا في قاعدة البيانات مع بقية بيانات المتجر واستخدامه كطريقة فعّالة لطلب معلومات عن المتجر. في ما يلي تعليمات حول استخدام معرّف المكان لترميز الموقع الجغرافي واسترداد تفاصيل المكان وطلب اتجاهات إلى المكان.
الترميز الجغرافي لمواقعك الجغرافية
| يستخدم هذا المثال: Geocoding API | يتوفّر أيضًا: JavaScript |
إذا كانت قاعدة بيانات المتاجر تتضمّن عناوين الشوارع ولكن ليس الإحداثيات الجغرافية، استخدِم Geocoding API للحصول على خطوط العرض والطول الخاصة بهذا العنوان من أجل احتساب المتاجر الأقرب إلى العميل. يمكنك ترميز المتجر جغرافيًا من جهة الخادم، وتخزين خطوط الطول ودوائر العرض في قاعدة البيانات، وإعادة تحميل البيانات كل 30 يومًا على الأقل.
في ما يلي مثال على استخدام Geocoding API للحصول على خط العرض وخط الطول الخاصين برقم تعريف المكان الذي تم عرضه لمكتب Google في لندن:
```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
```
تحديد الموقع الجغرافي للمستخدم
| يستخدم هذا المثال: ميزة "الإكمال التلقائي للمكان" في Maps JavaScript API | متوفر أيضًا على: Android | iOS |
أحد المكوّنات الرئيسية في أداة "محدّد الموقع الجغرافي للمنتج" هو تحديد الموقع الجغرافي الأوّلي للمستخدم. يمكنك تقديم خيارَين للمستخدم لتحديد موقع البداية: كتابة مصدر البحث أو منح أذونات لتحديد الموقع الجغرافي في متصفّح الويب أو خدمات الموقع الجغرافي على الأجهزة الجوّالة.
التعامل مع الإدخالات المكتوبة باستخدام ميزة الإكمال التلقائي
اعتاد المستخدمون اليوم على وظيفة الإكمال التلقائي أثناء الكتابة في الإصدار المخصّص للمستهلكين من "خرائط Google". يمكن دمج هذه الوظيفة في أي تطبيق باستخدام مكتبات Places API على الأجهزة الجوّالة والويب. عندما يكتب المستخدم عنوانًا، تملأ ميزة "الإكمال التلقائي" بقية المعلومات باستخدام التطبيقات المصغّرة. يمكنك أيضًا توفير وظيفة الإكمال التلقائي الخاصة بك مباشرةً باستخدام Place Autocomplete Data API.
في المثال التالي، أضِف مكتبتَي "الأماكن" و"العلامات" إلى موقعك الإلكتروني من خلال إضافة المَعلمة libraries=places,marker إلى عنوان URL الخاص ببرنامج نصي لواجهة برمجة التطبيقات JavaScript في "خرائط Google".
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>بعد ذلك، أضِف عنصر حاوية إلى صفحتك حيث سيتم إلحاق الأداة PlaceAutocompleteElement:
<div id="autocomplete-container"></div>أخيرًا، عليك تهيئة عنصر واجهة المستخدم PlaceAutocompleteElement وإلحاقه بالحاوية. يؤدي تقييد
توقّعات الإكمال التلقائي الخاصة بـ "الأماكن"
باستخدام includedPrimaryTypes: ["geocode"] إلى ضبط الأداة للسماح
بعناوين الشوارع والأحياء والمدن والرموز البريدية، ما يتيح للمستخدمين إدخال
أي مستوى من التفاصيل لوصف مصدرهم. عندما يختار المستخدم
توقّعًا، يتم تنشيط الحدث gmp-select ويمكنك طلب الحقل location
الذي يحتوي على خطوط الطول والعرض الخاصة بموقع المستخدم
الجغرافي الأصلي من خلال استدعاء place.fetchFields(). ستستخدم إحداثيات الخريطة هذه للإشارة إلى علاقة مواقعك الجغرافية بالموقع الأصلي.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // fetch the place details and search for the nearest stores. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["id", "location", "formattedAddress"], }); searchFromOrigin(place); }); }
في هذا المثال، بعد أن يختار المستخدم العنوان، تبدأ الدالة
searchFromOrigin(). يتم تحديد الموقع الجغرافي للمطابقة التي تم العثور عليها، ثم يتم البحث عن أقرب المواقع الجغرافية استنادًا إلى هذه الإحداثيات كنقطة بداية، كما هو موضّح في قسم تحديد أقرب المتاجر.
وسِّع هذا القسم للاطّلاع على فيديوهات توضيحية حول كيفية إضافة ميزة "الإكمال التلقائي لأسماء الأماكن" إلى تطبيقك:
الموقع الإلكتروني
تطبيقات Android
تطبيقات iOS
استخدام الموقع الجغرافي للمتصفّح
لطلب بيانات الموقع الجغرافي للمتصفح المستند إلى HTML5 والتعامل معها، تعرَّف على كيفية تفعيل نافذة استخدام موقعي الجغرافي:
تحديد المتاجر الأقرب إليك
| يستخدم هذا المثال: Routes Library وMaps JavaScript API | تتوفّر أيضًا: Routes API |
بعد الحصول على الموقع الجغرافي للمستخدم، يمكنك مقارنته بالمواقع الجغرافية لمتاجركم. يساعد إجراء ذلك باستخدام الفئة
RouteMatrix
في مكتبة Routes API، Maps JavaScript API (أو الميزة
Compute Route
Matrix في Routes API) المستخدمين في اختيار الموقع الجغرافي الأنسب لهم حسب مدة القيادة أو المسافة على الطريق.
الطريقة العادية لتنظيم قائمة بالمواقع الجغرافية هي ترتيبها حسب المسافة. في كثير من الأحيان، يتم احتساب هذه المسافة ببساطة باستخدام الخط المستقيم من المستخدم إلى الموقع الجغرافي، ولكن قد يكون ذلك مضلّلاً. قد يمر الخط المستقيم فوق نهر لا يمكن عبوره أو عبر طرق مزدحمة في وقت قد يكون فيه موقع آخر أكثر ملاءمة. ويكون هذا الإجراء مهمًا عندما يكون لديك مواقع جغرافية متعدّدة تقع على بُعد بضعة كيلومترات من بعضها.
تعمل الطريقة RouteMatrix.computeRouteMatrix من خلال تلقّي قائمة بمواقع جغرافية للمصدر والوجهة، ثم تعرض المسافة المقطوعة ووقت التنقّل بينها. في حالة المستخدم، سيكون المصدر هو المكان الذي يتواجد فيه حاليًا أو نقطة البداية التي يريدها، وستكون الوجهات هي المواقع الجغرافية. يمكن تحديد نقاط الانطلاق والوجهات كأزواج إحداثيات أو معرّفات أماكن أو عناوين. يمكنك استخدام
RouteMatrix.computeRouteMatrix مع الإعدادات المفضّلة لتحديد أفضل مسار، مثل
TRAFFIC_AWARE، لعرض النتائج استنادًا إلى مدّة القيادة الحالية أو المستقبلية.
يستدعي المثال التالي RouteMatrix.computeRouteMatrix في
Routes Library، Maps JavaScript API، مع تحديد مصدر المستخدم وما يصل إلى 25 موقعًا جغرافيًا للمتجر
في المرة الواحدة.
async function getDistances(originLocation) { const { RouteMatrix } = await google.maps.importLibrary("routes"); const request = { origins: [originLocation], destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, routingPreference: "TRAFFIC_AWARE", fields: ["distanceMeters", "durationMillis", "condition"], }; return RouteMatrix.computeRouteMatrix(request); } 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(({ matrix }) => { const items = matrix.rows[0].items; for (let i = 0; i < items.length; i++) { if (items[i].condition === "ROUTE_EXISTS") { stores[i].travelDistance = items[i].distanceMeters; stores[i].travelDuration = items[i].durationMillis; } } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
يمكنك عرض حالة توفّر المنتج في كل موقع جغرافي قريب استنادًا إلى قاعدة بيانات المستودع.
عرض معلومات المتجر
| يستخدم هذا المثال: مكتبة الأماكن، Maps JavaScript API | تتوفّر أيضًا: Places SDK لنظام التشغيل Android | Places SDK لنظام التشغيل iOS | Places API (جديد) |
يمكنك مشاركة تفاصيل غنية حول الأماكن، مثل معلومات الاتصال وساعات العمل وحالة العمل الحالية، لمساعدة العملاء في اختيار الموقع الجغرافي المفضّل أو إكمال طلبهم.
بعد إجراء طلب إلى Maps JavaScript API للحصول على تفاصيل المكان، يمكنك فلترة الردّ وعرضه.
لطلب تفاصيل المكان، ستحتاج إلى رقم تعريف المكان لكل موقع من مواقعك الجغرافية. اطّلِع على الحصول على معرّفات الأماكن لاسترداد معرّف المكان الخاص بموقعك الجغرافي.
يستخدم طلب "تفاصيل المكان" التالي فئة المكان لعرض الاسم والإحداثيات والموقع الإلكتروني ورقم الهاتف والتقييم وساعات العمل لمعرّف المكان "Google London":
const place = new google.maps.places.Place({ id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', });await place.fetchFields({ fields: [ 'displayName', 'nationalPhoneNumber', 'location', 'regularOpeningHours', 'rating', 'utcOffsetMinutes', 'websiteURI', ], });
createMarker(place);
تحسين ميزة "أداة البحث عن المنتجات"
يمكنك تحسين تجربة المستخدم بشكل أكبر حسب احتياجات نشاطك التجاري أو المستخدمين.
تقديم اتجاهات التنقّل
| يستخدم هذا المثال: Routes Library وMaps JavaScript API | تتوفّر أيضًا: واجهة Routes API خدمة ويب يمكن استخدامها على أجهزة Android وiOS، إما مباشرةً من التطبيق أو عن بُعد من خلال خادم وكيل |
عندما تعرض للمستخدمين اتجاهات من داخل موقعك الإلكتروني أو تطبيقاتك، لن يحتاجوا إلى الانتقال إلى موقع آخر وتشتيت انتباههم بصفحات أخرى أو رؤية منافسين على الخريطة. باستخدام Routes API، يمكنك أيضًا طلب مسارات صديقة للبيئة لتقدير استهلاك الوقود أو الطاقة وعرض التأثير البيئي للرحلة.
يحتوي Route
class في حزمة Routes Library ضِمن Maps JavaScript API أيضًا على طرق، مثل
createPolylines() و
createWaypointAdvancedMarkers()، تتيح لك معالجة النتائج
وعرضها على خريطة.
في ما يلي مثال على طلب مسار وعرضه على خريطة. لمزيد من المعلومات حول العيّنة، يُرجى الاطّلاع على الحصول على مسار.
إرسال الاتجاهات إلى الجهاز الجوّال
لتسهيل وصول المستخدمين إلى موقع جغرافي، يمكنك إرسال رابط يتضمّن الاتجاهات إليهم عبر رسالة نصية أو رسالة إلكترونية. عندما ينقرون على الرابط، سيتم تشغيل تطبيق "خرائط 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 باستخدام تنسيق العنوان نفسه المستخدَم في الوجهة. ولكن عند حذفها، تبدأ الاتجاهات من الموقع الجغرافي الحالي للمستخدم، والذي قد يختلف عن الموقع الجغرافي الذي كان يستخدم فيه تطبيق "أداة البحث عن أماكن" الخاص بك.
توفّر عناوين URL في "خرائط Google" خيارات إضافية لمعلمات طلب البحث، مثل travelmode وdir_action=navigate، لتشغيل الاتجاهات مع تفعيل التنقّل.
يؤدي هذا الرابط القابل للنقر، الذي يوسّع عنوان URL في المثال السابق، إلى ضبط
origin كملعب كرة قدم في لندن واستخدام
travelmode=transit لتوفير اتجاهات النقل العام إلى
الوجهة.
لإرسال رسالة نصية أو رسالة إلكترونية تتضمّن عنوان URL هذا، ننصحك حاليًا باستخدام تطبيق تابع لجهة خارجية، مثل twilio. إذا كنت تستخدم App Engine، يمكنك الاستعانة بشركات خارجية لإرسال رسائل SMS أو رسائل إلكترونية. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة إرسال الرسائل باستخدام خدمات تابعة لجهات خارجية.
عرض مواقعك الجغرافية على خريطة تفاعلية
استخدام الخرائط الديناميكية
| يستخدم هذا المثال: Maps JavaScript API | تتوفّر أيضًا على: Android | iOS |
يُعدّ أداة البحث عن أماكن جزءًا مهمًا من تجربة المستخدم. ومع ذلك، قد لا تتضمّن بعض المواقع الإلكترونية حتى خريطة بسيطة، ما يضطر المستخدمين إلى مغادرة الموقع الإلكتروني أو التطبيق للعثور على موقع قريب. وهذا يعني أنّ المستخدمين سيحصلون على تجربة غير مثالية لأنّهم سيضطرون إلى التنقّل بين الصفحات للحصول على المعلومات التي يحتاجون إليها. بدلاً من ذلك، يمكنك تحسين هذه التجربة من خلال تضمين الخرائط وتخصيصها في تطبيقاتك.
يمكنك إضافة خريطة ديناميكية إلى صفحتك، أي خريطة يمكن للمستخدمين التنقّل فيها وتكبيرها وتصغيرها والحصول على تفاصيل حول المواقع الجغرافية المختلفة ونقاط الاهتمام، وذلك باستخدام بضعة أسطر من الرموز البرمجية.
يجب أولاً تضمين Maps JavaScript API في الصفحة.
يتم ذلك من خلال ربط النص البرمجي التالي في صفحة HTML، بما في ذلك libraries=marker، حتى تتمكّن من إضافة علامات
متقدّمة إلى الخريطة.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>يشير عنوان URL إلى دالة JavaScript initMap التي يتم تشغيلها عند تحميل الصفحة. في عنوان 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 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
بالنسبة إلى أداة البحث عن أماكن، يهمّك عادةً ضبط الموقع الجغرافي الأوّلي ونقطة مركزية أو الحدود ومستوى التكبير (مقدار تكبير الخريطة في ذلك الموقع الجغرافي). معظم العناصر الأخرى، مثل ضبط عناصر التحكّم، اختيارية لأنّك تحدّد مستوى التفاعل مع الخريطة.
تخصيص الخريطة
يمكنك تغيير مظهر الخريطة وتفاصيلها بعدة طرق. على سبيل المثال، يمكنك إجراء ما يلي:
- يمكنك إنشاء علامات مخصّصة لاستبدال دبابيس الخريطة التلقائية.
- تغيير ألوان عناصر الخريطة لتعكس علامتك التجارية
- التحكّم في نقاط الاهتمام التي تعرضها (مناطق الجذب، والطعام، والإقامة، وما إلى ذلك) وكثافتها، ما يتيح لك تركيز انتباه المستخدم على مواقعك الجغرافية مع إبراز المعالم التي تساعد المستخدمين في الوصول إلى أقرب موقع جغرافي
إنشاء علامات مخصّصة على الخريطة
يمكنك تخصيص العلامات المتقدّمة من خلال تغيير لون الخلفية أو الحدود أو الحرف الرسومي التلقائي للدبوس (على سبيل المثال، للإشارة إلى ما إذا كان الموقع الجغرافي مفتوحًا حاليًا)، أو استبدال العلامة بصورة رسومية مخصّصة مثل شعار علامتك التجارية، أو إنشاء علامات مخصّصة بتنسيق HTML وCSS. يمكن أن توفّر نوافذ المعلومات أو النوافذ المنبثقة معلومات إضافية للمستخدمين، مثل ساعات العمل أو رقم الهاتف أو الصور.
في ما يلي نموذج لخريطة تستخدم محدّدات رسومات مخصّصة. (يمكنك الاطّلاع على رمز المصدر في موضوع علامات الرسومات المخصّصة في Maps JavaScript API).
للحصول على معلومات تفصيلية، راجِع مستندات العلامات المتقدّمة الخاصة بـ JavaScript (الويب) وAndroid وiOS.
تخصيص مظهر خريطتك
تتيح لك "منصة خرائط Google" تصميم خريطتك بطرق تساعد المستخدمين في العثور على أقرب موقع جغرافي والوصول إليه بأسرع ما يمكن، كما تساعدك في تعزيز علامتك التجارية. على سبيل المثال، يمكنك تغيير ألوان الخريطة لتتطابق مع علامتك التجارية، ويمكنك تقليل عوامل التشتيت على الخريطة من خلال التحكّم في نقاط الاهتمام التي تظهر للمستخدمين. توفّر "منصة خرائط Google" أيضًا عددًا من نماذج الخرائط الأساسية، بعضها محسّن لمختلف المجالات، مثل السفر والخدمات اللوجستية والعقارات والتجزئة.
يمكنك إنشاء أنماط خرائط أو تعديلها في صفحة أنماط الخرائط ضمن مشروعك على Google Cloud Console.
يمكنك توسيع القائمة للاطّلاع على صور متحركة حول إنشاء أنماط الخرائط وتصميمها في Cloud Console:
أنماط خرائط المجالات
تعرض هذه الصورة المتحركة أنماط خرائط محدّدة مسبقًا خاصة بمجالات معيّنة يمكنك استخدامها. وتوفّر هذه الأنماط نقطة بداية مثالية لكل نوع من أنواع الصناعات. على سبيل المثال، يقلّل نمط خريطة "البيع بالتجزئة" من نقاط الاهتمام على الخريطة، ما يتيح للمستخدمين التركيز على مواقعك الجغرافية، بالإضافة إلى المعالم البارزة لمساعدتهم في الوصول إلى أقرب موقع جغرافي بأسرع ما يمكن وبثقة.
عنصر التحكّم في نقاط الاهتمام
تضبط هذه الصورة المتحركة لون العلامة لنقاط الاهتمام وتزيد كثافة نقاط الاهتمام في نمط الخريطة. وكلما زادت الكثافة، زاد عدد علامات نقاط الاهتمام التي تظهر على الخريطة.
لكل نمط خريطة معرّف خاص به. بعد نشر نمط في Cloud Console، يمكنك الرجوع إلى معرّف الخريطة هذا في الرمز البرمجي، ما يعني أنّه يمكنك تعديل نمط الخريطة في الوقت الفعلي بدون إعادة تصميم تطبيقك. سيظهر الشكل الجديد تلقائيًا في التطبيق الحالي وسيتم استخدامه على جميع المنصات. توضّح الأمثلة التالية كيفية إضافة معرّف خريطة إلى صفحة ويب باستخدام Maps JavaScript API.
من خلال تضمين map_ids واحد أو أكثر في عنوان URL للبرنامج النصي، يتيح Maps JavaScript API تلقائيًا هذه الأنماط لتسريع عرض الخريطة عند طلب هذه الأنماط في الرمز البرمجي.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_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.
الجمع بين بيانات الموقع الجغرافي المخصّصة و"تفاصيل المكان"
يصف القسم السابق عرض مواقعك الجغرافية على خريطة تفاعلية استخدام "تفاصيل المكان" لتزويد المستخدمين بمستوى غني من المعلومات حول مواقعك الجغرافية، مثل ساعات العمل والصور والمراجعات.
من المفيد فهم فئات الأسعار ووحدات حفظ المخزون (SKU) الخاصة بحقول البيانات المختلفة في Places API (New). لإدارة تكاليفك، يمكنك اتّباع استراتيجية تجمع بين المعلومات المتوفّرة لديك عن مواقعك الجغرافية والمعلومات الجديدة من "خرائط Google"، مثل الإغلاق المؤقت وساعات العمل خلال العطلات وتقييمات المستخدمين وصورهم ومراجعاتهم. إذا كانت لديك معلومات الاتصال الخاصة بمتاجرِك، لن تحتاج إلى طلب هذه الحقول من "تفاصيل المكان"، ويمكنك حصر قناع الحقل لجلب الحقول التي تريد عرضها فقط.
قد تتوفّر لديك بيانات خاصة بالأماكن لتكمِّل بها بيانات "تفاصيل المكان" أو تستخدمها بدلاً منها. تقدّم ورشة العمل الخاصة بأداة تحديد الموقع الجغرافي المتكاملة مثالاً على استخدام GeoJSON مع قاعدة بيانات لتخزين تفاصيل الموقع الجغرافي واستردادها.