محدد موقع المنتجات - دليل التنفيذ

نظرة عامة

عندما يرى المستخدمون منتجاتك على الإنترنت، يريدون العثور على أفضل طريقة وأسهلها للحصول على طلبهم. إنّ دليل تنفيذ "أداة البحث عن المنتجات" ونصائح التخصيص التي نقدّمها في هذا الموضوع هي ما ننصح به كأحد التركيبات المثلى لواجهات برمجة التطبيقات في "منصّة خرائط Google" لإنشاء تجارب رائعة لمستخدمي أداة البحث عن المنتجات.

باتّباع دليل التنفيذ هذا، يمكنك مساعدة العملاء في الاطّلاع على العميد المفصّل الذي يحتاجون إليه للعثور على منتجاتك، وتزويدهم بالاتجاهات إلى المتجر الذي يبيع السلع التي يبحثون عنها، سواء كانوا يستخدِمون السيارة أو الدراجة أو السير على الأقدام أو وسائل النقل العام.

تفعيل واجهات برمجة التطبيقات

لتنفيذ Product Locator، عليك تفعيل واجهات برمجة التطبيقات التالية في Google Cloud Console. تنقلك الروابط الفائقة التالية إلى Google Cloud Console لتفعيل كل واجهة برمجة تطبيقات للمشروع الذي اخترته:

• واجهة برمجة تطبيقات JavaScript في خرائط Google
• Places API
• Geocoding API
• Distance Matrix API
• Directions API

لمزيد من المعلومات عن الإعداد، يُرجى الاطّلاع على مقالة بدء استخدام "منصة خرائط Google".

أقسام دليل التنفيذ

في ما يلي عمليات التنفيذ والتخصيصات التي سنتناولها في هذا الموضوع.

• check_circle_filled يشير رمز علامة الاختيار إلى خطوة تنفيذ أساسية.
• stars رمز النجمة هو تخصيص اختياري، ولكن يُنصح به لتحسين الحلّ.

check_circle_filled	ربط مواقع المتاجر بأماكن "منصة خرائط Google"	مطابقة موقع متجر مع مكان في Google Maps Platform
check_circle_filled	تحديد الموقع الجغرافي للمستخدم	أضِف وظيفة الكتابة أثناء الانتقال لتحسين تجربة المستخدم على جميع المنصات وتحسين دقة العنوان باستخدام الحد الأدنى من ضغطات المفاتيح.
check_circle_filled	تحديد أقرب المتاجر	احتساب مسافة التنقّل ووقت التنقّل من وجهات و مصادر متعددة، مع تحديد وسائل النقل المختلفة اختياريًا، مثل المشي أو القيادة أو النقل العام أو ركوب الدراجات
check_circle_filled	عرض معلومات المتجر	عرض معلومات غنية بالبيانات في متاجرك، لكي يتمكّن المستخدمون من الانتقال إليها بسهولة أكبر
stars	تقديم اتجاهات التنقّل	الحصول على بيانات الاتجاهات من نقطة الانطلاق إلى الوجهة باستخدام وسائل نقل مختلفة مثل المشي والقيادة وركوب الدراجات ووسائل النقل العام
stars	إرسال الاتجاهات إلى الجهاز الجوّال	بالإضافة إلى عرض الاتجاهات على صفحتك الإلكترونية، يمكنك أيضًا إرسال الاتجاهات إلى هاتف المستخدم للتنقّل باستخدام "خرائط Google" أثناء التنقّل.
stars	عرض مواقعك الجغرافية على خريطة تفاعلية	أنشئ علامات مخصّصة على الخريطة لتمييز مواقعك الجغرافية، واختَر أسلوبًا للخريطة يناسب ألوان علامتك التجارية. يمكنك عرض (أو إخفاء) نقاط استقطاب معيّنة على خريطتك لمساعدة المستخدمين في التعرّف على اتجاهاتهم بشكل أفضل، والتحكّم في كثافة نقاط الاهتمام لتجنّب تشويش الخريطة.
stars	دمج بيانات المواقع الجغرافية المخصّصة مع "تفاصيل المكان"	يمكنك دمج تفاصيل الموقع الجغرافي المخصّصة مع تفاصيل الأماكن لمنح المستخدمين مجموعة غنية من البيانات لاتخاذ القرارات.

الحصول على أرقام تعريف الأماكن

يستخدِم هذا المثال: Places API

متاحة أيضًا: JavaScript

قد تتوفّر لديك قاعدة بيانات لمتاجرك تتضمّن معلومات أساسية، مثل اسم هذا الموقع الجغرافي وعنوانه ورقم هاتفه، وتريد ربطه بمكان في "منصّة خرائط Google" كمجموعة من الوجهات النهائية التي يمكن للمستخدمين استلام المنتجات فيها. للحصول على المعلومات التي تتضمّنها منصة خرائط 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_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 Maps Platform على الأجهزة الجوّالة والويب. عندما يكتب المستخدم عنوانًا، تملأ ميزة الإكمال التلقائي الباقي من خلال استخدام التطبيقات المصغّرة. يمكنك أيضًا توفير وظائف الإكمال التلقائي الخاصة بك باستخدام مكتبات "الأماكن" مباشرةً.

في المثال التالي، أضِف مكتبة "الإكمال التلقائي للأماكن" إلى موقعك الإلكتروني من خلال إضافة المَعلمة 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(). يأخذ هذا الإجراء الشكل الهندسي للنتيجة المطابقة التي هي الموقع الجغرافي للمستخدم، ثم يبحث عن أقرب المواقع الجغرافية استنادًا إلى هذه الإحداثيات باعتبارها نقطة الأصل، كما هو موضّح في القسم تحديد أقرب المتاجر.

استخدام الموقع الجغرافي للمتصفح

لطلب الموقع الجغرافي لمتصفّح HTML5 ومعالجته، اطّلِع على كيفية تفعيل نافذة استخدام موقعي الجغرافي:

يستخدِم هذا المثال ما يلي: خدمة Distance Matrix وMaps JavaScript API

تتوفّر أيضًا: Distance Matrix API

بعد الحصول على الموقع الجغرافي للمستخدم، يمكنك مقارنته بمواقع متاجرك. من خلال استخدام خدمة Distance Matrix وMaps JavaScript API، يمكنك مساعدة المستخدمين في اختيار الموقع الجغرافي الأنسب لهم حسب وقت القيادة أو المسافة على الطريق.

الطريقة العادية لتنظيم قائمة المواقع الجغرافية هي ترتيبها حسب المسافة. غالبًا ما يتم احتساب هذه المسافة ببساطة باستخدام الخط المستقيم من المستخدم إلى الموقع الجغرافي، ولكن قد يكون ذلك مضلِّلاً. قد يمر الخط المستقيم فوق نهر لا يمكن عبوره أو عبر طرق مزدحمة في وقت قد يكون فيه مكان آخر أكثر ملاءمةً. هذا مهم عندما يكون لديك عدة مواقع جغرافية ضمن بضعة كيلومترات من بعضها.

تعمل خدمة Distance Matrix وواجهة برمجة التطبيقات JavaScript لـ "خرائط Google" من خلال أخذ قائمة بالمواقع الجغرافية للمصدر والوجهة وعرض ليس فقط مسافة التنقّل ولكن أيضًا الوقت المستغرَق بين الموقعَين. في حال المستخدم، سيكون نقطة المصدر هي مكانه الحالي أو نقطة البداية المطلوبة، ونقاط الوجهة ستكون مواقع جغرافية. يمكن تحديد نقاط المصدر والوجهة على أنّها أزواج إحداثيات أو عناوين. وعند طلب الخدمة، تطابق الخدمة العناوين. يمكنك استخدام Distance Matrix Service وMaps JavaScript API مع مبادئ إضافية لعرض النتائج استنادًا إلى أوقات القيادة الحالية أو المستقبلية.

يستدعي المثال التالي Distance Matrix Service و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

تتوفّر أيضًا: حزمة تطوير برامج "الأماكن" لنظام التشغيل Android | حزمة تطوير برامج "الأماكن" لأجهزة iOS | Places API

يمكنك مشاركة تفاصيل مفيدة عن المكان، مثل معلومات الاتصال وساعات العمل وحالة الافتتاح الحالية، لمساعدة العملاء في اختيار موقعهم الجغرافي المفضّل أو إكمال طلبهم.

بعد إجراء طلب إلى واجهة برمجة التطبيقات JavaScript لـ "خرائط Google" للحصول على تفاصيل الأماكن، يمكنك فلترة الردّ وعرض بياناته.

لطلب "تفاصيل المكان"، ستحتاج إلى رقم تعريف المكان لكل موقع جغرافي. اطّلِع على الحصول على معرّفات الأماكن لاسترداد معرّف المكان الذي تريده.

يعرض طلب "تفاصيل المكان" التالي العنوان والإحداثيات والموقع الإلكتروني ورقم الهاتف والتقييم وساعات العمل لـ Google London place ID:

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 لخرائط Google

تتوفّر أيضًا: Directions API خدمة ويب لاستخدامها على Android وiOS، إما مباشرةً من التطبيق أو عن بُعد من خلال خادم وكيل

عندما تعرض للمستخدمين الاتجاهات من داخل موقعك الإلكتروني أو تطبيقاتك، لن يحتاجوا إلى الانتقال بعيدًا عن موقعك الإلكتروني والانشغال بصفحات أخرى أو الاطّلاع على المنافسين على الخريطة. يمكنك أيضًا عرض انبعاثات الكربون المُنتجة من طريقة السفر المحدّدة وعرض تأثير أي رحلة معيّنة باستخدام مجموعة data كربون قد تمتلكها.

تتضمّن خدمة "الاتجاهات" أيضًا دوالّ تتيح لك معالجة النتائج وعرضها بسهولة على الخريطة.

في ما يلي مثال على عرض لوحة الاتجاهات. لمزيد من المعلومات عن العيّنة، اطّلِع على عرض الاتجاهات النصية.

لتسهيل وصول المستخدمين إلى موقع جغرافي، يمكنك إرسال رابط للاتّجاهات إليهم عبر الرسائل النصية أو البريد الإلكتروني. عند النقر عليه، سيتم تشغيل تطبيق "خرائط 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.

<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
});
}

بالنسبة إلى أداة تحديد الموقع الجغرافي، تكون عادةً مهتمًا بضبط الموقع الجغرافي الأولي، ونقطة المركز أو الحدود، ومستوى التكبير/التصغير (مقدار تكبير الخريطة في ذلك الموقع الجغرافي). إنّ معظم العناصر الأخرى، مثل ضبط عناصر التحكّم، اختيارية لأنّك تحدد مستوى التفاعل مع الخريطة.

تخصيص الخريطة

يمكنك تغيير مظهر الخريطة وتفاصيلها بعدة طرق. على سبيل المثال، يمكنك إجراء ما يلي:

• أنشئ علامات مخصّصة لاستبدال الدبابيس التلقائية على الخريطة.
• يمكنك تغيير ألوان عناصر الخريطة لتعكس علامتك التجارية.
• يمكنك التحكّم في نقاط الاهتمام التي تعرضها (مثل المعالم السياحية وأماكن الطعام والإقامة وما إلى ذلك) وكثافتها، ما يتيح لك جذب انتباه المستخدمين إلى مواقعك الجغرافية مع تسليط الضوء على المعالم التي تساعد المستخدمين في الوصول إلى أقرب موقع جغرافي.

إنشاء علامات خرائط مخصّصة

يمكنك تخصيص العلامات من خلال تغيير اللون التلقائي (الذي قد يشير إلى ما إذا كان الموقع الجغرافي مفتوحًا حاليًا) أو استبدال العلامة بأحد الصور المخصّصة، مثل شعار علامتك التجارية. يمكن أن تقدّم نوافذ المعلومات أو النوافذ المنبثقة معلومات إضافية للمستخدمين، مثل ساعات العمل أو رقم الهاتف أو حتى الصور. يمكنك أيضًا إنشاء علامات مخصّصة بتنسيقات نقطية ومتجهة وقابلة للسحب وحتى متحركة.

في ما يلي نموذج خريطة يستخدم علامات مخصّصة. (اطّلِع على رمز المصدر في موضوع العلامات المخصّصة لواجهة برمجة التطبيقات Maps JavaScript API).

للحصول على معلومات تفصيلية، اطّلِع على مستندات العلامات لنظامَي التشغيل JavaScript (الويب) و Android و iOS.

تصميم خريطتك

تتيح لك Google Maps Platform تصميم خريطتك بطرق تساعد المستخدمين في العثور على أقرب موقع جغرافي والوصول إليه في أسرع وقت ممكن، كما تساعدك في تعزيز علامتك التجارية. على سبيل المثال، يمكنك تغيير ألوان الخريطة لتتطابق مع علامتك التجارية، ويمكنك تقليل مصادر التشتيت على الخريطة من خلال التحكّم في نقاط الاهتمام التي تظهر للمستخدمين. توفّر منصة "خرائط Google" أيضًا عددًا من نماذج البدء للخريطة، تم تحسين بعضها لمجالات مختلفة، مثل السفر والخدمات اللوجستية والعقارات والبيع بالتجزئة.

يمكنك إنشاء أنماط الخرائط أو تعديلها في صفحة أنماط الخرائط في Google 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.

في القسم السابق عرض مواقعك الجغرافية على خريطة تفاعلية ، ناقشنا استخدام "تفاصيل المكان" لتزويد المستخدمين بمعلومات مفيدة عن مواقعك الجغرافية، مثل ساعات العمل والصور والمراجعات.

من المفيد معرفة تكلفة استخدام حقول البيانات المختلفة في "تفاصيل المكان"، والتي يتم تصنيفها على أنّها "أساسية" و"معلومات الاتصال" و"معلومات عن الجو". لإدارة التكاليف، يمكنك اتّباع استراتيجية الجمع بين المعلومات التي لديك حاليًا عن مواقعك الجغرافية والمعلومات الجديدة (عادةً البيانات الأساسية وبيانات الاتصال) من "خرائط Google"، مثل الإغلاق المؤقت، وساعات العمل خلال الأعياد، وتقييمات المستخدمين وصورهم ومراجعاتهم. إذا كانت لديك معلومات الاتصال بمتاجرك، لن تحتاج إلى طلب هذه الحقول من تفاصيل المكان، ويمكنك حصر طلبك على جلب حقول ข้อมูล أساسي أو دفء فقط، وذلك حسب ما تريد عرضه.

قد تكون لديك بيانات أماكن خاصة بك يمكنك استخدامها بدلاً من تفاصيل الأماكن أو كمكمل لها. يقدّم مختبر الرموز البرمجية لنظام تحديد الموقع الجغرافي الكامل مثالاً على استخدام GeoJSON مع قاعدة بيانات لتخزين تفاصيل موقعك الجغرافي واستردادها.