البدء

اتّبِع هذه الخطوات لإضافة "مكتبة السياقات المحلية" إلى مشروعك وإعداد عرض الخريطة المحلية.

تفعيل واجهات برمجة التطبيقات وحُزم تطوير البرامج (SDK) المطلوبة

لاستخدام "مكتبة السياقات المحلية"، يجب تفعيل Maps JavaScript API وMaps API. لتنفيذ ذلك، اتّبِع التعليمات لتفعيل واجهة برمجة تطبيقات واحدة أو أكثر أو حِزم تطوير برامج (SDK). تجدر الإشارة إلى أنّه يجب تفعيل واجهتَي برمجة التطبيقات في المشروع نفسه في Google Cloud Console.

تحميل "مكتبة السياقات المحلية"

لتحميل مكتبة السياق المحلية، يُرجى تحميل واجهة برمجة تطبيقات JavaScript للخرائط كالمعتاد، وتضمين المعلمات التالية:

  • يحمّل libraries=localContext مكتبة السياقات المحلية.
  • v=beta مطلوب لاستخدام هذا الإصدار.
  • يحتوي key على مفتاح واجهة برمجة التطبيقات.
  • تنفِّذ callback الدالة initMap().

يعرض المثال التالي علامة نص برمجي تتضمّن جميع الخيارات المذكورة أعلاه:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext&v=beta&callback=initMap">
</script>

إنشاء طريقة عرض جديدة للخريطة في السياق المحلي

لإضافة "مكتبة السياقات المحلية" إلى صفحة ويب، عليك أولاً إنشاء مثيل LocalContextMapView وإعداد السمات المطلوبة:

  • element - العنصر div الذي يجب عرض الخريطة فيه (في هذه الحالة، يُطلق عليه اسم "map").
  • placeTypePreferences - أنواع الأماكن التي يجب أن تعرضها "مكتبة السياق المحلية" (ما يصل إلى 10 أماكن)
  • maxPlaceCount - الحد الأقصى لعدد الأماكن المطلوب عرضها (1 - 24).
  • locationRestriction (اختياري) - لتقييد البحث عن المكان على موقع جغرافي معيّن الإعداد التلقائي لإطار عرض الخريطة.

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

TypeScript

let map: google.maps.Map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

window.initMap = initMap;
index.js

تأجيل تحميل بيانات السياق المحلي

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

// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
  });

//...

// Show places now.
localContextMapView.maxPlaceCount = 12;

إيقاف/تفعيل عرض واجهة المستخدم للسياق المحلي

يمكنك تبديل عناصر واجهة مستخدم "السياق المحلي" عن طريق ضبط خيار LocalContextMapView maxPlaceCount على 0. لعرض واجهة مستخدم السياق المحلي مرة أخرى، اضبط maxPlaceCount على قيمة 1 أو أكثر.

ضبط الحد الأدنى لأبعاد الخريطة

تغيّر "مكتبة السياقات المحلية" الاستجابة بالاستناد إلى حجم شاشة LocalContextMapView. الحد الأدنى للأبعاد المتوافقة مع LocalContextMapView هو:

  • 300 بكسل × 480 بكسل (عمودي)
  • 480 بكسل × 380 بكسل (أفقي)

عندما ينخفض العنصر المضمّن في LocalContextMapView عن الحد الأدنى للسمات المتوافقة، لا تظهر عناصر "مكتبة السياقات المحلية"، بما في ذلك أداة اختيار المكان ونقاط الاهتمام. يؤثّر مستوى تكبير/تصغير المتصفّح في الحدّ الأدنى للأبعاد المتوافقة، على سبيل المثال: إذا تم تكبير نافذة المتصفّح بنسبة %200، سيكون الحد الأدنى للأبعاد المتوافقة هو 600 × 960 (عمودي) و960 × 760 (أفقي).

اقتراحات لخدمة مقارنة الأسعار

فئات CSS في DOM Library Context Library ليست جزءًا من Perspective API، كما أنّ تصميم النمط أو تعديله أو اختياره غير متاح ضمن DOM Library Library Library. ننصحك بشدة باتّباع الإرشادات التالية لتجنّب حدوث تعارض في أنماط DOM والتأكّد من عرض صفحة "مكتبة السياقات المحلية" بشكل صحيح:

  • ولا تستخدم فئات CSS لـ "مكتبة السياقات المحلية"، لأنها قد تتغير بدون إشعار.
  • لا تضع نمطًا أو عدِّل أو اختَر عناصر في إطار DOM لمكتبة محلية.

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

على سبيل المثال، إذا كنت تريد تغيير الصفحة الرئيسية box-sizing إلى border-box:

  • استخدام عمليات التجاوز box-sizing التي تضبط العنصر <html> على border-box
  • استخدم box-sizing: initial للعنصر الذي يحتوي على عرض خريطة مكتبة السياقات المحلية.
  • يمكنك استخدام box-sizing: inherit لجميع العناصر الأخرى.

ويضمن ذلك إعادة ضبط box-sizing DOM لمكتبة الملفات المحلية على الإعدادات التلقائية العادية باستخدام أداة اختيار منخفضة الدقة.

في ما يلي الشكل الذي يظهر به الرمز:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

.container-for-google-maps {
  box-sizing: initial;
}