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

نظرة عامة

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

تتوفّر "منصة خرائط Google" للويب (JS وTS) وAndroid وiOS. وتوفر أيضًا واجهات برمجة تطبيقات لخدمات الويب للحصول على معلومات عن الأماكن والاتجاهات والمسافات. النماذج الواردة في هذا الدليل مكتوبة لمنصة واحدة، ولكن يتم توفير روابط التوثيق لتنفيذها على منصات أخرى.

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

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

مخطط معماري
مخطط معماري (انقر للتكبير)

تمكين واجهات برمجة التطبيقات

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

لمزيد من المعلومات عن الإعداد، راجع الحصول على باستخدام Google Maps Platform.

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

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

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

ربط المواقع الجغرافية للمتاجر بأماكن "منصة خرائط 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 متوفّر أيضًا: 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

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

التعامل مع الإدخالات المكتوبة باستخدام الإكمال التلقائي

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

إذن المتصفّح للوصول إلى الموقع الجغرافي للمستخدم
طلب إذن متصفّح الويب (انقر للتكبير)

جارٍ تحديد أقرب المتاجر

يستخدم هذا المثال ما يلي: خدمة مصفوفة المسافة وMaps JavaScript API متوفّر أيضًا: واجهة برمجة التطبيقات لمصفوفة المسافة

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

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

تعمل خدمة مصفوفة المسافات وواجهة برمجة تطبيقات 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;
    });
}

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

جارٍ عرض معلومات المتجر

يستخدم هذا المثال: مكتبة الأماكن، واجهة برمجة تطبيقات JavaScript للخرائط متوفّر أيضًا: حزمة تطوير برامج الأماكن لأجهزة Android | حزمة تطوير برامج الأماكن لأجهزة iOS | واجهة برمجة تطبيقات الأماكن

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

بعد إجراء مكالمة مع Maps JavaScript API للحصول على "تفاصيل المكان" (Place Details)، يمكنك تصفية الاستجابة وعرضها.

يتم عرض خيارات المتجر
عرض خيارات المتجر (انقر للتكبير)

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

يعرض طلب "تفاصيل المكان" التالي العنوان والإحداثيات والموقع الإلكتروني رقم الهاتف والتقييم وساعات العمل لمعرّف المكان في 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 للخرائط متوفّر أيضًا: واجهة برمجة التطبيقات للاتجاهات خدمة ويب للاستخدام على Android وiOS، إما مباشرةً من التطبيق أو عن بُعد من خلال خادم وكيل

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

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

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

جارٍ إرسال الاتجاهات إلى الهاتف الجوّال

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

استخدام عناوين 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 في "خرائط Google" توفر خيارات إضافية لمعلمات طلب البحث، مثل travelmode dir_action=navigate لإطلاق الاتجاهات مع تفعيل ميزة التنقّل مفعَّلة.

هذا الرابط القابل للنقر، الذي يوسّع مثال عنوان URL أعلاه، يعيّن origin هو ملعب كرة قدم في لندن ويستخدمه travelmode=transit لتوفير اتجاهات النقل العام إلى الوجهة.

لإرسال رسالة نصية أو رسالة إلكترونية تتضمّن عنوان URL هذا، ننصح حاليًا باستخدام تطبيق تابع لجهة خارجية مثل twilio. إذا كنت تستخدم App Engine، يمكنك الاستعانة بشركات خارجية لإرسال رسائل SMS. الرسائل الإلكترونية أو الرسائل الإلكترونية. لمزيد من المعلومات، يُرجى مراجعة إرسال الرسائل باستخدام خدمات تابعة لأطراف ثالثة

عرض مواقعك الجغرافية على خريطة تفاعلية

استخدام الخرائط الديناميكية

يستخدم هذا المثال ما يلي: واجهة برمجة تطبيقات JavaScript للخرائط متوفّر أيضًا: 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:

أنماط الخرائط على مستوى المجال

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

في صفحة &quot;نمط الخريطة&quot;، ينقر الماوس على &quot;إنشاء نمط خريطة جديد&quot;. في صفحة
                صفحة نمط خريطة جديدة، ينقر الماوس على زر الاختيار بجوار كل
                الأنماط التالية المحسَّنة في المجال: السفر والخدمات اللوجستية والعقارات
                البيع بالتجزئة: وعندما يتم النقر فوق كل زر، يظهر وصف نمط الخريطة
                ومعاينة التغييرات.

التحكم في نقاط الاهتمام

تحدد هذه الرسوم المتحركة لون العلامة لنقاط الاهتمام إلى زيادة كثافة نقاط الاهتمام على نمط الخريطة. كلما زادت الكثافة، ظهور المزيد من علامات نقاط الاهتمام على الخريطة.

في صفحة &quot;نمط الخريطة&quot;، ينقر الماوس على &quot;إنشاء نمط خريطة جديد&quot;. في صفحة
              صفحة &quot;نمط خريطة جديدة&quot;، ضمن &quot;إنشاء نمطك الخاص&quot;، زرّ اختيار &quot;خرائط Google&quot;
              . ينقر الماوس على زر الاختيار Versa 3 لأسلوب Versa 3،
              ثم النقر على &quot;فتح&quot; في &quot;محرر الأنماط&quot;. في محرر الأنماط، يؤدي النقر على الماوس
              ميزة نقاط الاهتمام، ثم ينقر على العنصر &quot;رمز&quot;، مما يؤدي إلى تعيين
              اللون إلى الأحمر. يحدد الماوس بعد ذلك مربع اختيار &quot;كثافة نقطة الاهتمام&quot; والشرائح
              عنصر التحكم في الكثافة إلى اليمين للحصول على أقصى كثافة. المزيد والمزيد من الأحمر
              تظهر العلامات على معاينة الخريطة عند زيادة الكثافة. بعد ذلك يتحرك الماوس
              إلى الزر &quot;حفظ&quot;.

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

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