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

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

الهدف: استبدال عملية تنفيذ Places API أو فئة Place بـ Places UI Kit

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

المطوِّرون الذين:

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

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

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

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

تتطلّب Places UI Kit استخدام طريقة استيراد المكتبة الديناميكية لتحميل Maps JavaScript API. إذا كنت تستخدم علامة تحميل النص البرمجي المباشر، يجب تعديلها.

بعد تعديل النص البرمجي الخاص بتحميل Maps JavaScript API، عليك استيراد المكتبات المطلوبة لاستخدام Places UI Kit.

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

عنصر تفاصيل المكان وعنصر تفاصيل المكان المضغوط هما عنصران من عناصر 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، أو استخدام فئة Place في 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، يتوفّر عنصر Basic Place Autocomplete.

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

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

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

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

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

تخصيص "عنصر البحث" في "خرائط Google"

الاتجاه

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

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

عناصر Places UI Kit هي مكوّنات تفاعلية تتيح لك الاستماع إلى الأحداث واسترداد البيانات آليًا.

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

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

حدث الاختيار

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

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

تتيح عناصر Place Search وPlace Details وBasic Place Autocomplete الأحداث التالية:

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

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

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

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

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

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

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

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

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

تخصيص "عنصر البحث" في "خرائط Google"

الاتجاه

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

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

ضبط أنماط CSS

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

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

حدث الاختيار

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

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

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

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