حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

استخدام حزمة أدوات واجهة مستخدم "الأماكن" لمستخدمي Places API الحاليين

تعلَّف على كيفية نقل عملية التنفيذ الحالية لواجهة برمجة التطبيقات للأماكن Places API أو فئة المكان Place Class إلى مكوّنات حزمة أدوات "خرائط Google" الجاهزة للأماكن components.

الفئات المعنيّة بهذا الدليل

هذا الدليل مخصّص للمطوّرين الذين لديهم عملية تنفيذ حالية تستخدم Places API ويريدون تعديل الرمز البرمجي لاستخدام حزمة أدوات "خرائط Google" الجاهزة للأماكن. سيكون هذا الدليل مفيدًا لك بشكل خاص إذا كنت:

تُرسِل طلبات HTTP إلى نقاط نهاية Places API (الجديدة أو القديمة)
تستخدم فئة المكان ضِمن Maps JavaScript API
تعالج الردّ من واجهة برمجة التطبيقات لعرض معلومات المكان في واجهة مستخدم تطبيق الويب

المتطلبات الأساسية

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

تعديل طريقة تحميل Maps JavaScript API

تتطلّب حزمة أدوات "خرائط Google" الجاهزة للأماكن طريقة استيراد المكتبة الديناميكية لتحميل Maps JavaScript API. إذا كنت تستخدم علامة تحميل النص البرمجي المباشر ، يجب تعديلها.

بعد تعديل النص البرمجي لتحميل Maps JavaScript API، استورِد المكتبات المطلوبة لاستخدام حزمة أدوات "خرائط Google" الجاهزة للأماكن.

تنفيذ عنصر "تفاصيل المكان"

عنصر تفاصيل المكان وعنصر تفاصيل المكان المصغّر هما عنصران HTML يعرضان تفاصيل مكان معيّن.

عملية التنفيذ الحالية

يمكنك إجراء طلب "تفاصيل المكان" باستخدام طلب HTTP أو استخدام فئة المكان في JavaScript API.
يمكنك تحليل الردّ من واجهة برمجة التطبيقات وعرض تفاصيل المكان باستخدام HTML وCSS.

نقل البيانات إلى عنصر "تفاصيل المكان"

تعديل بنية HTML

حدِّد حاوية HTML التي يتم فيها عرض تفاصيل المكان. استبدِل عناصر HTML المخصّصة (مثل divs وspans للاسم والعنوان والصور وما إلى ذلك) بعلامة HTML لعنصر "تفاصيل المكان".

يمكنك الاختيار من بين عنصرَين:

عنصر "تفاصيل المكان" المصغّر
عنصر "تفاصيل المكان"

لمزيد من المعلومات حول العنصر الذي يجب استخدامه، يُرجى الاطّلاع على عنصر "تفاصيل المكان".

قد تبدو علامة HTML الحالية على النحو التالي:

<div id="my-place-details-container">
    <h2 id="place-name"></h2>
    <p id="place-address"></p>
    <img id="place-photo" src="" alt="Place photo">
    <!-- ... more custom elements -->
</div>

مثال على علامة HTML الجديدة التي تحدّد بوضوح المحتوى المطلوب عرضه:

<gmp-place-details-compact orientation="horizontal" truncation-preferred style="display: none;">
    <gmp-place-details-place-request></gmp-place-details-place-request>
    <gmp-place-content-config>
        <gmp-place-media lightbox-preferred></gmp-place-media>
        <gmp-place-address></gmp-place-address>
        <gmp-place-rating></gmp-place-rating>
        <gmp-place-type></gmp-place-type>
        <gmp-place-price></gmp-place-price>
        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
        <gmp-place-open-now-status></gmp-place-open-now-status>
    </gmp-place-content-config>
</gmp-place-details-compact>

تكييف منطق JavaScript

المنطق الحالي

من المحتمل أن يتضمّن المنطق الحالي ما يلي:

استرداد رقم تعريف المكان
استخدام PlacesService().getDetails() أو إجراء طلب إلى خدمة الويب
تحديد مصفوفة حقول (بالنسبة إلى JavaScript API) أو FieldMask (بالنسبة إلى خدمة الويب) لطلب بيانات معيّنة
في عملية حلّ ردّ الاتصال، يمكنك اختيار عناصر HTML يدويًا وملؤها بالبيانات المستلَمة.

في ما يلي مثال على كيفية تنفيذ "تفاصيل المكان":

async function getPlaceDetails(placeId) {
    const { Place } = await google.maps.importLibrary('places');
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: placeId
    });
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);
}

المنطق الجديد

سيتضمّن المنطق الجديد ما يلي:

استرداد رقم تعريف المكان أو عنصر المكان
الحصول على مرجع لعنصر <gmp-place-details-place-request>
مرِّر رقم تعريف المكان أو عنصر المكان إلى السمة `place` في عنصر <gmp-place-details-place-request>.

في ما يلي مثال على كيفية تنفيذ حزمة أدوات "خرائط Google" الجاهزة لعرض تفاصيل المكان في منطق JavaScript: احصل على مرجع لعنصر "تفاصيل المكان". إذا كان هذا العنصر موجودًا، احصل على مرجع لعنصر "طلب المكان في تفاصيل المكان"، واضبط السمة `place` باستخدام رقم تعريف المكان. في مثال رمز HTML أعلاه، تم ضبط نمط عنصر "تفاصيل المكان" على display: none. تم تعديل هذا النمط إلى display: block.

function displayPlaceDetailsWithUIKit(placeId) {
  const placeDetailsElement = document.querySelector('gmp-place-details-compact');
  if (placeDetailsElement) {
    const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
    // Configure the element with the Place ID
    placeDetailsRequest.place = placeId
    placeDetailsElement.style.display = 'block';
    console.log("PlaceDetailsElement configured for place:", placeId);
  } else {
    console.error("PlaceDetailsElement not found in the DOM.");
  }
}

// Example usage:
const placeId = 'ChIJC8HakaIRkFQRiOgkgdHmqkk';
displayPlaceDetailsWithUIKit(placeId);

تنفيذ عنصر البحث عن الأماكن

عنصر البحث عن الأماكن هو عنصر HTML يعرض نتائج البحث عن الأماكن في قائمة.

عملية التنفيذ الحالية

يمكنك إجراء "بحث نصي" أو "بحث في الجوار" باستخدام طلب HTTP أو استخدام فئة المكان في JavaScript API.
يمكنك تحديد مَعلمات طلب البحث أو قيود الموقع الجغرافي أو التحيزات أو الأنواع والحقول المطلوبة باستخدام FieldMask.
يمكنك تحليل الردّ من واجهة برمجة التطبيقات وتكرار مصفوفة الأماكن وإنشاء عناصر قائمة HTML يدويًا.

نقل البيانات إلى عنصر "البحث عن الأماكن"

تعديل بنية HTML

حدِّد حاوية HTML التي تعرض فيها قائمة الأماكن. استبدِل عناصر HTML المخصّصة (مثل divs وspans للاسم والعنوان وما إلى ذلك) بعنصر HTML للبحث عن الأماكن.

قد تبدو علامة HTML الحالية على النحو التالي:

<div id="search-results-area">
    <h3>Nearby Places:</h3>
    <ul id="manual-places-list">
        <!-- JavaScript would dynamically insert list items here -->
        <!-- Example of what JS might generate:
    <li class="place-entry" data-place-id="SOME_PLACE_ID_1">
      <img class="place-icon" src="icon_url_1.png" alt="Icon">
      <span class="place-name">Place Name One</span> -
      <span class="place-vicinity">123 Main St</span>
    </li>
    <li class="place-entry" data-place-id="SOME_PLACE_ID_2">
      <img class="place-icon" src="icon_url_2.png" alt="Icon">
      <span class="place-name">Place Name Two</span> -
      <span class="place-vicinity">456 Oak Ave</span>
    </li>
    -->
        <li class="loading-message">Loading places...</li>
    </ul>
</div>

يتم تنفيذ عنصر "البحث عن الأماكن" باستخدام المكوّن <gmp-place-search>. لضبط نوع البحث، أدرِج أحد مكوّنات الإعدادات التالية في الفتحة الداخلية:

<gmp-place-text-search-request> لإجراء "بحث نصي"
<gmp-place-nearby-search-request> لإجراء "بحث في الجوار"

لتحديد كيفية عرض النتائج، يمكنك استخدام الاختصار <gmp-place-all-content> أو تقديم مجموعة خاصة بك من مكوّنات العرض الفردية. يمكن ضبط السمات الرئيسية، مثل selectable (للسماح بالنقر على عناصر القائمة) وorientation (للتنسيق الأفقي أو العمودي)، مباشرةً على المكوّن الرئيسي.

مثال على "بحث في الجوار"

<gmp-place-search orientation="horizontal" selectable>
    <gmp-place-all-content> </gmp-place-all-content>
    <gmp-place-nearby-search-request></gmp-place-nearby-search-request>
</gmp-place-search>

مثال على "بحث نصي"

<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-all-content> </gmp-place-all-content>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

تكييف منطق JavaScript

في JavaScript، احصل على مرجع لمكوّن التحكّم في البحث باستخدام document.querySelector(). بناءً على الإعداد، سيكون هذا العنصر إما <gmp-place-text-search-request> أو <gmp-place-nearby-search-request>.

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

بالنسبة إلى "البحث النصي" (<gmp-place-text-search-request>)، تكون السمة الرئيسية هي textQuery:

const textSearchController = document.querySelector('gmp-place-text-search-request');
textSearchController.textQuery = 'museums in London';

بالنسبة إلى "البحث في الجوار" (<gmp-place-nearby-search-request>)، يجب تحديد منطقة البحث باستخدام locationRestriction. يمكنك بعد ذلك استخدام includedTypes لفلترة أنواع معيّنة من الأماكن ضِمن تلك المنطقة:

const nearbySearchController = document.querySelector('gmp-place-nearby-search-request');
nearbySearchController.locationRestriction = new google.maps.Circle({
    center: { lat: 51.5190, lng: -0.1347 },
    radius: 1000
});
nearbySearchController.includedTypes = ['restaurant'];

يبدأ المكوّن الرئيسي <gmp-place-search> تلقائيًا عملية بحث جديدة بمجرد ضبط الخصائص المطلوبة لوحدة التحكّم.

بالنسبة إلى "البحث النصي"، يتم تشغيل البحث في اللحظة التي تُعيِّن فيها قيمة لـ textQuery.
بالنسبة إلى "البحث في الجوار"، يتم تشغيل البحث بعد تقديم locationRestriction صالح.

تنفيذ عنصر "الإكمال التلقائي الأساسي للأماكن"

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

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

لا يعرض هذا العنصر أي تفاصيل بنفسه أو يقدّم أي معلومات أخرى يمكن الوصول إليها آليًا.

عملية التنفيذ الحالية

من المحتمل أن يتضمّن المنطق الحالي ما يلي:

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

نقل البيانات إلى عنصر "الإكمال التلقائي للأماكن"

تعديل بنية HTML

حدِّد عنصر HTML الذي تربط به أداة "الإكمال التلقائي" وأزِله. من المحتمل أن يكون هذا العنصر حقل إدخال HTML عاديًا.

<input id="pac-input" type="text" placeholder="Search for a location" />

مثال على علامة HTML الجديدة التي تستخدم طريقة مكوّن الويب لتهيئة عنصر "الإكمال التلقائي الأساسي للأماكن" على صفحتك:

<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>

تكييف منطق JavaScript

من المحتمل أن يتضمّن منطق JavaScript إنشاء أداة الإكمال التلقائي المرتبطة بعنصر input HTML. بعد ذلك، تستمع هذه الأداة إلى الحدث place_changed، ما يؤدي إلى تشغيل إجراء باستخدام البيانات التي تم إرجاعها.

مثال على JavaScript الحالي المطلوب إزالته:

// Get the input element
const input = document.getElementById("pac-input");

// Create the Autocomplete widget instance
const autocomplete = new google.maps.places.Autocomplete(input, {
  fields: ["place_id", "geometry", "name"]
});

// Add a listener for the 'place_changed' event
autocomplete.addListener("place_changed", () => {
  // Your logic to get and display place information
  console.log(place.place_id);
});

سيحصل منطق JavaScript الجديد على مرجع لعنصر "الإكمال التلقائي الأساسي للأماكن"، وسيستمع إلى أحداث gmp-select:

const placeAutocomplete = document.querySelector('gmp-basic-place-autocomplete');

placeAutocomplete.addEventListener('gmp-select', (event) => {
  console.log(event.place);
});

عند اختيار مكان في القائمة المنسدلة "الإكمال التلقائي"، سيتم تشغيل الحدث gmp-select. يمكن استرداد رقم تعريف المكان المحدّد من عنصر event. يمكن بعد ذلك استخدام رقم تعريف المكان لتهيئة مثال على عنصر تفاصيل المكان لعرض تفاصيل المكان المحدّد.

التعامل مع التخصيص

تخصيص عنصر "تفاصيل المكان"

الاتجاه

يمكن عرض عنصر "تفاصيل المكان" في الاتجاهَين الأفقي والعمودي. استخدِم السمة orientation في gmp-place-details-compact للاختيار بين الاتجاهَين العمودي والأفقي. على سبيل المثال:

<gmp-place-details-compact orientation="vertical">

اختيار الحقول المطلوب عرضها

استخدِم عناصر المحتوى لتحديد المحتوى المطلوب عرضه ضِمن عنصر "تفاصيل المكان". على سبيل المثال، سيؤدي استبعاد عنصر المحتوى <gmp-place-type> إلى إيقاف عرض عنصر "تفاصيل المكان" لنوع المكان المحدّد للمكان. للاطّلاع على قائمة كاملة بعناصر المحتوى، يُرجى الرجوع إلى مستندات مرجع PlaceContentConfigElement.

لا تؤدي إضافة حقول إلى عنصر "تفاصيل المكان" أو إزالتها منه إلى تغيير تكلفة عرض العنصر على الصفحة.

ضبط أنماط CSS

تتوفّر خصائص CSS مخصّصة لضبط ألوان العنصر وخطوطه. على سبيل المثال، لضبط خلفية العنصر على اللون الأخضر، اضبط خاصية CSS التالية:

gmp-place-details-compact {
  --gmp-mat-color-surface: green;
}

لمزيد من التفاصيل، يُرجى الاطّلاع على المستندات المرجعية لـ PlaceDetailsCompactElement.

تخصيص عنصر البحث عن الأماكن

الاتجاه

يمكن عرض عنصر "البحث عن الأماكن" في الاتجاهَين الأفقي والعمودي. استخدِم السمة orientation في <gmp-place-search> للاختيار بين الاتجاهَين العمودي والأفقي. على سبيل المثال:

<gmp-place-search orientation="horizontal" selectable>

اختيار الحقول المطلوب عرضها

استخدِم عناصر المحتوى لتحديد المحتوى المطلوب عرضه ضِمن عنصر "البحث عن مكان". يمكن استخدام العنصر <gmp-place-all-content> لعرض كل المحتوى، أو يمكن استخدام مجموعة من علامات HTML لضبط المحتوى المعروض.

سيؤدي تضمين <gmp-place-address> ضِمن <gmp-place-content-config> إلى عرض العنوان فقط لكل مكان، على سبيل المثال:

<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-content-config>
    <gmp-place-address></gmp-place-address>
  </gmp-place-content-config>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

تخصيص عنصر "الإكمال التلقائي الأساسي للأماكن"

ضبط أنماط CSS

تتوفّر خصائص CSS مخصّصة لتخصيص مظهر عنصر "الإكمال التلقائي". على سبيل المثال، لضبط لون الخلفية على اللون الأرجواني الفاتح، عليك ضبط خاصية background-color في العنصر.

gmp-basic-place-autocomplete {
  background-color: #d993e6;
}

لمزيد من التفاصيل، يُرجى الاطّلاع على المستندات المرجعية لـ BasicPlaceAutocompleteElement.

التعامل مع الأحداث والبيانات

مكوّنات حزمة أدوات "خرائط Google" الجاهزة للأماكن هي مكوّنات تفاعلية تتيح لك الاستماع إلى الأحداث واسترداد البيانات آليًا.

الاستماع إلى الأحداث

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

حدث الاختيار

gmp-select: يتم تشغيل هذا الحدث عندما يُجري المستخدم اختيارًا.
- في عنصر البحث عن الأماكن، يتم تشغيله عندما ينقر المستخدم على مكان في قائمة النتائج.
- في عنصر الإكمال التلقائي الأساسي للأماكن، يتم تشغيله عندما ينقر المستخدم على توقّع في القائمة المنسدلة.

الأحداث الشائعة

تتوافق عناصر "البحث عن الأماكن" و"تفاصيل المكان" و"الإكمال التلقائي الأساسي للأماكن" مع الأحداث التالية:

gmp-load: يتم تشغيله عند اكتمال تحميل العنصر ومحتواه وعرضهما.
gmp-requesterror: يتم تشغيله عندما يتعذّر تنفيذ طلب إلى الخادم، مثلاً بسبب مفتاح واجهة برمجة تطبيقات غير صالح.

الوصول إلى بيانات العنصر آليًا

يمكنك استرداد بيانات معيّنة من العناصر آليًا بعد التفاعل معها أو تحميلها.

بالنسبة إلى عنصرَي "البحث عن الأماكن" و"تفاصيل المكان"، يمكنك استرداد المعلومات التالية:
- رقم تعريف المكان
- الموقع الجغرافي (خط العرض وخط الطول)
- إطار العرض
بالنسبة إلى عنصر "الإكمال التلقائي الأساسي للأماكن"، يمكنك استرداد المعلومات التالية:
- رقم تعريف المكان

لا يمكن الوصول آليًا إلى جميع البيانات الأخرى المضمّنة في العناصر.

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

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

عنصر "تفاصيل المكان"

بالنسبة إلى عنصر "تفاصيل المكان"، ابدأ بالتأكّد من عرض التفاصيل بشكلٍ صحيح لمجموعة متنوعة من الأماكن. يمكنك إجراء الاختبار عن طريق تمرير معرّفات أماكن مختلفة إلى السمة .place في عنصر <gmp-place-details-place-request>. استخدِم معرّفات تمثّل أنواعًا مختلفة من المؤسسات (مثل المؤسسات التي تتضمّن بيانات مفصّلة ونقاط الاهتمام والعناوين الأساسية) والأماكن في مناطق أو بلغات مختلفة. انتبه جيدًا إلى التنسيق والتصميم وعرض المحتوى.

عنصر البحث عن الأماكن

إذا نفّذت عنصر "البحث عن الأماكن"، تأكَّد من عرضه وسلوكه في سيناريوهات بحث مختلفة.

بالنسبة إلى "البحث النصي"، يمكنك إجراء الاختبار عن طريق ضبط السمة textQuery في عنصر <gmp-place-text-search-request> باستخدام إدخالات مختلفة: طلبات بحث عامة وعناوين محدّدة وطلبات بحث تتضمّن تحيزات الموقع الجغرافي.
بالنسبة إلى "البحث في الجوار"، يمكنك إجراء الاختبار عن طريق ضبط السمتَين locationRestriction و includedTypes في عنصر <gmp-place-nearby-search-request>. استخدِم أحجام مواقع جغرافية مختلفة وفلاتر أنواع.

تأكَّد من ملء القائمة بنتائج ذات صلة ومن تشغيل الحدث gmp-select بشكلٍ صحيح عند الاختيار.

عنصر "الإكمال التلقائي الأساسي للأماكن"

بالنسبة إلى عنصر "الإكمال التلقائي الأساسي للأماكن"، ركِّز على اختبار تفاعل المستخدم والبيانات التي يتم تمريرها من خلال حدث الاختيار. تأكَّد من تشغيل الحدث gmp-select بشكلٍ موثوق عندما ينقر المستخدم على توقّع. تأكَّد من أنّ عنصر event.place في أداة معالجة الأحداث يحتوي على رقم تعريف مكان صالح.

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

معالجة الأخطاء

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

استخدام حزمة أدوات واجهة مستخدم "الأماكن" لمستخدمي Places API الحاليين تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

الفئات المعنيّة بهذا الدليل

المتطلبات الأساسية

تعديل طريقة تحميل Maps JavaScript API

تنفيذ عنصر "تفاصيل المكان"

عملية التنفيذ الحالية

نقل البيانات إلى عنصر "تفاصيل المكان"

تعديل بنية HTML

تكييف منطق JavaScript

المنطق الحالي

المنطق الجديد

تنفيذ عنصر البحث عن الأماكن

عملية التنفيذ الحالية

نقل البيانات إلى عنصر "البحث عن الأماكن"

تعديل بنية HTML

مثال على "بحث في الجوار"

مثال على "بحث نصي"

تكييف منطق JavaScript

تنفيذ عنصر "الإكمال التلقائي الأساسي للأماكن"

عملية التنفيذ الحالية

نقل البيانات إلى عنصر "الإكمال التلقائي للأماكن"

تعديل بنية HTML

تكييف منطق JavaScript

التعامل مع التخصيص

تخصيص عنصر "تفاصيل المكان"

الاتجاه

اختيار الحقول المطلوب عرضها

ضبط أنماط CSS

تخصيص عنصر البحث عن الأماكن

الاتجاه

اختيار الحقول المطلوب عرضها

تخصيص عنصر "الإكمال التلقائي الأساسي للأماكن"

ضبط أنماط CSS

التعامل مع الأحداث والبيانات

الاستماع إلى الأحداث

حدث الاختيار

الأحداث الشائعة

الوصول إلى بيانات العنصر آليًا

الاختبار والتحسين

استخدام حزمة أدوات واجهة مستخدم "الأماكن" لمستخدمي Places API الحاليين