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

نظرة عامة

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

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

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

لتنفيذ أداة "تحديد موقع المنتج"، يجب تفعيل واجهات برمجة التطبيقات التالية في Google Cloud Console. تنتقل لك الارتباطات التشعبية التالية إلى Google Cloud Console لتمكين كل واجهة برمجة تطبيقات للمشروع المحدد:

• واجهة برمجة تطبيقات JavaScript للخرائط
• واجهة برمجة تطبيقات الأماكن
• واجهة برمجة تطبيقات الترميز الجغرافي
• واجهة برمجة التطبيقات لمصفوفة المسافات
• واجهة برمجة تطبيقات الاتجاهات

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

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

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

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

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

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

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

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

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

يستخدم هذا المثال ما يلي: خدمة مصفوفة المسافة و"واجهة برمجة تطبيقات JavaScript للخرائط"

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

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

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

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

يمكنك عرض حالة مخزون المنتج لكل موقع قريب بناءً على قاعدة بيانات مخزونك.

يستخدم هذا المثال: مكتبة الأماكن، وواجهة برمجة تطبيقات JavaScript للخرائط

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

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

بعد إجراء اتصال بواجهة 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);
  }
}

---

تحسين محدد مواقع المنتجات

بناءً على احتياجات عملك أو المستخدمين، يمكنك تحسين تجربة المستخدم بشكل أكبر.

يستخدم هذا المثال ما يلي: Maps JavaScript API Directions Service

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

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

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

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

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

استخدِم عناوين URL للخرائط لإنشاء عنوان 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 للخرائط خيارات إضافية لمَعلمات طلب البحث، مثل 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 للخرائط.)

للحصول على معلومات مفصّلة، يُرجى الاطّلاع على مستندات العلامات الخاصة بJavaScript (الويب) وAndroid وiOS.

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

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

يمكنك إنشاء أنماط خرائط أو تعديلها في صفحة أنماط الخرائط على Google Cloud Console في مشروعك.

لكل نمط خريطة معرّفه الخاص. بعد نشر نمط في Cloud Console، تشير إلى معرّف الخريطة هذا في الرمز البرمجي، ما يعني أنّه يمكنك تعديل نمط الخريطة في الوقت الفعلي بدون إعادة تنظيم تطبيقك. سيظهر الشكل الجديد تلقائيًا في التطبيق الحالي وسيتم استخدامه على جميع الأنظمة الأساسية. توضِّح الأمثلة التالية كيفية إضافة معرّف خريطة إلى صفحة ويب باستخدام Maps JavaScript API.

من خلال تضمين 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 مع قاعدة بيانات لتخزين تفاصيل الموقع الخاصة بك واستردادها.