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

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

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

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

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

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

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

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

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

تعديل عملية تحميل Maps JavaScript API

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

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

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

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

التنفيذ الحالي

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

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

تعديل بنية HTML

تحديد حاوية HTML التي يتم عرض تفاصيل المكان فيها استبدِل عناصر HTML المخصّصة (مثل div وspan للاسم والعنوان والصور وما إلى ذلك) بعنصر 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) أو 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>.

في ما يلي مثال على كيفية تنفيذ حزمة واجهة مستخدم "تفاصيل المكان" في منطق 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 المخصّصة (مثل div وspan للاسم والعنوان وما إلى ذلك) بعنصر 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 Search، يتوفّر عنصر الإكمال التلقائي الأساسي للأماكن.

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

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

التنفيذ الحالي

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

عرض حقل إدخال نص على صفحتك يستدعي خدمة "الإكمال التلقائي لأسماء الأماكن" أثناء كتابة المستخدم، وعرض النتائج
استخدام رقم تعريف المكان الذي اختاره المستخدم لجلب المزيد من التفاصيل، مثلاً باستخدام 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 الجديد على مرجع إلى عنصر Basic Place Autocomplete، وسيستمع إلى أحداث 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 Details وPlace Search وBasic Place Autocomplete.

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

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

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

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

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

تعديل عملية تحميل Maps JavaScript API

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

التنفيذ الحالي

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

تعديل بنية HTML

تعديل منطق JavaScript

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

منطق جديد

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

التنفيذ الحالي

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

تعديل بنية HTML

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

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

تعديل منطق JavaScript

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

التنفيذ الحالي

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

تعديل بنية HTML

تعديل منطق JavaScript

تخصيص الاسم المعرِّف

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

الاتجاه

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

ضبط أنماط CSS

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

الاتجاه

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

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

ضبط أنماط CSS

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

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

حدث الاختيار

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

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

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

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