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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يمكنك إجراء طلب "تفاصيل المكان" باستخدام طلب HTTP أو استخدام فئة Place في 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() أو إجراء طلب خدمة ويب
تحديد مصفوفة حقول (لواجهة برمجة تطبيقات JS) أو 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>.
مرِّر رقم تعريف المكان أو عنصر المكان إلى سمة المكان في العنصر <gmp-place-details-place-request>.

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