Places Widgets

PlaceAutocompleteElement class

class google.maps.places.PlaceAutocompleteElement extends HTMLElement implements PlaceAutocompleteElementOptions
library "places"

‫PlaceAutocompleteElement هي فئة فرعية من HTMLElement توفّر مكوّن واجهة مستخدم لواجهة برمجة تطبيقات الإكمال التلقائي للأماكن.

يستخدم PlaceAutocompleteElement تلقائيًا AutocompleteSessionTokens داخليًا لتجميع مرحلتَي طلب البحث والاختيار في عملية بحث المستخدم باستخدام ميزة "الإكمال التلقائي".

سيتضمّن الطلب الأول إلى Place.fetchFields على Place الذي يعرضه PlacePrediction.toPlace تلقائيًا الرمز المميّز للجلسة المستخدَم لجلب PlacePrediction.

يُرجى الاطّلاع على https://developers.google.com/maps/documentation/places/web-service/place-session-tokens لمزيد من التفاصيل حول آلية عمل الرموز المميزة للجلسة.

<gmp-place-autocomplete
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-place-autocomplete>

const {PlaceAutocompleteElement} = await google.maps.importLibrary("places");

واجهة PlaceAutocompleteElementOptions

interface google.maps.places.PlaceAutocompleteElementOptions
implemented by PlaceAutocompleteElement

خيارات إنشاء PlaceAutocompleteElement للاطّلاع على وصف كل سمة، يُرجى الرجوع إلى السمة التي تحمل الاسم نفسه في فئة PlaceAutocompleteElement.

فئة PlacePredictionSelectEvent

class google.maps.places.PlacePredictionSelectEvent extends Event
library "places"

يتم إنشاء هذا الحدث بعد أن يختار المستخدم عنصر توقّع باستخدام PlaceAutocompleteElement. يمكنك الوصول إلى الاختيار باستخدام event.placePrediction.

يمكنك تحويل placePrediction إلى Place من خلال طلب PlacePrediction.toPlace.

const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places");

BasicPlaceAutocompleteElement class

class google.maps.places.BasicPlaceAutocompleteElement extends HTMLElement implements BasicPlaceAutocompleteElementOptions
library "places"

BasicPlaceAutocompleteElement هي فئة فرعية من HTMLElement توفّر مكوّن واجهة مستخدم لواجهة الإكمال التلقائي للأماكن API.

<gmp-basic-place-autocomplete
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-basic-place-autocomplete>

const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places");

BasicPlaceAutocompleteElementOptions interface

interface google.maps.places.BasicPlaceAutocompleteElementOptions
implemented by BasicPlaceAutocompleteElement

خيارات إنشاء BasicPlaceAutocompleteElement.

فئة PlaceDetailsElement

class google.maps.places.PlaceDetailsElement extends HTMLElement implements PlaceDetailsElementOptions
extended by AdvancedPlaceDetailsElement
library "places"

يعرض تفاصيل مكان معيّن في تنسيق كامل. أضِف PlaceDetailsPlaceRequestElement أو PlaceDetailsLocationRequestElement لتحديد المكان الذي سيتم عرضه. أضِف PlaceContentConfigElement أو PlaceStandardContentElement أو PlaceAllContentElement لتحديد المحتوى الذي تريد عرضه.

مثال:

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details> 

<gmp-place-details
  internal-usage-attribution-ids="space separated strings">
</gmp-place-details>

const {PlaceDetailsElement} = await google.maps.importLibrary("places");

PlaceDetailsElementOptions interface

interface google.maps.places.PlaceDetailsElementOptions
extended by AdvancedPlaceDetailsElementOptions
implemented by AdvancedPlaceDetailsElement, PlaceDetailsElement

خيارات "PlaceDetailsElement"

PlaceDetailsCompactElement class

class google.maps.places.PlaceDetailsCompactElement extends HTMLElement implements PlaceDetailsCompactElementOptions
extended by AdvancedPlaceDetailsCompactElement
library "places"

تعرض هذه البطاقة تفاصيل عن مكان معيّن بتنسيق مصغّر. أضِف PlaceDetailsPlaceRequestElement أو PlaceDetailsLocationRequestElement لتحديد المكان الذي سيتم عرضه. أضِف PlaceContentConfigElement أو PlaceStandardContentElement أو PlaceAllContentElement لتحديد المحتوى الذي تريد عرضه.

مثال:

 <gmp-place-details-compact>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details-compact> 

<gmp-place-details-compact
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  truncation-preferred>
</gmp-place-details-compact>

const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places");

PlaceDetailsCompactElementOptions interface

interface google.maps.places.PlaceDetailsCompactElementOptions
extended by AdvancedPlaceDetailsCompactElementOptions
implemented by AdvancedPlaceDetailsCompactElement, PlaceDetailsCompactElement

خيارات "PlaceDetailsCompactElement"

AdvancedPlaceDetailsElement class

class google.maps.places.AdvancedPlaceDetailsElement extends PlaceDetailsElement, HTMLElement implements AdvancedPlaceDetailsElementOptions, PlaceDetailsElementOptions
library "places"

يعرض تفاصيل مكان معيّن في تنسيق كامل. أضِف PlaceDetailsPlaceRequestElement أو PlaceDetailsLocationRequestElement لتحديد المكان الذي سيتم عرضه. يمكنك إلحاق عناصر PlaceStandardContentElement أو PlaceAllContentElement أو تفاصيل المكان مباشرةً لضبط المحتوى المطلوب عرضه.

مثال:

 <gmp-advanced-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-standard-content>
   </gmp-place-standard-content>
 </gmp-advanced-place-details> 

<gmp-advanced-place-details
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details>

const {AdvancedPlaceDetailsElement} = await google.maps.importLibrary("places");

AdvancedPlaceDetailsElementOptions واجهة

interface google.maps.places.AdvancedPlaceDetailsElementOptions extends PlaceDetailsElementOptions
implemented by AdvancedPlaceDetailsElement

خيارات "AdvancedPlaceDetailsElement"

فئة AdvancedPlaceDetailsCompactElement

class google.maps.places.AdvancedPlaceDetailsCompactElement extends PlaceDetailsCompactElement, HTMLElement implements AdvancedPlaceDetailsCompactElementOptions, PlaceDetailsCompactElementOptions
library "places"

تعرض هذه البطاقة تفاصيل عن مكان معيّن بتنسيق مصغّر. أضِف PlaceDetailsPlaceRequestElement أو PlaceDetailsLocationRequestElement لتحديد المكان الذي سيتم عرضه. يمكنك إلحاق PlaceStandardContentElement أو PlaceAllContentElement أو تحديد عناصر فرعية معيّنة للمحتوى لضبط المحتوى المطلوب عرضه.

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

<gmp-advanced-place-details-compact
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details-compact>

const {AdvancedPlaceDetailsCompactElement} = await google.maps.importLibrary("places");

AdvancedPlaceDetailsCompactElementOptions interface

interface google.maps.places.AdvancedPlaceDetailsCompactElementOptions extends PlaceDetailsCompactElementOptions
implemented by AdvancedPlaceDetailsCompactElement

خيارات "AdvancedPlaceDetailsCompactElement"

ثوابت PlaceDetailsOrientation

ثوابت google.maps.places.PlaceDetailsOrientation
مكتبة "places"

خيارات الاتجاه لـ "PlaceDetailsCompactElement"

ويمكن أيضًا استخدام هذه الثوابت كسلاسل. في TypeScript، يتم تحديد سلاسل القيم الثابتة حسب النوع PlaceDetailsOrientationString.

const {PlaceDetailsOrientation} = await google.maps.importLibrary("places");

فئة PlaceDetailsPlaceRequestElement

class google.maps.places.PlaceDetailsPlaceRequestElement extends HTMLElement implements PlaceDetailsPlaceRequestElementOptions
library "places"

يتم ضبط PlaceDetailsCompactElement أو PlaceDetailsElement لتحميل البيانات استنادًا إلى عنصر مكان أو معرّف أو اسم مورد. أضِف هذا العنصر كعنصر فرعي من PlaceDetailsCompactElement أو PlaceDetailsElement لتحميل البيانات للمكان المحدّد. على سبيل المثال:

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
 </gmp-place-details> 

<gmp-place-details-place-request
  place="places/###">
</gmp-place-details-place-request>

const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places");

واجهة PlaceDetailsPlaceRequestElementOptions

interface google.maps.places.PlaceDetailsPlaceRequestElementOptions
implemented by PlaceDetailsPlaceRequestElement

خيارات "PlaceDetailsPlaceRequestElement"

PlaceDetailsLocationRequestElement

class google.maps.places.PlaceDetailsLocationRequestElement extends HTMLElement implements PlaceDetailsLocationRequestElementOptions
library "places"

لضبط PlaceDetailsCompactElement أو PlaceDetailsElement لتحميل البيانات استنادًا إلى الموقع الجغرافي أضِف هذا العنصر كعنصر فرعي لـ PlaceDetailsCompactElement أو PlaceDetailsElement لتحميل البيانات للموقع الجغرافي المحدّد. على سبيل المثال:

 <gmp-place-details>
   <gmp-place-details-location-request
     location="37.6207665,-122.4284806"
   ></gmp-place-details-location-request>
 </gmp-place-details> 

<gmp-place-details-location-request
  location="lat,lng">
</gmp-place-details-location-request>

const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places");

PlaceDetailsLocationRequestElementOptions interface

interface google.maps.places.PlaceDetailsLocationRequestElementOptions
implemented by PlaceDetailsLocationRequestElement

خيارات "PlaceDetailsLocationRequestElement"

فئة PlaceSearchElement

class google.maps.places.PlaceSearchElement extends HTMLElement implements PlaceSearchElementOptions
extended by AdvancedPlaceSearchElement
library "places"

تعرض هذه الميزة نتائج البحث عن الأماكن في قائمة. أضِف PlaceTextSearchRequestElement أو PlaceNearbySearchRequestElement لتحديد الطلب الذي تريد عرض النتائج له. أضِف PlaceContentConfigElement أو PlaceStandardContentElement أو PlaceAllContentElement لتحديد المحتوى الذي تريد عرضه.

مثال:

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search> 

<gmp-place-search
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-place-search>

const {PlaceSearchElement} = await google.maps.importLibrary("places");

PlaceSearchElementOptions

interface google.maps.places.PlaceSearchElementOptions
extended by AdvancedPlaceSearchElementOptions
implemented by AdvancedPlaceSearchElement, PlaceSearchElement

خيارات "PlaceSearchElement"

فئة AdvancedPlaceSearchElement

class google.maps.places.AdvancedPlaceSearchElement extends PlaceSearchElement, HTMLElement implements AdvancedPlaceSearchElementOptions, PlaceSearchElementOptions
library "places"

يعرض نتائج البحث المتقدّم عن الأماكن في قائمة. أضِف PlaceTextSearchRequestElement أو PlaceNearbySearchRequestElement لتحديد الطلب الذي تريد عرض النتائج له. أضِف PlaceStandardContentElement أو PlaceAllContentElement أو <template slot="details-item"> لتحديد المحتوى الذي تريد عرضه.

مثال:

 <gmp-advanced-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-search> 

<gmp-advanced-place-search
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-advanced-place-search>

const {AdvancedPlaceSearchElement} = await google.maps.importLibrary("places");

AdvancedPlaceSearchElementOptions interface

interface google.maps.places.AdvancedPlaceSearchElementOptions extends PlaceSearchElementOptions
implemented by AdvancedPlaceSearchElement

خيارات "AdvancedPlaceSearchElement"

فئة AdvancedPlaceListElement

class google.maps.places.AdvancedPlaceListElement extends HTMLElement implements AdvancedPlaceListElementOptions
library "places"

تعرض هذه الميزة نتائج البحث عن الأماكن في قائمة. أضِف عنصر PlaceDetailsPlaceRequestElement واحدًا أو أكثر أو اضبط السمة places لتحديد الأماكن التي تريد عرضها. أضِف PlaceStandardContentElement أو PlaceAllContentElement لتحديد المحتوى الذي تريد عرضه.

مثال:

 <gmp-advanced-place-list>
   <gmp-place-details-place-request
     place="PLACE_ID"
   </gmp-place-details-place-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-list> 

<gmp-advanced-place-list
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  places="space separated strings"
  selectable
  truncation-preferred>
</gmp-advanced-place-list>

const {AdvancedPlaceListElement} = await google.maps.importLibrary("places");

AdvancedPlaceListElementOptions interface

interface google.maps.places.AdvancedPlaceListElementOptions
implemented by AdvancedPlaceListElement

خيارات "AdvancedPlaceListElement"

ثوابت PlaceSearchAttributionPosition

ثوابت google.maps.places.PlaceSearchAttributionPosition
مكتبة "places"

مواضع تحديد المصدر لـ "PlaceSearchElement"

ويمكن أيضًا استخدام هذه الثوابت كسلاسل. في TypeScript، يتم تحديد سلاسل القيم الثابتة حسب النوع PlaceSearchAttributionPositionString.

const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places");

ثوابت PlaceSearchOrientation

ثوابت google.maps.places.PlaceSearchOrientation
مكتبة "places"

خيارات الاتجاه لـ "PlaceSearchElement"

ويمكن أيضًا استخدام هذه الثوابت كسلاسل. في TypeScript، يتم تحديد سلاسل القيم الثابتة حسب النوع PlaceSearchOrientationString.

const {PlaceSearchOrientation} = await google.maps.importLibrary("places");

فئة PlaceSelectEvent

class google.maps.places.PlaceSelectEvent extends Event
library "places"

يتم تنشيط هذا الحدث عند اختيار مكان من قائمة الأماكن. يمكنك الوصول إلى الاختيار باستخدام event.place.

const {PlaceSelectEvent} = await google.maps.importLibrary("places");

فئة PlaceNearbySearchRequestElement

class google.maps.places.PlaceNearbySearchRequestElement extends HTMLElement implements PlaceNearbySearchRequestElementOptions
library "places"

يضبط هذا الإجراء PlaceSearchElement لتحميل النتائج استنادًا إلى طلب بحث في الجوار. يجب إدراج السمة locationRestriction ليتم تحميل عنصر البحث. وسيتم تجاهل أي سمات أخرى تم ضبطها في حال عدم ضبط locationRestriction. يمكنك إلحاق هذا العنصر كعنصر ثانوي لـ PlaceSearchElement من أجل تحميل النتائج. على سبيل المثال:

 <gmp-place-search>
   <gmp-place-nearby-search-request
     location-restriction="RADIUS@LAT,LNG"
   ></gmp-place-nearby-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search> 

<gmp-place-nearby-search-request
  excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."
  excluded-types="excluded-type1 excluded-type2..."
  included-primary-types="included-primary-type1 included-primary-type2..."
  included-types="included-type1 included-type2..."
  location-restriction="radius@lat,lng"
  max-result-count="number"
  rank-preference="value-name">
</gmp-place-nearby-search-request>

const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places");

واجهة PlaceNearbySearchRequestElementOptions

interface google.maps.places.PlaceNearbySearchRequestElementOptions
implemented by PlaceNearbySearchRequestElement

خيارات "PlaceNearbySearchRequestElement"

PlaceTextSearchRequestElement class

class google.maps.places.PlaceTextSearchRequestElement extends HTMLElement implements PlaceTextSearchRequestElementOptions
library "places"

يضبط هذا الإجراء PlaceSearchElement لتحميل النتائج استنادًا إلى طلب بحث نصي. يجب إدراج السمة textQuery ليتم تحميل عنصر البحث. وسيتم تجاهل أي سمات أخرى تم ضبطها في حال عدم ضبط textQuery. يمكنك إلحاق هذا العنصر كعنصر ثانوي لـ PlaceSearchElement من أجل تحميل النتائج. على سبيل المثال:

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search> 

<gmp-place-text-search-request
  ev-connector-types="ev-connector-type1 ev-connector-type2..."
  ev-minimum-charging-rate-kw="number"
  included-type="type"
  is-open-now
  location-bias="lat,lng"
  location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng"
  max-result-count="number"
  min-rating="number"
  price-levels="price-level1 price-level2..."
  rank-preference="value-name"
  text-query="string"
  use-strict-type-filtering>
</gmp-place-text-search-request>

const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places");

واجهة PlaceTextSearchRequestElementOptions

interface google.maps.places.PlaceTextSearchRequestElementOptions
implemented by PlaceTextSearchRequestElement

خيارات "PlaceTextSearchRequestElement"

فئة الإكمال التلقائي

class google.maps.places.Autocomplete extends MVCObject
library "places"

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

const {Autocomplete} = await google.maps.importLibrary("places");

واجهة AutocompleteOptions

واجهة google.maps.places.AutocompleteOptions

الخيارات التي يمكن ضبطها على عنصر Autocomplete.

فئة SearchBox

class google.maps.places.SearchBox extends MVCObject
library "places"

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

const {SearchBox} = await google.maps.importLibrary("places");

SearchBoxOptions interface

واجهة google.maps.places.SearchBoxOptions

الخيارات التي يمكن ضبطها على عنصر SearchBox.

فئة PlaceContextualElement

class google.maps.places.PlaceContextualElement extends HTMLElement implements PlaceContextualElementOptions
library "places"

تستخدم هذه الأداة الرمز المميّز السياقي لعرض ردّ "استخدام خرائط Google كمصدر" بشكل سياقي.

<gmp-place-contextual
  context-token="string">
</gmp-place-contextual>

const {PlaceContextualElement} = await google.maps.importLibrary("places");

PlaceContextualElementOptions

interface google.maps.places.PlaceContextualElementOptions
implemented by PlaceContextualElement

خيارات "PlaceContextualElement"

PlaceContextualListConfigElement class

class google.maps.places.PlaceContextualListConfigElement extends HTMLElement implements PlaceContextualListConfigElementOptions
library "places"

عنصر HTML يضبط خيارات العرض على شكل قائمة في "عنصر سياق المكان".

<gmp-place-contextual-list-config
  layout="value-name"
  map-hidden>
</gmp-place-contextual-list-config>

const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places");

PlaceContextualListConfigElementOptions interface

interface google.maps.places.PlaceContextualListConfigElementOptions
implemented by PlaceContextualListConfigElement

خيارات PlaceContextualListConfigElement.

ثوابت PlaceContextualListLayout

ثوابت google.maps.places.PlaceContextualListLayout
مكتبة "places"

قائمة التنسيقات التي يتيحها "عنصر سياق المكان" للعرض على شكل قائمة.

ويمكن أيضًا استخدام هذه الثوابت كسلاسل. في TypeScript، يتم تحديد سلاسل القيم الثابتة حسب النوع PlaceContextualListLayoutString.

const {PlaceContextualListLayout} = await google.maps.importLibrary("places");