PlaceAutocompleteElement क्लास
class
google.maps.places.PlaceAutocompleteElement
extends HTMLElement
implements PlaceAutocompleteElementOptions
library "places"
PlaceAutocompleteElement, HTMLElement का सबक्लास है. यह Places Autocomplete API के लिए यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट उपलब्ध कराता है.
PlaceAutocompleteElement, अपने-आप AutocompleteSessionTokens का इस्तेमाल करता है. इससे, उपयोगकर्ता की ऑटोकंप्लीट खोज की क्वेरी और चुने गए चरणों को ग्रुप में बांटा जाता है.
PlacePrediction.toPlace से मिले Place पर Place.fetchFields को किए गए पहले कॉल में, 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");
निर्माता | |
|---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
description
attr: description |
टाइप:
string optionalइनपुट एलिमेंट के लिए इस्तेमाल किया जाने वाला ब्यौरा. इनपुट एलिमेंट पर फ़ोकस होने पर, स्क्रीन रीडर इसका पता लगा लेंगे. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby पर जाएं.
एचटीएमएल एट्रिब्यूट: description="string" |
disabled
attr: disabled |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanइनपुट एलिमेंट बंद है या नहीं. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled पर जाएं.
एचटीएमएल एट्रिब्यूट: disabled |
futureOpeningBusinessesIncluded
attr: future-opening-businesses-included |
टाइप:
boolean optionalक्या ऐसी जगहों को शामिल करना है जो अभी खुली नहीं हैं, लेकिन आने वाले समय में खुल सकती हैं.
एचटीएमएल एट्रिब्यूट: future-opening-businesses-included |
includedPrimaryTypes
attr: included-primary-types |
टाइप:
Array<string> optionalशामिल किया गया मुख्य जगह का टाइप (उदाहरण के लिए, "restaurant" या "gas_station").
किसी जगह की जानकारी सिर्फ़ तब दिखती है, जब उसका मुख्य टाइप इस सूची में शामिल हो. ज़्यादा से ज़्यादा पांच वैल्यू दी जा सकती हैं. अगर कोई टाइप नहीं बताया जाता है, तो सभी तरह की जगहों की जानकारी दिखती है. एचटीएमएल एट्रिब्यूट: included-primary-types="type1 type2 type3..." |
includedRegionCodes
attr: included-region-codes |
टाइप:
Array<string> optionalसिर्फ़ उन इलाकों के नतीजे शामिल करें जिनके लिए दो वर्णों वाले CLDR रीजन कोड दिए गए हैं. ज़्यादा से ज़्यादा 15 कोड दिए जा सकते हैं. खाली सेट होने पर, नतीजों पर कोई पाबंदी नहीं लगेगी. अगर
locationRestriction और includedRegionCodes, दोनों सेट हैं, तो नतीजे इंटरसेक्शन वाले इलाके में दिखेंगे.एचटीएमएल एट्रिब्यूट: included-region-codes="c1 c2 c3..." |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
इन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: internal-usage-attribution-ids="space separated strings" |
locationBias |
टाइप:
LocationBias optionalजगहें खोजते समय इस्तेमाल की जाने वाली सॉफ़्ट बाउंड्री या हिंट. |
locationRestriction |
टाइप:
LocationRestriction optionalखोज के नतीजों को सीमित करने के लिए बाउंड. |
maxlength
attr: maxlength |
टाइप:
number optionalउपयोगकर्ता ज़्यादा से ज़्यादा कितने वर्ण डाल सकता है. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength पर जाएं.
एचटीएमएल एट्रिब्यूट: maxlength="number" |
name
attr: name |
टाइप:
string optionalइनपुट एलिमेंट के लिए इस्तेमाल किया जाने वाला नाम. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name पर जाएं. यह इनपुट के लिए, नाम एट्रिब्यूट की तरह ही काम करता है. ध्यान दें कि फ़ॉर्म सबमिट करते समय इसी नाम का इस्तेमाल किया जाएगा. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form पर जाएं.
एचटीएमएल एट्रिब्यूट: name="string" |
noClearButton
attr: no-clear-button |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: boolean'मिटाएं' बटन को छिपाना है या नहीं.
एचटीएमएल एट्रिब्यूट: no-clear-button |
noInputIcon
attr: no-input-icon |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanइनपुट आइकॉन को छिपाना है या नहीं.
एचटीएमएल एट्रिब्यूट: no-input-icon |
origin
attr: origin |
इनपुट टाइप:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalआउटपुट टाइप: LatLngAltitude optionalदूरी का हिसाब लगाने के लिए, शुरुआती जगह. अगर यह जानकारी नहीं दी जाती है, तो दूरी का हिसाब नहीं लगाया जाता. अगर ऊंचाई की जानकारी दी गई है, तो उसका इस्तेमाल कैलकुलेशन में नहीं किया जाता.
एचटीएमएल एट्रिब्यूट:
|
placeholder
attr: placeholder |
टाइप:
string optionalइनपुट एलिमेंट के लिए इस्तेमाल किया जाने वाला प्लेसहोल्डर टेक्स्ट. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder पर जाएं.
एचटीएमएल एट्रिब्यूट: placeholder="string" |
pureServiceAreaBusinessesIncluded
attr: pure-service-area-businesses-included |
टाइप:
boolean optionalक्या ऐसी जगहों को शामिल करना है जो सिर्फ़ घर या दुकान पर सेवा देने वाले कारोबार हैं.
एचटीएमएल एट्रिब्यूट: pure-service-area-businesses-included |
readonly
attr: readonly |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanइनपुट एलिमेंट रीड-ओनली है या नहीं. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly पर जाएं.
एचटीएमएल एट्रिब्यूट: readonly |
requestedLanguage
attr: requested-language |
टाइप:
string optionalअगर हो सके, तो उस भाषा के लिए भाषा आइडेंटिफ़ायर जिसमें नतीजे दिखाए जाने चाहिए. चुनी गई भाषा में मिलने वाले नतीजों को ज़्यादा अच्छी रैंकिंग दी जा सकती है. हालांकि, सुझाव इस भाषा तक ही सीमित नहीं हैं. उपलब्ध भाषाओं की सूची देखें.
एचटीएमएल एट्रिब्यूट: requested-language="string" |
requestedRegion
attr: requested-region |
टाइप:
string optionalरीजन कोड, जिसका इस्तेमाल नतीजों को फ़ॉर्मैट और फ़िल्टर करने के लिए किया जाता है. इससे, इस देश के लिए सुझावों पर पाबंदी नहीं लगती. क्षेत्र कोड, दो वर्णों वाली ccTLD ("टॉप-लेवल डोमेन") वैल्यू स्वीकार करता है. ज़्यादातर ccTLD कोड, ISO 3166-1 कोड से मिलते-जुलते होते हैं. हालांकि, कुछ अपवाद भी होते हैं. उदाहरण के लिए, यूनाइटेड किंगडम का ccTLD "uk" (
.co.uk) है, जबकि इसका ISO 3166-1 कोड "gb" है. तकनीकी तौर पर, यह कोड "यूनाइटेड किंगडम ऑफ़ ग्रेट ब्रिटेन ऐंड नॉर्दर्न आयरलैंड" के लिए है.एचटीएमएल एट्रिब्यूट: requested-region="string" |
unitSystem
attr: unit-system |
दूरी दिखाने के लिए इस्तेमाल किया जाने वाला यूनिट सिस्टम. अगर यूनिट सिस्टम की जानकारी नहीं दी जाती है, तो requestedRegion के आधार पर यूनिट सिस्टम तय किया जाता है.
एचटीएमएल एट्रिब्यूट: unit-system="value-name" |
value |
इनपुट टाइप:
string optionalआउटपुट टाइप: stringइनपुट एलिमेंट की वैल्यू. |
स्लॉट गेम | |
|---|---|
clear-icon |
यह स्लॉट किए गए एलिमेंट को 'मिटाएं' आइकॉन की जगह पर रखता है. इनपुट बॉक्स में टेक्स्ट होने पर, 'मिटाएं' बटन इनपुट बॉक्स के आखिर में दिखता है. |
input-icon |
स्लॉट किए गए एलिमेंट को इनपुट आइकॉन की जगह पर रखता है. इनलाइन मोड में, इनपुट बॉक्स की शुरुआत में इनपुट आइकॉन दिखता है. |
prediction-item-icon |
इस स्लॉट में, अनुमानित आइटम के बगल में दिखाए गए आइकॉन के तौर पर रेंडर करने के लिए, सिर्फ़ एक <template> एलिमेंट डाला जा सकता है. |
पुर्ज़े | |
|---|---|
focus-ring |
फ़ोकस किए गए एलिमेंट (इनपुट या अनुमानित आइटम) के आस-पास फ़ोकस रिंग दिखाने के लिए इस्तेमाल किया जाने वाला एलिमेंट |
input |
ऑटोकंप्लीट एलिमेंट के लिए इनपुट एलिमेंट. |
prediction-item |
सुझावों के ड्रॉप-डाउन में मौजूद एक आइटम, जो किसी एक सुझाव को दिखाता है. |
prediction-item-icon |
अनुमानों की सूची में मौजूद हर आइटम की बाईं ओर दिखने वाला आइकॉन. |
prediction-item-main-text |
अनुमान-आइटम का एक हिस्सा, जो अनुमान का मुख्य टेक्स्ट होता है. भौगोलिक जगहों के लिए, इसमें 'सिडनी' जैसी जगह का नाम या '10 किंग स्ट्रीट' जैसी सड़क का नाम और नंबर शामिल होता है. डिफ़ॉल्ट रूप से, prediction-item-main-text का रंग काला होता है. अगर prediction-item में कोई और टेक्स्ट है, तो वह prediction-item-main-text के बाहर होता है. साथ ही, उसकी स्टाइलिंग prediction-item से ली जाती है. डिफ़ॉल्ट रूप से, यह स्लेटी रंग का होता है. अतिरिक्त टेक्स्ट आम तौर पर एक पता होता है. |
prediction-item-match |
अनुमान का वह हिस्सा जो उपयोगकर्ता के इनपुट से मेल खाता है. डिफ़ॉल्ट रूप से, मैच होने वाले इस टेक्स्ट को बोल्ड टेक्स्ट में हाइलाइट किया जाता है. ध्यान दें कि मैच होने वाले टेक्स्ट को सिर्फ़ prediction-item-main-text में हाइलाइट किया जाता है. |
prediction-item-nonmatch |
सुझाव के मुख्य टेक्स्ट का वह हिस्सा जो उपयोगकर्ता के इनपुट से मेल नहीं खाता. |
prediction-item-secondary-text |
सुझाव वाले आइटम का एक हिस्सा, जो सुझाव का सेकंडरी टेक्स्ट होता है. अतिरिक्त टेक्स्ट आम तौर पर एक पता होता है. |
prediction-item-selected |
जब उपयोगकर्ता कीबोर्ड का इस्तेमाल करके किसी आइटम पर जाता है, तब वह आइटम हाइलाइट हो जाता है. ध्यान दें: चुने गए आइटम पर, इस पार्ट की स्टाइल और अनुमानित आइटम वाले पार्ट की स्टाइल, दोनों का असर पड़ेगा. |
prediction-list |
यह विज़ुअल एलिमेंट, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सेवा से मिले सुझावों की सूची दिखाता है. यह सूची, PlaceAutocompleteElement के नीचे ड्रॉपडाउन मेन्यू के तौर पर दिखती है. |
सीएसएस प्रॉपर्टी | |
|---|---|
background-color |
एलिमेंट के बैकग्राउंड का रंग बदलता है. |
border |
यह विकल्प, एलिमेंट के बॉर्डर को बदल देता है. |
border-radius |
यह एलिमेंट के बॉर्डर रेडियस को बदल देता है. |
color |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
color-scheme |
इससे पता चलता है कि इस एलिमेंट को किस कलर स्कीम में रेंडर किया जा सकता है. ज़्यादा जानकारी के लिए, color-scheme दस्तावेज़ देखें. डिफ़ॉल्ट रूप से, यह color-scheme: light dark पर सेट होता है. |
font |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
font-family |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
font-size |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
font-style |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
font-weight |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
line-height |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
gmp-error |
function(errorEvent)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब बैकएंड को किया गया अनुरोध अस्वीकार कर दिया जाता है. उदाहरण के लिए, गलत एपीआई पासकोड. यह इवेंट बबल नहीं होता. |
gmp-select |
function(placePredictionSelectEvent)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब कोई उपयोगकर्ता जगह के अनुमान को चुनता है. इसमें PlacePrediction ऑब्जेक्ट होता है, जिसे Place ऑब्जेक्ट में बदला जा सकता है. |
PlaceAutocompleteElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceAutocompleteElementOptions
PlaceAutocompleteElement ने लागू किया
PlaceAutocompleteElement बनाने के विकल्प. हर प्रॉपर्टी की जानकारी के लिए, PlaceAutocompleteElement क्लास में उसी नाम की प्रॉपर्टी देखें.
प्रॉपर्टी | |
|---|---|
description
ज़रूरी नहीं |
टाइप:
string optionalइनपुट एलिमेंट के लिए इस्तेमाल किया जाने वाला ब्यौरा. इनपुट एलिमेंट पर फ़ोकस होने पर, स्क्रीन रीडर इसका पता लगा लेंगे. |
disabled
ज़रूरी नहीं |
टाइप:
boolean optional |
futureOpeningBusinessesIncluded
ज़रूरी नहीं |
टाइप:
boolean optional |
includedPrimaryTypes
ज़रूरी नहीं |
टाइप:
Array<string> optional |
includedRegionCodes
ज़रूरी नहीं |
टाइप:
Array<string> optional |
internalUsageAttributionIds
ज़रूरी नहीं |
टाइप:
Iterable<string> optional |
locationBias
ज़रूरी नहीं |
टाइप:
LocationBias optional |
locationRestriction
ज़रूरी नहीं |
टाइप:
LocationRestriction optional |
maxlength
ज़रूरी नहीं |
टाइप:
number optional |
name
ज़रूरी नहीं |
टाइप:
string optional |
noClearButton
ज़रूरी नहीं |
टाइप:
boolean optional |
noInputIcon
ज़रूरी नहीं |
टाइप:
boolean optional |
origin
ज़रूरी नहीं |
टाइप:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
placeholder
ज़रूरी नहीं |
टाइप:
string optional |
pureServiceAreaBusinessesIncluded
ज़रूरी नहीं |
टाइप:
boolean optional |
readonly
ज़रूरी नहीं |
टाइप:
boolean optional |
requestedLanguage
ज़रूरी नहीं |
टाइप:
string optional |
requestedRegion
ज़रूरी नहीं |
टाइप:
string optional |
unitSystem
ज़रूरी नहीं |
टाइप:
UnitSystem optional |
value
ज़रूरी नहीं |
टाइप:
string optionalइनपुट एलिमेंट की वैल्यू. |
PlacePredictionSelectEvent क्लास
class
google.maps.places.PlacePredictionSelectEvent
extends Event
library "places"
यह इवेंट तब ट्रिगर होता है, जब उपयोगकर्ता PlaceAutocompleteElement की मदद से, अनुमानित आइटम चुनता है. event.placePrediction की मदद से, चुने गए आइटम को ऐक्सेस करें.
PlacePrediction.toPlace को कॉल करके, placePrediction को Place में बदलें.
const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places");
प्रॉपर्टी | |
|---|---|
placePrediction
readonly |
टाइप:
PlacePredictionPlacePrediction.toPlace पर कॉल करके, इसे Place में बदलें. |
BasicPlaceAutocompleteElement क्लास
class
google.maps.places.BasicPlaceAutocompleteElement
extends HTMLElement
implements BasicPlaceAutocompleteElementOptions
library "places"
BasicPlaceAutocompleteElement, HTMLElement की सबक्लास है. यह Places Autocomplete 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");
निर्माता | |
|---|---|
BasicPlaceAutocompleteElement |
BasicPlaceAutocompleteElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
description
attr: description |
टाइप:
string optionalइनपुट एलिमेंट के लिए इस्तेमाल किया जाने वाला ब्यौरा. इनपुट एलिमेंट पर फ़ोकस होने पर, स्क्रीन रीडर इसका पता लगा लेंगे. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby पर जाएं.
एचटीएमएल एट्रिब्यूट: description="string" |
disabled
attr: disabled |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanइनपुट एलिमेंट बंद है या नहीं. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled पर जाएं.
एचटीएमएल एट्रिब्यूट: disabled |
futureOpeningBusinessesIncluded
attr: future-opening-businesses-included |
टाइप:
boolean optionalक्या ऐसी जगहों को शामिल करना है जो अभी खुली नहीं हैं, लेकिन आने वाले समय में खुल सकती हैं.
एचटीएमएल एट्रिब्यूट: future-opening-businesses-included |
includedPrimaryTypes
attr: included-primary-types |
टाइप:
Array<string> optionalशामिल किया गया मुख्य जगह का टाइप (उदाहरण के लिए, "restaurant" या "gas_station").
किसी जगह की जानकारी सिर्फ़ तब दिखती है, जब उसका मुख्य टाइप इस सूची में शामिल हो. ज़्यादा से ज़्यादा पांच वैल्यू दी जा सकती हैं. अगर कोई टाइप नहीं बताया जाता है, तो सभी तरह की जगहों की जानकारी दिखती है. एचटीएमएल एट्रिब्यूट: included-primary-types="type1 type2 type3..." |
includedRegionCodes
attr: included-region-codes |
टाइप:
Array<string> optionalसिर्फ़ उन इलाकों के नतीजे शामिल करें जिनके लिए दो वर्णों वाले CLDR रीजन कोड दिए गए हैं. ज़्यादा से ज़्यादा 15 कोड दिए जा सकते हैं. खाली सेट होने पर, नतीजों पर कोई पाबंदी नहीं लगेगी. अगर
locationRestriction और includedRegionCodes, दोनों सेट हैं, तो नतीजे इंटरसेक्शन वाले इलाके में दिखेंगे.एचटीएमएल एट्रिब्यूट: included-region-codes="c1 c2 c3..." |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
इन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: internal-usage-attribution-ids="space separated strings" |
locationBias |
टाइप:
LocationBias optionalजगहें खोजते समय इस्तेमाल की जाने वाली सॉफ़्ट बाउंड्री या हिंट. |
locationRestriction |
टाइप:
LocationRestriction optionalखोज के नतीजों को सीमित करने के लिए बाउंड. |
maxlength
attr: maxlength |
टाइप:
number optionalउपयोगकर्ता ज़्यादा से ज़्यादा कितने वर्ण डाल सकता है. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength पर जाएं.
एचटीएमएल एट्रिब्यूट: maxlength="number" |
name
attr: name |
टाइप:
string optionalइनपुट एलिमेंट के लिए इस्तेमाल किया जाने वाला नाम. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name पर जाएं. यह इनपुट के लिए, नाम एट्रिब्यूट की तरह ही काम करता है. ध्यान दें कि फ़ॉर्म सबमिट करते समय इसी नाम का इस्तेमाल किया जाएगा. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form पर जाएं.
एचटीएमएल एट्रिब्यूट: name="string" |
noClearButton
attr: no-clear-button |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: boolean'मिटाएं' बटन को छिपाना है या नहीं.
एचटीएमएल एट्रिब्यूट: no-clear-button |
noInputIcon
attr: no-input-icon |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanइनपुट आइकॉन को छिपाना है या नहीं.
एचटीएमएल एट्रिब्यूट: no-input-icon |
origin
attr: origin |
इनपुट टाइप:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalआउटपुट टाइप: LatLngAltitude optionalदूरी का हिसाब लगाने के लिए, शुरुआती जगह. अगर यह जानकारी नहीं दी जाती है, तो दूरी का हिसाब नहीं लगाया जाता. अगर ऊंचाई की जानकारी दी गई है, तो उसका इस्तेमाल कैलकुलेशन में नहीं किया जाता.
एचटीएमएल एट्रिब्यूट:
|
placeholder
attr: placeholder |
टाइप:
string optionalइनपुट एलिमेंट के लिए इस्तेमाल किया जाने वाला प्लेसहोल्डर टेक्स्ट. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder पर जाएं.
एचटीएमएल एट्रिब्यूट: placeholder="string" |
pureServiceAreaBusinessesIncluded
attr: pure-service-area-businesses-included |
टाइप:
boolean optionalक्या ऐसी जगहों को शामिल करना है जो सिर्फ़ घर या दुकान पर सेवा देने वाले कारोबार हैं.
एचटीएमएल एट्रिब्यूट: pure-service-area-businesses-included |
readonly
attr: readonly |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanइनपुट एलिमेंट रीड-ओनली है या नहीं. ज़्यादा जानकारी के लिए, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly पर जाएं.
एचटीएमएल एट्रिब्यूट: readonly |
requestedLanguage
attr: requested-language |
टाइप:
string optionalअगर हो सके, तो उस भाषा के लिए भाषा आइडेंटिफ़ायर जिसमें नतीजे दिखाए जाने चाहिए. चुनी गई भाषा में मिलने वाले नतीजों को ज़्यादा अच्छी रैंकिंग दी जा सकती है. हालांकि, सुझाव इस भाषा तक ही सीमित नहीं हैं. उपलब्ध भाषाओं की सूची देखें.
एचटीएमएल एट्रिब्यूट: requested-language="string" |
requestedRegion
attr: requested-region |
टाइप:
string optionalरीजन कोड, जिसका इस्तेमाल नतीजों को फ़ॉर्मैट और फ़िल्टर करने के लिए किया जाता है. इससे, इस देश के लिए सुझावों पर पाबंदी नहीं लगती. क्षेत्र कोड, दो वर्णों वाली ccTLD ("टॉप-लेवल डोमेन") वैल्यू स्वीकार करता है. ज़्यादातर ccTLD कोड, ISO 3166-1 कोड से मिलते-जुलते होते हैं. हालांकि, कुछ अपवाद भी होते हैं. उदाहरण के लिए, यूनाइटेड किंगडम का ccTLD "uk" (
.co.uk) है, जबकि इसका ISO 3166-1 कोड "gb" है. तकनीकी तौर पर, यह कोड "यूनाइटेड किंगडम ऑफ़ ग्रेट ब्रिटेन ऐंड नॉर्दर्न आयरलैंड" के लिए है.एचटीएमएल एट्रिब्यूट: requested-region="string" |
unitSystem
attr: unit-system |
दूरी दिखाने के लिए इस्तेमाल किया जाने वाला यूनिट सिस्टम. अगर यूनिट सिस्टम की जानकारी नहीं दी जाती है, तो requestedRegion के आधार पर यूनिट सिस्टम तय किया जाता है.
एचटीएमएल एट्रिब्यूट: unit-system="value-name" |
स्लॉट गेम | |
|---|---|
clear-icon |
यह स्लॉट किए गए एलिमेंट को 'मिटाएं' आइकॉन की जगह पर रखता है. इनपुट बॉक्स में टेक्स्ट होने पर, 'मिटाएं' बटन इनपुट बॉक्स के आखिर में दिखता है. |
input-icon |
स्लॉट किए गए एलिमेंट को इनपुट आइकॉन की जगह पर रखता है. इनलाइन मोड में, इनपुट बॉक्स की शुरुआत में इनपुट आइकॉन दिखता है. |
prediction-item-icon |
इस स्लॉट में, अनुमानित आइटम के बगल में दिखाए गए आइकॉन के तौर पर रेंडर करने के लिए, सिर्फ़ एक <template> एलिमेंट डाला जा सकता है. |
पुर्ज़े | |
|---|---|
focus-ring |
फ़ोकस किए गए एलिमेंट (इनपुट या अनुमानित आइटम) के आस-पास फ़ोकस रिंग दिखाने के लिए इस्तेमाल किया जाने वाला एलिमेंट |
input |
ऑटोकंप्लीट एलिमेंट के लिए इनपुट एलिमेंट. |
prediction-item |
सुझावों के ड्रॉप-डाउन में मौजूद एक आइटम, जो किसी एक सुझाव को दिखाता है. |
prediction-item-icon |
अनुमानों की सूची में मौजूद हर आइटम की बाईं ओर दिखने वाला आइकॉन. |
prediction-item-main-text |
अनुमान-आइटम का एक हिस्सा, जो अनुमान का मुख्य टेक्स्ट होता है. भौगोलिक जगहों के लिए, इसमें 'सिडनी' जैसी जगह का नाम या '10 किंग स्ट्रीट' जैसी सड़क का नाम और नंबर शामिल होता है. डिफ़ॉल्ट रूप से, prediction-item-main-text का रंग काला होता है. अगर prediction-item में कोई और टेक्स्ट है, तो वह prediction-item-main-text के बाहर होता है. साथ ही, उसकी स्टाइलिंग prediction-item से ली जाती है. डिफ़ॉल्ट रूप से, यह स्लेटी रंग का होता है. अतिरिक्त टेक्स्ट आम तौर पर एक पता होता है. |
prediction-item-match |
अनुमान का वह हिस्सा जो उपयोगकर्ता के इनपुट से मेल खाता है. डिफ़ॉल्ट रूप से, मैच होने वाले इस टेक्स्ट को बोल्ड टेक्स्ट में हाइलाइट किया जाता है. ध्यान दें कि मैच होने वाले टेक्स्ट को सिर्फ़ prediction-item-main-text में हाइलाइट किया जाता है. |
prediction-item-nonmatch |
सुझाव के मुख्य टेक्स्ट का वह हिस्सा जो उपयोगकर्ता के इनपुट से मेल नहीं खाता. |
prediction-item-secondary-text |
सुझाव वाले आइटम का एक हिस्सा, जो सुझाव का सेकंडरी टेक्स्ट होता है. अतिरिक्त टेक्स्ट आम तौर पर एक पता होता है. |
prediction-item-selected |
जब उपयोगकर्ता कीबोर्ड का इस्तेमाल करके किसी आइटम पर जाता है, तब वह आइटम हाइलाइट हो जाता है. ध्यान दें: चुने गए आइटम पर, इस पार्ट की स्टाइल और अनुमानित आइटम वाले पार्ट की स्टाइल, दोनों का असर पड़ेगा. |
prediction-list |
यह विज़ुअल एलिमेंट, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सेवा से मिले सुझावों की सूची दिखाता है. यह सूची, PlaceAutocompleteElement के नीचे ड्रॉपडाउन मेन्यू के तौर पर दिखती है. |
सीएसएस प्रॉपर्टी | |
|---|---|
background-color |
एलिमेंट के बैकग्राउंड का रंग बदलता है. |
border |
यह विकल्प, एलिमेंट के बॉर्डर को बदल देता है. |
border-radius |
यह एलिमेंट के बॉर्डर रेडियस को बदल देता है. |
color |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
color-scheme |
इससे पता चलता है कि इस एलिमेंट को किस कलर स्कीम में रेंडर किया जा सकता है. ज़्यादा जानकारी के लिए, color-scheme दस्तावेज़ देखें. डिफ़ॉल्ट रूप से, यह color-scheme: light dark पर सेट होता है. |
font |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
font-family |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
font-size |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
font-style |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
font-weight |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
line-height |
यह एलिमेंट के फ़ॉन्ट को बदल देता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
gmp-error |
function(errorEvent)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब बैकएंड को किया गया अनुरोध अस्वीकार कर दिया जाता है. उदाहरण के लिए, गलत एपीआई पासकोड. यह इवेंट बबल नहीं होता. |
gmp-select |
function(placeSelectEvent)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब कोई उपयोगकर्ता जगह के अनुमान को चुनता है. इसमें Place ऑब्जेक्ट शामिल होता है. |
BasicPlaceAutocompleteElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.BasicPlaceAutocompleteElementOptions
BasicPlaceAutocompleteElement ने लागू किया
BasicPlaceAutocompleteElement बनाने के विकल्प.
प्रॉपर्टी | |
|---|---|
description
ज़रूरी नहीं |
टाइप:
string optionalइनपुट एलिमेंट के लिए इस्तेमाल किया जाने वाला ब्यौरा. इनपुट एलिमेंट पर फ़ोकस होने पर, स्क्रीन रीडर इसका पता लगा लेंगे. |
disabled
ज़रूरी नहीं |
टाइप:
boolean optional |
futureOpeningBusinessesIncluded
ज़रूरी नहीं |
टाइप:
boolean optional |
includedPrimaryTypes
ज़रूरी नहीं |
टाइप:
Array<string> optional |
includedRegionCodes
ज़रूरी नहीं |
टाइप:
Array<string> optional |
internalUsageAttributionIds
ज़रूरी नहीं |
टाइप:
Iterable<string> optional |
locationBias
ज़रूरी नहीं |
टाइप:
LocationBias optional |
locationRestriction
ज़रूरी नहीं |
टाइप:
LocationRestriction optional |
maxlength
ज़रूरी नहीं |
टाइप:
number optional |
name
ज़रूरी नहीं |
टाइप:
string optional |
noClearButton
ज़रूरी नहीं |
टाइप:
boolean optional |
noInputIcon
ज़रूरी नहीं |
टाइप:
boolean optional |
origin
ज़रूरी नहीं |
टाइप:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
placeholder
ज़रूरी नहीं |
टाइप:
string optional |
pureServiceAreaBusinessesIncluded
ज़रूरी नहीं |
टाइप:
boolean optional |
readonly
ज़रूरी नहीं |
टाइप:
boolean optional |
requestedLanguage
ज़रूरी नहीं |
टाइप:
string optional |
requestedRegion
ज़रूरी नहीं |
टाइप:
string optional |
unitSystem
ज़रूरी नहीं |
टाइप:
UnitSystem optional |
PlaceDetailsElement क्लास
class
google.maps.places.PlaceDetailsElement
extends HTMLElement
implements PlaceDetailsElementOptions
extended by AdvancedPlaceDetailsElement
library "places"
इससे किसी जगह की जानकारी, फ़ुल लेआउट में दिखती है. रेंडर की जाने वाली जगह की जानकारी देने के लिए, PlaceDetailsPlaceRequestElement या PlaceDetailsLocationRequestElement जोड़ें. कौनसा कॉन्टेंट रेंडर करना है, यह बताने के लिए , PlaceContentConfigElementPlaceStandardContentElement या 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> इस एलिमेंट का इस्तेमाल करने के लिए, Google Cloud Console में जाकर अपने प्रोजेक्ट के लिए जगहों की जानकारी देने वाली यूआई किट API को चालू करें.
<gmp-place-details internal-usage-attribution-ids="space separated strings"> </gmp-place-details>
const {PlaceDetailsElement} = await google.maps.importLibrary("places");
निर्माता | |
|---|---|
PlaceDetailsElement |
PlaceDetailsElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
इन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: internal-usage-attribution-ids="space separated strings" |
place
readonly |
टाइप:
Place optionalसिर्फ़ पढ़ने का ऐक्सेस. Place ऑब्जेक्ट में, रेंडर की गई मौजूदा जगह का आईडी, जगह की जानकारी, और व्यूपोर्ट शामिल होता है. |
सीएसएस प्रॉपर्टी | |
|---|---|
--gmp-button-border-color |
"Maps में खोलें" बटन के बॉर्डर का रंग. |
--gmp-button-border-radius |
"Maps में खोलें" बटन का बॉर्डर रेडियस. |
--gmp-button-border-width |
"Maps में खोलें" बटन के बॉर्डर की चौड़ाई. |
--gmp-collage-border-radius-outer |
मीडिया कोलाज के बाहरी कोनों का बॉर्डर रेडियस. |
--gmp-dialog-border-radius |
Google Maps के डिसक्लोज़र डायलॉग का बॉर्डर रेडियस. |
--gmp-mat-color-disabled-surface |
सरफ़ेस का रंग, बंद की गई स्थितियों या मौजूद न होने की जानकारी देने के लिए इस्तेमाल किया जाता है. इसका इस्तेमाल, समीक्षा के लिए खाली स्टार दिखाने के लिए किया जाता है. |
--gmp-mat-color-info |
जानकारी देने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल व्हीलचेयर के आइकॉन के लिए किया जाता है. |
--gmp-mat-color-negative |
नेगेटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, 'अभी खुला है' स्टेटस में "बंद है" टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-neutral-container |
न्यूट्रल कलर से भरे यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए कंटेनर का रंग. इसका इस्तेमाल, इमेज प्लेसहोल्डर और समीक्षा पब्लिश होने की तारीख के बैज के लिए किया जाता है. |
--gmp-mat-color-on-neutral-container |
न्यूट्रल कंटेनर के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल, समीक्षा पब्लिश होने की तारीख के बैज और ईवी चार्जर की उपलब्धता के बैज के लिए किया जाता है. हालांकि, ऐसा तब किया जाता है, जब ये बैज उपलब्ध न हों. |
--gmp-mat-color-on-positive-container |
पॉज़िटिव कंटेनर के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल, ईवी चार्जर की उपलब्धता वाले बैज के लिए किया जाता है. |
--gmp-mat-color-on-secondary-container |
सेकंडरी कंटेनर के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल, "Maps में खोलें" बटन पर मौजूद टेक्स्ट और आइकॉन के लिए किया जाता है. |
--gmp-mat-color-on-surface |
किसी भी रंग के बैकग्राउंड पर टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल सामान्य टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-on-surface-variant |
किसी भी रंग के बैकग्राउंड पर टेक्स्ट और आइकॉन के लिए, कम हाइलाइट करने वाला रंग. इसका इस्तेमाल, कम अहमियत वाले टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-outline-decorative |
नॉन-इंटरैक्टिव एलिमेंट की आउटलाइन का रंग. इसका इस्तेमाल एलिमेंट के बॉर्डर के लिए किया जाता है. |
--gmp-mat-color-positive |
पॉज़िटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, 'अभी खुला है' स्टेटस में "खुला है" टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-positive-container |
पॉज़िटिव सेंटिमेंट दिखाने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए कंटेनर का रंग. इसका इस्तेमाल, ईवी चार्जर की उपलब्धता वाले बैज के लिए किया जाता है. |
--gmp-mat-color-primary |
सरफ़ेस के रंग के हिसाब से, इंटरैक्टिव टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल समीक्षा की संख्या, Google Maps के डिसक्लोज़र डायलॉग में मौजूद लिंक, वेबसाइट के लिंक, खास जानकारी वाले टैब में मौजूद आइकॉन, और टैब बार के टाइटल पर (कर्सर घुमाने / फ़ोकस करने / टेक्स्ट के रंग) के लिए किया जाता है. |
--gmp-mat-color-secondary-container |
सरफ़ेस के मुकाबले कम गहरा रंग भरें, टोनल बटन जैसे कम अहम कॉम्पोनेंट के लिए इस्तेमाल किया जाता है. इसका इस्तेमाल, "Maps में खोलें" बटन के बैकग्राउंड के लिए किया जाता है. |
--gmp-mat-color-surface |
बैकग्राउंड के लिए रंग. इसका इस्तेमाल, एलिमेंट के बैकग्राउंड और Google Maps के डिसक्लोज़र डायलॉग के लिए किया जाता है. |
--gmp-mat-font-body-medium |
इसका इस्तेमाल, Google Maps के डिसक्लोज़र डायलॉग में जगह के पते, रेटिंग, टाइप, कीमत, 'अभी खुला है' स्टेटस, कारोबार के खुले होने का समय, समीक्षा, फ़ोन नंबर, वेबसाइट, Plus Code, मुख्य सुविधाओं, और मुख्य टेक्स्ट के लिए किया जाता है. |
--gmp-mat-font-body-small |
'इसके बारे में जानकारी' टैब में, सुविधाओं की सूची के मुख्य टेक्स्ट के लिए इस्तेमाल किया जाता है. |
--gmp-mat-font-display-small |
इसका इस्तेमाल, जगह के नाम और 'जानकारी' टैब में मौजूद हर सुविधा की हेडिंग के टेक्स्ट के लिए किया जाता है. |
--gmp-mat-font-family |
सभी टेक्स्ट के लिए इस्तेमाल की जाने वाली बेस फ़ॉन्ट फ़ैमिली. |
--gmp-mat-font-headline-medium |
इसका इस्तेमाल, Google Maps के डिसक्लोज़र डायलॉग में हेडिंग टेक्स्ट के लिए किया जाता है. |
--gmp-mat-font-label-large |
इसका इस्तेमाल टैब के टाइटल, "Maps में खोलें" बटन, फ़ोटो गैलरी में समीक्षा करने वाले व्यक्ति के एट्रिब्यूशन टेक्स्ट, समीक्षाओं वाले सेक्शन में समीक्षा करने वाले व्यक्ति के एट्रिब्यूशन टेक्स्ट, और Google Maps के डिसक्लोज़र डायलॉग में मौजूद लिंक के लिए किया जाता है. |
--gmp-mat-font-label-medium |
इसका इस्तेमाल, फ़ोटो की संख्या वाले बैज और समीक्षा पब्लिश होने की तारीख वाले बैज के लिए किया जाता है. |
--gmp-mat-font-title-small |
इसका इस्तेमाल, 'जानकारी' टैब में हर सेक्शन के टाइटल के लिए किया जाता है. |
--gmp-mat-spacing-extra-large |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-extra-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-large |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-medium |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-two-extra-large |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-star-rating-color |
रेटिंग में भरे हुए स्टार का रंग. |
background-color |
एलिमेंट के बैकग्राउंड का रंग बदलता है. |
border |
यह विकल्प, एलिमेंट के बॉर्डर को बदल देता है. |
border-radius |
यह एलिमेंट के बॉर्डर रेडियस को बदल देता है. |
color-scheme |
इससे पता चलता है कि इस एलिमेंट को किस कलर स्कीम में रेंडर किया जा सकता है. ज़्यादा जानकारी के लिए, color-scheme दस्तावेज़ देखें. डिफ़ॉल्ट रूप से, यह color-scheme: light dark पर सेट होता है. |
font-size |
एलिमेंट में मौजूद सभी टेक्स्ट और आइकॉन को स्केल करता है. इन्हें ems में तय किया जाता है. डिफ़ॉल्ट रूप से, यह 16px पर सेट होता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
gmp-error |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब बैकएंड को किया गया अनुरोध अस्वीकार कर दिया जाता है. उदाहरण के लिए, गलत एपीआई पासकोड. यह इवेंट बबल नहीं होता. |
gmp-load |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब एलिमेंट लोड होता है और उसका कॉन्टेंट रेंडर होता है. यह इवेंट बबल नहीं होता. |
PlaceDetailsElementOptions interface
इंटरफ़ेस
google.maps.places.PlaceDetailsElementOptions
AdvancedPlaceDetailsElementOptions ने एक्सटेंड किया है
AdvancedPlaceDetailsElement, PlaceDetailsElement ने लागू किया है
PlaceDetailsElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
internalUsageAttributionIds
ज़रूरी नहीं |
टाइप:
Iterable<string> optionalइन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है. |
PlaceDetailsCompactElement क्लास
class
google.maps.places.PlaceDetailsCompactElement
extends HTMLElement
implements PlaceDetailsCompactElementOptions
extended by AdvancedPlaceDetailsCompactElement
library "places"
इससे किसी जगह की जानकारी, कॉम्पैक्ट लेआउट में दिखती है. रेंडर की जाने वाली जगह की जानकारी देने के लिए, PlaceDetailsPlaceRequestElement या PlaceDetailsLocationRequestElement जोड़ें. कौनसा कॉन्टेंट रेंडर करना है, यह बताने के लिए , PlaceContentConfigElementPlaceStandardContentElement या 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> इस एलिमेंट का इस्तेमाल करने के लिए, Google Cloud Console में जाकर अपने प्रोजेक्ट के लिए जगहों की जानकारी देने वाली यूआई किट API को चालू करें.
<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");
निर्माता | |
|---|---|
PlaceDetailsCompactElement |
PlaceDetailsCompactElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
इन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
टाइप:
PlaceDetailsOrientation optionalडिफ़ॉल्ट:
PlaceDetailsOrientation.VERTICALएलिमेंट का ओरिएंटेशन वैरिएंट (वर्टिकल या हॉरिज़ॉन्टल).
एचटीएमएल एट्रिब्यूट: orientation="value-name" |
place
readonly |
टाइप:
Place optionalसिर्फ़ पढ़ने का ऐक्सेस. Place ऑब्जेक्ट में, रेंडर की गई मौजूदा जगह का आईडी, जगह की जानकारी, और व्यूपोर्ट शामिल होता है. |
truncationPreferred
attr: truncation-preferred |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanडिफ़ॉल्ट:
falseअगर सही है, तो जगह के नाम और पते को रैप करने के बजाय, एक लाइन में फ़िट करने के लिए छोटा कर देता है.
एचटीएमएल एट्रिब्यूट: truncation-preferred |
सीएसएस प्रॉपर्टी | |
|---|---|
--gmp-button-border-color |
"Maps में खोलें" बटन के बॉर्डर का रंग. |
--gmp-button-border-radius |
"Maps में खोलें" बटन का बॉर्डर रेडियस. |
--gmp-button-border-width |
"Maps में खोलें" बटन के बॉर्डर की चौड़ाई. |
--gmp-dialog-border-radius |
Google Maps के डिसक्लोज़र डायलॉग का बॉर्डर रेडियस. |
--gmp-mat-color-info |
जानकारी देने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल व्हीलचेयर के आइकॉन के लिए किया जाता है. |
--gmp-mat-color-negative |
नेगेटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, 'अभी खुला है' स्टेटस में "बंद है" टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-neutral-container |
न्यूट्रल कलर से भरे यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए कंटेनर का रंग. इसका इस्तेमाल इमेज प्लेसहोल्डर के लिए किया जाता है. |
--gmp-mat-color-on-secondary-container |
सेकंडरी कंटेनर के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल, "Maps में खोलें" बटन पर मौजूद टेक्स्ट और आइकॉन के लिए किया जाता है. |
--gmp-mat-color-on-surface |
किसी भी रंग के बैकग्राउंड पर टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल सामान्य टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-on-surface-variant |
किसी भी रंग के बैकग्राउंड पर टेक्स्ट और आइकॉन के लिए, कम हाइलाइट करने वाला रंग. इसका इस्तेमाल, कम अहमियत वाले टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-outline-decorative |
नॉन-इंटरैक्टिव एलिमेंट की आउटलाइन का रंग. इसका इस्तेमाल एलिमेंट के बॉर्डर के लिए किया जाता है. |
--gmp-mat-color-positive |
पॉज़िटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, 'अभी खुला है' स्टेटस में "खुला है" टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-primary |
सरफ़ेस के रंग के हिसाब से, इंटरैक्टिव टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल, समीक्षाओं की संख्या के साथ-साथ Google Maps के डिसक्लोज़र डायलॉग में मौजूद लिंक के लिए किया जाता है. |
--gmp-mat-color-secondary-container |
सरफ़ेस के मुकाबले कम गहरा रंग भरें, टोनल बटन जैसे कम अहम कॉम्पोनेंट के लिए इस्तेमाल किया जाता है. इसका इस्तेमाल, "Maps में खोलें" बटन के बैकग्राउंड के लिए किया जाता है. |
--gmp-mat-color-surface |
बैकग्राउंड के लिए रंग. इसका इस्तेमाल, एलिमेंट के बैकग्राउंड और Google Maps के डिसक्लोज़र डायलॉग के लिए किया जाता है. |
--gmp-mat-font-body-medium |
Google Maps के डिसक्लोज़र डायलॉग में, मुख्य टेक्स्ट के लिए इस्तेमाल किया जाता है. |
--gmp-mat-font-body-small |
इसका इस्तेमाल जगह के पते, रेटिंग, टाइप, कीमत, और 'अभी खुला है' स्टेटस के लिए किया जाता है. |
--gmp-mat-font-family |
सभी टेक्स्ट के लिए इस्तेमाल की जाने वाली बेस फ़ॉन्ट फ़ैमिली. |
--gmp-mat-font-headline-medium |
इसका इस्तेमाल, Google Maps के डिसक्लोज़र डायलॉग में हेडिंग टेक्स्ट के लिए किया जाता है. |
--gmp-mat-font-label-large |
इसका इस्तेमाल, "Maps में खोलें" बटन के साथ-साथ Google Maps के डिसक्लोज़र डायलॉग में मौजूद लिंक और फ़ोटो गैलरी में समीक्षा करने वाले व्यक्ति के एट्रिब्यूशन टेक्स्ट के लिए किया जाता है. |
--gmp-mat-font-label-medium |
इसका इस्तेमाल, फ़ोटो की संख्या वाले बैज के लिए किया जाता है. |
--gmp-mat-font-title-small |
इसका इस्तेमाल जगह के नाम के लिए किया जाता है. |
--gmp-mat-spacing-extra-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-large |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-medium |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-star-rating-color |
रेटिंग में भरे हुए स्टार का रंग. |
--gmp-thumbnail-border-radius |
जगह की इमेज के थंबनेल का बॉर्डर रेडियस. |
background-color |
एलिमेंट के बैकग्राउंड का रंग बदलता है. |
border |
यह विकल्प, एलिमेंट के बॉर्डर को बदल देता है. |
border-radius |
यह एलिमेंट के बॉर्डर रेडियस को बदल देता है. |
color-scheme |
इससे पता चलता है कि इस एलिमेंट को किस कलर स्कीम में रेंडर किया जा सकता है. ज़्यादा जानकारी के लिए, color-scheme दस्तावेज़ देखें. डिफ़ॉल्ट रूप से, यह color-scheme: light dark पर सेट होता है. |
font-size |
एलिमेंट में मौजूद सभी टेक्स्ट और आइकॉन को स्केल करता है. इन्हें ems में तय किया जाता है. डिफ़ॉल्ट रूप से, यह 16px पर सेट होता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
gmp-error |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब बैकएंड को किया गया अनुरोध अस्वीकार कर दिया जाता है. उदाहरण के लिए, गलत एपीआई पासकोड. यह इवेंट बबल नहीं होता. |
gmp-load |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब एलिमेंट लोड होता है और उसका कॉन्टेंट रेंडर होता है. यह इवेंट बबल नहीं होता. |
PlaceDetailsCompactElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceDetailsCompactElementOptions
AdvancedPlaceDetailsCompactElementOptions ने एक्सटेंड किया है
AdvancedPlaceDetailsCompactElement, PlaceDetailsCompactElement ने लागू किया है
PlaceDetailsCompactElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
internalUsageAttributionIds
ज़रूरी नहीं |
टाइप:
Iterable<string> optionalइन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है. |
orientation
ज़रूरी नहीं |
टाइप:
PlaceDetailsOrientation optional |
truncationPreferred
ज़रूरी नहीं |
टाइप:
boolean optional |
AdvancedPlaceDetailsElement क्लास
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> इस एलिमेंट का इस्तेमाल करने के लिए, Google Cloud Console में जाकर अपने प्रोजेक्ट के लिए जगहों की जानकारी देने वाली यूआई किट API को चालू करें.
<gmp-advanced-place-details internal-usage-attribution-ids="space separated strings"> </gmp-advanced-place-details>
const {AdvancedPlaceDetailsElement} = await google.maps.importLibrary("places");
निर्माता | |
|---|---|
AdvancedPlaceDetailsElement |
AdvancedPlaceDetailsElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
इन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: internal-usage-attribution-ids="space separated strings" |
place
readonly |
टाइप:
Place optionalसिर्फ़ पढ़ने का ऐक्सेस. Place ऑब्जेक्ट में, रेंडर की गई मौजूदा जगह का आईडी, जगह की जानकारी, और व्यूपोर्ट शामिल होता है. |
स्लॉट गेम | |
|---|---|
action-corner |
PlaceLinkElement और PlaceButtonElement के लिए एक स्लॉट. |
action-main |
PlaceLinkElement और PlaceButtonElement के लिए एक स्लॉट. |
|
कस्टम एचटीएमएल कॉन्टेंट के लिए एक स्लॉट, जो बुनियादी जानकारी वाले सेक्शन में सबसे नीचे रेंडर होता है. यह स्लॉट, मुख्य ऐक्शन बटन के ठीक नीचे होता है. |
|
कस्टम एचटीएमएल कॉन्टेंट के लिए एक स्लॉट, जो बुनियादी जानकारी वाले सेक्शन में जगह के नाम के ठीक ऊपर रेंडर होता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
इनहेरिट की गई:
gmp-error,
gmp-load
|
AdvancedPlaceDetailsElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.AdvancedPlaceDetailsElementOptions
PlaceDetailsElementOptions को एक्सटेंड करता है
AdvancedPlaceDetailsElement ने लागू किया है
AdvancedPlaceDetailsElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
internalUsageAttributionIds
ज़रूरी नहीं |
टाइप:
Iterable<string> optionalइन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है. |
AdvancedPlaceDetailsCompactElement क्लास
class
google.maps.places.AdvancedPlaceDetailsCompactElement
extends PlaceDetailsCompactElement, HTMLElement
implements AdvancedPlaceDetailsCompactElementOptions, PlaceDetailsCompactElementOptions
library "places"
इससे किसी जगह की जानकारी, कॉम्पैक्ट लेआउट में दिखती है. रेंडर की जाने वाली जगह की जानकारी देने के लिए, PlaceDetailsPlaceRequestElement या PlaceDetailsLocationRequestElement जोड़ें. रेंडर करने के लिए कॉन्टेंट को कॉन्फ़िगर करने के लिए, PlaceStandardContentElement, PlaceAllContentElement जोड़ें या खास कॉन्टेंट चाइल्ड तय करें.
इस एलिमेंट का इस्तेमाल करने के लिए, Google Cloud Console में अपने प्रोजेक्ट के लिए, जगहों की जानकारी देने वाली यूआई किट API को चालू करें.
<gmp-advanced-place-details-compact internal-usage-attribution-ids="space separated strings"> </gmp-advanced-place-details-compact>
const {AdvancedPlaceDetailsCompactElement} = await google.maps.importLibrary("places");
निर्माता | |
|---|---|
AdvancedPlaceDetailsCompactElement |
AdvancedPlaceDetailsCompactElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
इन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: internal-usage-attribution-ids="space separated strings" |
place
readonly |
टाइप:
Place optionalसिर्फ़ पढ़ने का ऐक्सेस. Place ऑब्जेक्ट में, रेंडर की गई मौजूदा जगह का आईडी, जगह की जानकारी, और व्यूपोर्ट शामिल होता है. |
इनहेरिट किया गया:
orientation (attr: orientation),
truncationPreferred (attr: truncation-preferred)
| |
स्लॉट गेम | |
|---|---|
action-corner |
PlaceLinkElement और PlaceButtonElement के लिए एक स्लॉट. |
action-main |
PlaceLinkElement और PlaceButtonElement के लिए एक स्लॉट. |
|
कस्टम एचटीएमएल कॉन्टेंट के लिए एक स्लॉट, जो बुनियादी जानकारी वाले सेक्शन में सबसे नीचे रेंडर होता है. यह स्लॉट, मुख्य ऐक्शन बटन के ठीक नीचे होता है. |
|
कस्टम एचटीएमएल कॉन्टेंट के लिए एक स्लॉट, जो बुनियादी जानकारी वाले सेक्शन में जगह के नाम के ठीक ऊपर रेंडर होता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
इनहेरिट की गई:
gmp-error,
gmp-load
|
AdvancedPlaceDetailsCompactElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.AdvancedPlaceDetailsCompactElementOptions
PlaceDetailsCompactElementOptions को एक्सटेंड करता है
AdvancedPlaceDetailsCompactElement ने लागू किया है
AdvancedPlaceDetailsCompactElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
internalUsageAttributionIds
ज़रूरी नहीं |
टाइप:
Iterable<string> optionalइन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है. |
इनहेरिट की गई:
orientation,
truncationPreferred
| |
PlaceDetailsOrientation कॉन्स्टेंट
कॉन्सटैंट
google.maps.places.PlaceDetailsOrientation
लाइब्रेरी "places"
PlaceDetailsCompactElement के लिए ओरिएंटेशन वैरिएंट.
इन कॉन्सटैंट को स्ट्रिंग के तौर पर भी इस्तेमाल किया जा सकता है. TypeScript में, स्ट्रिंग लिटरल को PlaceDetailsOrientationString टाइप से तय किया जाता है.
const {PlaceDetailsOrientation} = await google.maps.importLibrary("places");
कॉन्स्टेंट | |
|---|---|
HORIZONTAL |
हॉरिज़ॉन्टल ओरिएंटेशन. |
VERTICAL |
वर्टिकल ओरिएंटेशन. |
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");
निर्माता | |
|---|---|
PlaceDetailsPlaceRequestElement |
PlaceDetailsPlaceRequestElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
place
attr: place |
डिफ़ॉल्ट:
nullजगह की जानकारी देने वाले कॉम्पैक्ट एलिमेंट में जानकारी रेंडर करने के लिए, जगह का ऑब्जेक्ट, आईडी या संसाधन का नाम. यह प्रॉपर्टी, एट्रिब्यूट को संसाधन के नाम के तौर पर दिखाती है.
एचटीएमएल एट्रिब्यूट: place="places/###" |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
PlaceDetailsPlaceRequestElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceDetailsPlaceRequestElementOptions
PlaceDetailsPlaceRequestElement ने लागू किया
PlaceDetailsPlaceRequestElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
place
ज़रूरी नहीं |
टाइप:
Place|string optional |
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");
निर्माता | |
|---|---|
PlaceDetailsLocationRequestElement |
PlaceDetailsLocationRequestElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
location
attr: location |
इनपुट टाइप:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalआउटपुट टाइप: LatLngAltitude optionalडिफ़ॉल्ट:
nullवह जगह जिसकी जानकारी, Place Details एलिमेंट में रेंडर करनी है. यह
LatLngAltitude में बदल जाता है.एचटीएमएल एट्रिब्यूट: location="lat,lng" |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
PlaceDetailsLocationRequestElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceDetailsLocationRequestElementOptions
PlaceDetailsLocationRequestElement ने लागू किया
PlaceDetailsLocationRequestElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
location
ज़रूरी नहीं |
टाइप:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalवह जगह जिसके लिए रेंडर करना है. |
PlaceSearchElement क्लास
class
google.maps.places.PlaceSearchElement
extends HTMLElement
implements PlaceSearchElementOptions
extended by AdvancedPlaceSearchElement
library "places"
यह कॉम्पोनेंट, Place Search के नतीजों को सूची के तौर पर दिखाता है. नतीजे रेंडर करने के अनुरोध की जानकारी देने के लिए, PlaceTextSearchRequestElement या PlaceNearbySearchRequestElement जोड़ें. कौनसा कॉन्टेंट रेंडर करना है, यह बताने के लिए , PlaceContentConfigElementPlaceStandardContentElement या 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> Place Search एलिमेंट का इस्तेमाल करने के लिए, Google Cloud Console में जाकर अपने प्रोजेक्ट के लिए जगहों की जानकारी देने वाली यूआई किट API को चालू करें.
<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");
निर्माता | |
|---|---|
PlaceSearchElement |
PlaceSearchElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
attributionPosition
attr: attribution-position |
डिफ़ॉल्ट:
PlaceSearchAttributionPosition.TOPएट्रिब्यूशन लोगो और कानूनी तौर पर जानकारी ज़ाहिर करने वाले बटन की पोज़िशन.
एचटीएमएल एट्रिब्यूट: attribution-position="value-name" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
इन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
डिफ़ॉल्ट:
PlaceSearchOrientation.VERTICALएलिमेंट का ओरिएंटेशन वैरिएंट (वर्टिकल या हॉरिज़ॉन्टल).
एचटीएमएल एट्रिब्यूट: orientation="value-name" |
places
readonly |
सिर्फ़ पढ़ने का ऐक्सेस. Place ऑब्जेक्ट का कलेक्शन, जिसमें रेंडर की गई जगहों के आईडी, जगह की जानकारी, और व्यूपोर्ट शामिल हैं. |
selectable
attr: selectable |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanडिफ़ॉल्ट:
falseसूची में मौजूद आइटम चुने जा सकते हैं या नहीं. अगर वैल्यू 'सही' है, तो सूची के आइटम ऐसे बटन होंगे जिन पर क्लिक करने से
gmp-select इवेंट ट्रिगर होगा. कीबोर्ड से नेविगेट करने और चुनने की सुविधा भी काम करती है.एचटीएमएल एट्रिब्यूट: selectable |
truncationPreferred
attr: truncation-preferred |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanडिफ़ॉल्ट:
falseअगर इसकी वैल्यू true है, तो कॉन्टेंट की कुछ लाइनों को रैप करने के बजाय, उन्हें छोटा करके एक लाइन में फ़िट कर दिया जाता है.
एचटीएमएल एट्रिब्यूट: truncation-preferred |
सीएसएस प्रॉपर्टी | |
|---|---|
--gmp-button-border-color |
"Maps में खोलें" बटन के बॉर्डर का रंग. |
--gmp-button-border-radius |
"Maps में खोलें" बटन के लिए बॉर्डर रेडियस. |
--gmp-button-border-width |
"Maps में खोलें" बटन के लिए बॉर्डर की चौड़ाई. |
--gmp-card-border-radius |
जगह की जानकारी वाले कार्ड के लिए बॉर्डर रेडियस. |
--gmp-dialog-border-radius |
Google Maps के डिसक्लोज़र डायलॉग के लिए बॉर्डर रेडियस. |
--gmp-mat-color-info |
जानकारी देने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, व्हीलचेयर इस्तेमाल करने वालों के लिए सुलभ प्रवेश द्वार के आइकॉन के लिए किया जाता है. |
--gmp-mat-color-negative |
नेगेटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, किसी जगह के कारोबार के खुले होने के समय के लिए, "बंद है" लेबल के लिए किया जाता है. |
--gmp-mat-color-neutral-container |
न्यूट्रल कलर से भरे यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए कंटेनर का रंग. इसका इस्तेमाल, समीक्षा की तारीख के बैज और प्लेसहोल्डर के आकार लोड करने के लिए किया जाता है. |
--gmp-mat-color-on-neutral-container |
न्यूट्रल कंटेनर पर टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल, समीक्षा की तारीख के टेक्स्ट और लोड होने में हुई गड़बड़ी के टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-on-secondary-container |
सेकंडरी कंटेनर के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल बटन के टेक्स्ट और आइकॉन के लिए किया जाता है. |
--gmp-mat-color-on-surface |
सरफ़ेस के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल हेडिंग और डायलॉग बॉक्स के कॉन्टेंट के लिए किया जाता है. |
--gmp-mat-color-on-surface-variant |
सरफ़ेस के रंग के मुकाबले, टेक्स्ट और आइकॉन के लिए कम हाइलाइट किया गया रंग. इसका इस्तेमाल जगह की जानकारी के लिए किया जाता है. |
--gmp-mat-color-outline-decorative |
नॉन-इंटरैक्टिव एलिमेंट की आउटलाइन का रंग. इसका इस्तेमाल कंटेनर के बॉर्डर के लिए किया जाता है. |
--gmp-mat-color-positive |
पॉज़िटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, किसी जगह के कारोबार के खुले होने के समय के लिए, "खुला है" लेबल के लिए किया जाता है. |
--gmp-mat-color-primary |
सरफ़ेस के रंग के हिसाब से, इंटरैक्टिव टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल लिंक, लोड होने के इंडिकेटर, और खास जानकारी वाले आइकॉन के लिए किया जाता है. |
--gmp-mat-color-secondary-container |
किसी प्लैटफ़ॉर्म पर, रंग भरने के लिए कम ध्यान खींचने वाले रंग का इस्तेमाल करना. इसका इस्तेमाल बटन के बैकग्राउंड के लिए किया जाता है. |
--gmp-mat-color-surface |
बैकग्राउंड के लिए रंग. इसका इस्तेमाल कंटेनर और डायलॉग के बैकग्राउंड के लिए किया जाता है. |
--gmp-mat-font-body-small |
इसका इस्तेमाल जगह की जानकारी के लिए किया जाता है. |
--gmp-mat-font-family |
सभी टेक्स्ट के लिए बेस फ़ॉन्ट फ़ैमिली. |
--gmp-mat-font-headline-medium |
इसका इस्तेमाल डायलॉग हेडिंग के लिए किया जाता है. |
--gmp-mat-font-label-large |
इसका इस्तेमाल बटन के कॉन्टेंट के लिए किया जाता है. |
--gmp-mat-font-title-medium |
इसका इस्तेमाल जगह के नाम के लिए किया जाता है. |
--gmp-mat-spacing-extra-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-large |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-medium |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-star-rating-color |
स्टार रेटिंग में, भरे हुए स्टार का रंग. |
--gmp-thumbnail-border-radius |
जगह की थंबनेल इमेज के लिए बॉर्डर रेडियस. |
background-color |
एलिमेंट के बैकग्राउंड का रंग बदलता है. |
border |
यह विकल्प, एलिमेंट के बॉर्डर को बदल देता है. |
border-radius |
यह एलिमेंट के बॉर्डर रेडियस को बदल देता है. |
color-scheme |
इससे पता चलता है कि इस एलिमेंट को किस कलर स्कीम में रेंडर किया जा सकता है. ज़्यादा जानकारी के लिए, color-scheme दस्तावेज़ देखें. डिफ़ॉल्ट रूप से, यह color-scheme: light dark पर सेट होता है. |
font-size |
एलिमेंट में मौजूद सभी टेक्स्ट और आइकॉन को स्केल करता है. डिफ़ॉल्ट रूप से, यह 16px पर सेट होता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
gmp-error |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब बैकएंड को किया गया अनुरोध अस्वीकार कर दिया जाता है. उदाहरण के लिए, गलत एपीआई पासकोड. यह इवेंट बबल नहीं होता. |
gmp-load |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब एलिमेंट लोड होता है और उसका कॉन्टेंट रेंडर होता है. यह इवेंट बबल नहीं होता. |
gmp-select |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब सूची से कोई जगह चुनी जाती है. इसमें एक Place ऑब्जेक्ट होता है. इसमें चुनी गई जगह का आईडी, जगह की जानकारी, और व्यूपोर्ट होता है. |
PlaceSearchElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceSearchElementOptions
AdvancedPlaceSearchElementOptions ने एक्सटेंड किया है
AdvancedPlaceSearchElement, PlaceSearchElement ने लागू किया है
PlaceSearchElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
attributionPosition
ज़रूरी नहीं |
टाइप:
PlaceSearchAttributionPosition optional |
internalUsageAttributionIds
ज़रूरी नहीं |
टाइप:
Iterable<string> optionalइन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है. |
orientation
ज़रूरी नहीं |
टाइप:
PlaceSearchOrientation optional |
selectable
ज़रूरी नहीं |
टाइप:
boolean optional |
truncationPreferred
ज़रूरी नहीं |
टाइप:
boolean optional |
PlaceItemElement क्लास
class
google.maps.places.PlaceItemElement
extends HTMLElement
implements PlaceItemElementOptions
extended by AdvancedPlaceItemElement
library "places"
जगहों की सूची में मौजूद आइटम के लिए, सार्वजनिक वेब कॉम्पोनेंट रैपर (<gmp-place-item>). <gmp-place-item> कस्टम एलिमेंट, <gmp-place-search> में किसी जगह के नतीजे का कार्ड रेंडर करता है. हर <gmp-place-item>, जगहों की जानकारी देने वाली यूआई किट के चाइल्ड विज़ुअल कॉम्पोनेंट से बनी जगह की जानकारी दिखाता है.
<gmp-place-item></gmp-place-item>
const {PlaceItemElement} = await google.maps.importLibrary("places");
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
PlaceItemElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceItemElementOptions
AdvancedPlaceItemElementOptions ने एक्सटेंड किया है
AdvancedPlaceItemElement, PlaceItemElement ने लागू किया है
PlaceItemElement के लिए विकल्प.
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> जगह की जानकारी खोजने की बेहतर सुविधा वाले एलिमेंट का इस्तेमाल करने के लिए, Google Cloud Console में अपने प्रोजेक्ट के लिए Places UI Kit API को चालू करें.
<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");
निर्माता | |
|---|---|
AdvancedPlaceSearchElement |
AdvancedPlaceSearchElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
attributionPosition
attr: attribution-position |
डिफ़ॉल्ट:
PlaceSearchAttributionPosition.TOPएट्रिब्यूशन लोगो और कानूनी तौर पर जानकारी ज़ाहिर करने वाले बटन की पोज़िशन.
एचटीएमएल एट्रिब्यूट: attribution-position="value-name" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
इन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
डिफ़ॉल्ट:
PlaceSearchOrientation.VERTICALएलिमेंट का ओरिएंटेशन वैरिएंट (वर्टिकल या हॉरिज़ॉन्टल).
एचटीएमएल एट्रिब्यूट: orientation="value-name" |
selectable
attr: selectable |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanडिफ़ॉल्ट:
falseसूची में मौजूद आइटम चुने जा सकते हैं या नहीं. अगर वैल्यू 'सही' है, तो सूची के आइटम ऐसे बटन होंगे जिन पर क्लिक करने से
gmp-select इवेंट ट्रिगर होगा. कीबोर्ड से नेविगेट करने और चुनने की सुविधा भी काम करती है.एचटीएमएल एट्रिब्यूट: selectable |
truncationPreferred
attr: truncation-preferred |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanडिफ़ॉल्ट:
falseअगर इसकी वैल्यू true है, तो कॉन्टेंट की कुछ लाइनों को रैप करने के बजाय, उन्हें छोटा करके एक लाइन में फ़िट कर दिया जाता है.
एचटीएमएल एट्रिब्यूट: truncation-preferred |
इनहेरिट किया गया:
places
| |
स्लॉट गेम | |
|---|---|
details-item |
एचटीएमएल टेंप्लेट, जिसमें खोज के नतीजों में हर जगह के लिए रेंडर करने के लिए gmp-place विजेट शामिल हैं. |
सीएसएस प्रॉपर्टी | |
|---|---|
--gmp-button-border-color |
"Maps में खोलें" बटन के बॉर्डर का रंग. |
--gmp-button-border-radius |
"Maps में खोलें" बटन के लिए बॉर्डर रेडियस. |
--gmp-button-border-width |
"Maps में खोलें" बटन के लिए बॉर्डर की चौड़ाई. |
--gmp-card-border-radius |
जगह की जानकारी वाले कार्ड के लिए बॉर्डर रेडियस. |
--gmp-dialog-border-radius |
Google Maps के डिसक्लोज़र डायलॉग के लिए बॉर्डर रेडियस. |
--gmp-mat-color-info |
जानकारी देने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, व्हीलचेयर इस्तेमाल करने वालों के लिए सुलभ प्रवेश द्वार के आइकॉन के लिए किया जाता है. |
--gmp-mat-color-negative |
नेगेटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, किसी जगह के कारोबार के खुले होने के समय के लिए, "बंद है" लेबल के लिए किया जाता है. |
--gmp-mat-color-neutral-container |
न्यूट्रल कलर से भरे यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए कंटेनर का रंग. इसका इस्तेमाल, समीक्षा की तारीख के बैज और प्लेसहोल्डर के आकार लोड करने के लिए किया जाता है. |
--gmp-mat-color-on-neutral-container |
न्यूट्रल कंटेनर पर टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल, समीक्षा की तारीख के टेक्स्ट और लोड होने में हुई गड़बड़ी के टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-on-secondary-container |
सेकंडरी कंटेनर के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल बटन के टेक्स्ट और आइकॉन के लिए किया जाता है. |
--gmp-mat-color-on-surface |
सरफ़ेस के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल हेडिंग और डायलॉग बॉक्स के कॉन्टेंट के लिए किया जाता है. |
--gmp-mat-color-on-surface-variant |
सरफ़ेस के रंग के मुकाबले, टेक्स्ट और आइकॉन के लिए कम हाइलाइट किया गया रंग. इसका इस्तेमाल जगह की जानकारी के लिए किया जाता है. |
--gmp-mat-color-outline-decorative |
नॉन-इंटरैक्टिव एलिमेंट की आउटलाइन का रंग. इसका इस्तेमाल कंटेनर के बॉर्डर के लिए किया जाता है. |
--gmp-mat-color-positive |
पॉज़िटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, किसी जगह के कारोबार के खुले होने के समय के लिए, "खुला है" लेबल के लिए किया जाता है. |
--gmp-mat-color-primary |
सरफ़ेस के रंग के हिसाब से, इंटरैक्टिव टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल लिंक, लोड होने के इंडिकेटर, और खास जानकारी वाले आइकॉन के लिए किया जाता है. |
--gmp-mat-color-secondary-container |
किसी प्लैटफ़ॉर्म पर, रंग भरने के लिए कम ध्यान खींचने वाले रंग का इस्तेमाल करना. इसका इस्तेमाल बटन के बैकग्राउंड के लिए किया जाता है. |
--gmp-mat-color-surface |
बैकग्राउंड के लिए रंग. इसका इस्तेमाल कंटेनर और डायलॉग के बैकग्राउंड के लिए किया जाता है. |
--gmp-mat-font-body-small |
इसका इस्तेमाल जगह की जानकारी के लिए किया जाता है. |
--gmp-mat-font-family |
सभी टेक्स्ट के लिए बेस फ़ॉन्ट फ़ैमिली. |
--gmp-mat-font-headline-medium |
इसका इस्तेमाल डायलॉग हेडिंग के लिए किया जाता है. |
--gmp-mat-font-label-large |
इसका इस्तेमाल बटन के कॉन्टेंट के लिए किया जाता है. |
--gmp-mat-font-title-medium |
इसका इस्तेमाल जगह के नाम के लिए किया जाता है. |
--gmp-mat-spacing-extra-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-large |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-medium |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-star-rating-color |
स्टार रेटिंग में, भरे हुए स्टार का रंग. |
--gmp-thumbnail-border-radius |
जगह की थंबनेल इमेज के लिए बॉर्डर रेडियस. |
background-color |
एलिमेंट के बैकग्राउंड का रंग बदलता है. |
border |
यह विकल्प, एलिमेंट के बॉर्डर को बदल देता है. |
border-radius |
यह एलिमेंट के बॉर्डर रेडियस को बदल देता है. |
color-scheme |
इससे पता चलता है कि इस एलिमेंट को किस कलर स्कीम में रेंडर किया जा सकता है. ज़्यादा जानकारी के लिए, color-scheme दस्तावेज़ देखें. डिफ़ॉल्ट रूप से, यह color-scheme: light dark पर सेट होता है. |
font-size |
एलिमेंट में मौजूद सभी टेक्स्ट और आइकॉन को स्केल करता है. डिफ़ॉल्ट रूप से, यह 16px पर सेट होता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
gmp-error |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब बैकएंड को किया गया अनुरोध अस्वीकार कर दिया जाता है. उदाहरण के लिए, गलत एपीआई पासकोड. यह इवेंट बबल नहीं होता. |
gmp-load |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब एलिमेंट लोड होता है और उसका कॉन्टेंट रेंडर होता है. यह इवेंट बबल नहीं होता. |
gmp-select |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब सूची से कोई जगह चुनी जाती है. इसमें एक Place ऑब्जेक्ट होता है. इसमें चुनी गई जगह का आईडी, जगह की जानकारी, और व्यूपोर्ट होता है. |
AdvancedPlaceSearchElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.AdvancedPlaceSearchElementOptions
PlaceSearchElementOptions को एक्सटेंड करता है
AdvancedPlaceSearchElement ने लागू किया है
AdvancedPlaceSearchElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
attributionPosition
ज़रूरी नहीं |
टाइप:
PlaceSearchAttributionPosition optional |
internalUsageAttributionIds
ज़रूरी नहीं |
टाइप:
Iterable<string> optionalइन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है. |
orientation
ज़रूरी नहीं |
टाइप:
PlaceSearchOrientation optional |
selectable
ज़रूरी नहीं |
टाइप:
boolean optional |
truncationPreferred
ज़रूरी नहीं |
टाइप:
boolean optional |
AdvancedPlaceListElement क्लास
class
google.maps.places.AdvancedPlaceListElement
extends HTMLElement
implements AdvancedPlaceListElementOptions
library "places"
यह कॉम्पोनेंट, Place Search के नतीजों को सूची के तौर पर दिखाता है. एक या उससे ज़्यादा 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> ऐडवांस प्लेस लिस्ट एलिमेंट का इस्तेमाल करने के लिए, Google Cloud Console में अपने प्रोजेक्ट के लिए जगहों की जानकारी देने वाली यूआई किट API को चालू करें.
<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");
निर्माता | |
|---|---|
AdvancedPlaceListElement |
AdvancedPlaceListElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
attributionPosition
attr: attribution-position |
डिफ़ॉल्ट:
PlaceSearchAttributionPosition.TOPएट्रिब्यूशन लोगो और कानूनी तौर पर जानकारी ज़ाहिर करने वाले बटन की पोज़िशन.
एचटीएमएल एट्रिब्यूट: attribution-position="value-name" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
इन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
डिफ़ॉल्ट:
PlaceSearchOrientation.VERTICALएलिमेंट का ओरिएंटेशन वैरिएंट (वर्टिकल या हॉरिज़ॉन्टल).
एचटीएमएल एट्रिब्यूट: orientation="value-name" |
places
attr: places |
जगह के ऑब्जेक्ट की सूची, जिसमें वे आईडी शामिल हैं जिन्हें इस एलिमेंट में दिखाया जाना चाहिए. ध्यान दें कि अगर जगहों की प्रॉपर्टी में सेट की गई सभी जगहें रेंडर नहीं हो पाती हैं, तो हो सकता है कि वे न दिखें. जैसे, अमान्य आईडी, नेटवर्क के अनुरोध में गड़बड़ी वगैरह. फ़िलहाल दिख रही जगहों की जानकारी पाने के लिए, जगहों की प्रॉपर्टी को पढ़ा जा सकता है.
एचटीएमएल एट्रिब्यूट: places="space separated strings" |
selectable
attr: selectable |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanडिफ़ॉल्ट:
falseसूची में मौजूद आइटम चुने जा सकते हैं या नहीं. अगर वैल्यू 'सही' है, तो सूची के आइटम ऐसे बटन होंगे जिन पर क्लिक करने से
gmp-select इवेंट ट्रिगर होगा. कीबोर्ड से नेविगेट करने और चुनने की सुविधा भी काम करती है.एचटीएमएल एट्रिब्यूट: selectable |
truncationPreferred
attr: truncation-preferred |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanडिफ़ॉल्ट:
falseअगर इसकी वैल्यू true है, तो कॉन्टेंट की कुछ लाइनों को रैप करने के बजाय, उन्हें छोटा करके एक लाइन में फ़िट कर दिया जाता है.
एचटीएमएल एट्रिब्यूट: truncation-preferred |
स्लॉट गेम | |
|---|---|
details-item |
एचटीएमएल टेंप्लेट, जिसमें सूची में मौजूद हर जगह के लिए रेंडर करने के लिए gmp-place विजेट शामिल हैं. |
सीएसएस प्रॉपर्टी | |
|---|---|
--gmp-button-border-color |
"Maps में खोलें" बटन के बॉर्डर का रंग. |
--gmp-button-border-radius |
"Maps में खोलें" बटन के लिए बॉर्डर रेडियस. |
--gmp-button-border-width |
"Maps में खोलें" बटन के लिए बॉर्डर की चौड़ाई. |
--gmp-card-border-radius |
जगह की जानकारी वाले कार्ड के लिए बॉर्डर रेडियस. |
--gmp-dialog-border-radius |
Google Maps के डिसक्लोज़र डायलॉग के लिए बॉर्डर रेडियस. |
--gmp-mat-color-info |
जानकारी देने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, व्हीलचेयर इस्तेमाल करने वालों के लिए सुलभ प्रवेश द्वार के आइकॉन के लिए किया जाता है. |
--gmp-mat-color-negative |
नेगेटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, किसी जगह के कारोबार के खुले होने के समय के लिए, "बंद है" लेबल के लिए किया जाता है. |
--gmp-mat-color-neutral-container |
न्यूट्रल कलर से भरे यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए कंटेनर का रंग. इसका इस्तेमाल, समीक्षा की तारीख के बैज और प्लेसहोल्डर के आकार लोड करने के लिए किया जाता है. |
--gmp-mat-color-on-neutral-container |
न्यूट्रल कंटेनर पर टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल, समीक्षा की तारीख के टेक्स्ट और लोड होने में हुई गड़बड़ी के टेक्स्ट के लिए किया जाता है. |
--gmp-mat-color-on-secondary-container |
सेकंडरी कंटेनर के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल बटन के टेक्स्ट और आइकॉन के लिए किया जाता है. |
--gmp-mat-color-on-surface |
सरफ़ेस के रंग के हिसाब से टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल हेडिंग और डायलॉग बॉक्स के कॉन्टेंट के लिए किया जाता है. |
--gmp-mat-color-on-surface-variant |
सरफ़ेस के रंग के मुकाबले, टेक्स्ट और आइकॉन के लिए कम हाइलाइट किया गया रंग. इसका इस्तेमाल जगह की जानकारी के लिए किया जाता है. |
--gmp-mat-color-outline-decorative |
नॉन-इंटरैक्टिव एलिमेंट की आउटलाइन का रंग. इसका इस्तेमाल कंटेनर के बॉर्डर के लिए किया जाता है. |
--gmp-mat-color-positive |
पॉज़िटिव सेंटिमेंट वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट का रंग. इसका इस्तेमाल, किसी जगह के कारोबार के खुले होने के समय के लिए, "खुला है" लेबल के लिए किया जाता है. |
--gmp-mat-color-primary |
सरफ़ेस के रंग के हिसाब से, इंटरैक्टिव टेक्स्ट और आइकॉन का रंग. इसका इस्तेमाल लिंक, लोड होने के इंडिकेटर, और खास जानकारी वाले आइकॉन के लिए किया जाता है. |
--gmp-mat-color-secondary-container |
किसी प्लैटफ़ॉर्म पर, रंग भरने के लिए कम ध्यान खींचने वाले रंग का इस्तेमाल करना. इसका इस्तेमाल बटन के बैकग्राउंड के लिए किया जाता है. |
--gmp-mat-color-surface |
बैकग्राउंड के लिए रंग. इसका इस्तेमाल कंटेनर और डायलॉग के बैकग्राउंड के लिए किया जाता है. |
--gmp-mat-font-body-small |
इसका इस्तेमाल जगह की जानकारी के लिए किया जाता है. |
--gmp-mat-font-family |
सभी टेक्स्ट के लिए बेस फ़ॉन्ट फ़ैमिली. |
--gmp-mat-font-headline-medium |
इसका इस्तेमाल डायलॉग हेडिंग के लिए किया जाता है. |
--gmp-mat-font-label-large |
इसका इस्तेमाल बटन के कॉन्टेंट के लिए किया जाता है. |
--gmp-mat-font-title-medium |
इसका इस्तेमाल जगह के नाम के लिए किया जाता है. |
--gmp-mat-spacing-extra-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-large |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-medium |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-mat-spacing-small |
इसका इस्तेमाल, एलिमेंट के अंदर स्पेस देने के लिए किया जाता है. जैसे, टेक्स्ट के आस-पास मार्जिन और पैडिंग. |
--gmp-star-rating-color |
स्टार रेटिंग में, भरे हुए स्टार का रंग. |
--gmp-thumbnail-border-radius |
जगह की थंबनेल इमेज के लिए बॉर्डर रेडियस. |
background-color |
एलिमेंट के बैकग्राउंड का रंग बदलता है. |
border |
यह विकल्प, एलिमेंट के बॉर्डर को बदल देता है. |
border-radius |
यह एलिमेंट के बॉर्डर रेडियस को बदल देता है. |
color-scheme |
इससे पता चलता है कि इस एलिमेंट को किस कलर स्कीम में रेंडर किया जा सकता है. ज़्यादा जानकारी के लिए, color-scheme दस्तावेज़ देखें. डिफ़ॉल्ट रूप से, यह color-scheme: light dark पर सेट होता है. |
font-size |
एलिमेंट में मौजूद सभी टेक्स्ट और आइकॉन को स्केल करता है. डिफ़ॉल्ट रूप से, यह 16px पर सेट होता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
gmp-error |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब बैकएंड को किया गया अनुरोध अस्वीकार कर दिया जाता है. उदाहरण के लिए, गलत एपीआई पासकोड. यह इवेंट बबल नहीं होता. |
gmp-load |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब एलिमेंट लोड होता है और उसका कॉन्टेंट रेंडर होता है. यह इवेंट बबल नहीं होता. |
gmp-select |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब सूची से कोई जगह चुनी जाती है. इसमें एक Place ऑब्जेक्ट होता है. इसमें चुनी गई जगह का आईडी, जगह की जानकारी, और व्यूपोर्ट होता है. |
AdvancedPlaceListElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.AdvancedPlaceListElementOptions
AdvancedPlaceListElement ने लागू किया
AdvancedPlaceListElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
attributionPosition
ज़रूरी नहीं |
टाइप:
PlaceSearchAttributionPosition optional |
internalUsageAttributionIds
ज़रूरी नहीं |
टाइप:
Iterable<string> optionalइन आइडेंटिफ़ायर का इस्तेमाल, कॉल को खास पैकेज या ओएसएस लाइब्रेरी से एट्रिब्यूट करने के लिए किया जाता है. |
orientation
ज़रूरी नहीं |
टाइप:
PlaceSearchOrientation optional |
places
ज़रूरी नहीं |
|
selectable
ज़रूरी नहीं |
टाइप:
boolean optional |
truncationPreferred
ज़रूरी नहीं |
टाइप:
boolean optional |
AdvancedPlaceItemElement क्लास
class
google.maps.places.AdvancedPlaceItemElement
extends PlaceItemElement, HTMLElement
implements AdvancedPlaceItemElementOptions, PlaceItemElementOptions
library "places"
जगहों की सूची के ऐडवांस आइटम के लिए, सार्वजनिक वेब कॉम्पोनेंट रैपर (<gmp-advanced-place-item>). <gmp-advanced-place-item> कस्टम एलिमेंट, ऐडवांस खोज या कलेक्शन कंटेनर में, किसी जगह के लिए रिच रिज़ल्ट कार्ड रेंडर करता है. जैसे, <gmp-advanced-place-search> या <gmp-advanced-place-list>. हर <gmp-advanced-place-item> में, जगहों की ज़्यादा जानकारी, मीडिया कोलाज, एडिटोरियल समरी, और इंटरैक्टिव ऐक्शन बटन शामिल होते हैं. ये बटन, जगहों की जानकारी देने वाली यूआई किट के चाइल्ड विज़ुअल कॉम्पोनेंट से बने होते हैं.
<gmp-advanced-place-item></gmp-advanced-place-item>
const {AdvancedPlaceItemElement} = await google.maps.importLibrary("places");
स्लॉट गेम | |
|---|---|
|
कस्टम एचटीएमएल कॉन्टेंट के लिए एक स्लॉट, जो बुनियादी जानकारी वाले सेक्शन में सबसे नीचे रेंडर होता है. यह स्लॉट, मुख्य ऐक्शन बटन के ठीक नीचे होता है. |
|
कस्टम एचटीएमएल कॉन्टेंट के लिए एक स्लॉट, जो बुनियादी जानकारी वाले सेक्शन में जगह के नाम के ठीक ऊपर रेंडर होता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
AdvancedPlaceItemElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.AdvancedPlaceItemElementOptions
PlaceItemElementOptions को एक्सटेंड करता है
AdvancedPlaceItemElement ने लागू किया है
AdvancedPlaceItemElement के लिए विकल्प.
PlaceSearchAttributionPosition कॉन्स्टेंट
कॉन्सटैंट
google.maps.places.PlaceSearchAttributionPosition
लाइब्रेरी "places"
PlaceSearchElement के लिए एट्रिब्यूशन की पोज़िशन.
इन कॉन्सटैंट को स्ट्रिंग के तौर पर भी इस्तेमाल किया जा सकता है. TypeScript में, स्ट्रिंग लिटरल को PlaceSearchAttributionPositionString टाइप से तय किया जाता है.
const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places");
कॉन्स्टेंट | |
|---|---|
BOTTOM |
PlaceSearchElement के सबसे नीचे एट्रिब्यूशन |
TOP |
PlaceSearchElement के सबसे ऊपर एट्रिब्यूशन |
PlaceSearchOrientation कॉन्स्टेंट
कॉन्सटैंट
google.maps.places.PlaceSearchOrientation
लाइब्रेरी "places"
PlaceSearchElement के लिए ओरिएंटेशन वैरिएंट.
इन कॉन्सटैंट को स्ट्रिंग के तौर पर भी इस्तेमाल किया जा सकता है. TypeScript में, स्ट्रिंग लिटरल को PlaceSearchOrientationString टाइप से तय किया जाता है.
const {PlaceSearchOrientation} = await google.maps.importLibrary("places");
कॉन्स्टेंट | |
|---|---|
HORIZONTAL |
हॉरिज़ॉन्टल ओरिएंटेशन. |
VERTICAL |
वर्टिकल ओरिएंटेशन. |
PlaceSelectEvent क्लास
class
google.maps.places.PlaceSelectEvent
extends Event
library "places"
यह इवेंट तब ट्रिगर होता है, जब जगहों की सूची से कोई जगह चुनी जाती है. event.place की मदद से, चुने गए आइटम को ऐक्सेस करें.
const {PlaceSelectEvent} = await google.maps.importLibrary("places");
प्रॉपर्टी | |
|---|---|
place
readonly |
टाइप:
Placeचुनी गई जगह. |
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");
निर्माता | |
|---|---|
PlaceNearbySearchRequestElement |
PlaceNearbySearchRequestElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
excludedPrimaryTypes
attr: excluded-primary-types |
डिफ़ॉल्ट:
nullबाहर रखी गई मुख्य जगहों के टाइप.
एचटीएमएल एट्रिब्यूट: excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." |
excludedTypes
attr: excluded-types |
डिफ़ॉल्ट:
nullबाहर रखी गई जगहों के टाइप.
एचटीएमएल एट्रिब्यूट: excluded-types="excluded-type1 excluded-type2..." |
futureOpeningBusinessesIncluded |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: boolean optionalउन कारोबारों के लिए जगह के सुझाव शामिल करें जो अभी तक नहीं खुले हैं, लेकिन आने वाले समय में खुलने की उम्मीद है. |
includedPrimaryTypes
attr: included-primary-types |
डिफ़ॉल्ट:
nullजगह के मुख्य टाइप की जानकारी शामिल की गई.
एचटीएमएल एट्रिब्यूट: included-primary-types="included-primary-type1 included-primary-type2..." |
includedTypes
attr: included-types |
डिफ़ॉल्ट:
nullशामिल की गई जगह का टाइप.
एचटीएमएल एट्रिब्यूट: included-types="included-type1 included-type2..." |
locationRestriction
attr: location-restriction |
डिफ़ॉल्ट:
nullवह क्षेत्र जिसमें खोज करनी है. यह
Circle में बदल जाता है.एचटीएमएल एट्रिब्यूट: location-restriction="radius@lat,lng" |
maxResultCount
attr: max-result-count |
इनपुट टाइप:
number optionalआउटपुट टाइप: number optionalडिफ़ॉल्ट:
nullनतीजों की ज़्यादा से ज़्यादा संख्या.
एचटीएमएल एट्रिब्यूट: max-result-count="number" |
rankPreference
attr: rank-preference |
डिफ़ॉल्ट:
nullजवाब में नतीजों को रैंक करने का तरीका.
एचटीएमएल एट्रिब्यूट: rank-preference="value-name" |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
PlaceNearbySearchRequestElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceNearbySearchRequestElementOptions
PlaceNearbySearchRequestElement ने लागू किया
PlaceNearbySearchRequestElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
excludedPrimaryTypes
ज़रूरी नहीं |
टाइप:
Array<string> optionalबाहर रखी गई मुख्य जगहों के टाइप. ज़्यादा जानकारी के लिए, PlaceNearbySearchRequestElement.excludedPrimaryTypes और SearchNearbyRequest.excludedPrimaryTypes देखें. |
excludedTypes
ज़रूरी नहीं |
टाइप:
Array<string> optionalबाहर रखी गई जगहों के टाइप. ज़्यादा जानकारी के लिए, PlaceNearbySearchRequestElement.excludedTypes और SearchNearbyRequest.excludedTypes देखें. |
futureOpeningBusinessesIncluded
ज़रूरी नहीं |
टाइप:
boolean optionalउन कारोबारों के लिए जगह के सुझाव शामिल करें जो अभी तक नहीं खुले हैं, लेकिन आने वाले समय में खुलने की उम्मीद है. |
includedPrimaryTypes
ज़रूरी नहीं |
टाइप:
Array<string> optionalजगह के मुख्य टाइप शामिल किए गए. ज़्यादा जानकारी के लिए, PlaceNearbySearchRequestElement.includedPrimaryTypes और SearchNearbyRequest.includedPrimaryTypes देखें. |
includedTypes
ज़रूरी नहीं |
टाइप:
Array<string> optionalजगह के टाइप शामिल किए गए. ज़्यादा जानकारी के लिए, PlaceNearbySearchRequestElement.includedTypes और SearchNearbyRequest.includedTypes देखें. |
locationRestriction
ज़रूरी नहीं |
टाइप:
Circle|CircleLiteral optionalवह क्षेत्र जिसमें खोज करनी है. ज़्यादा जानकारी के लिए, PlaceNearbySearchRequestElement.locationRestriction और SearchNearbyRequest.locationRestriction देखें. |
maxResultCount
ज़रूरी नहीं |
टाइप:
number optionalनतीजों की ज़्यादा से ज़्यादा संख्या. ज़्यादा जानकारी के लिए, PlaceNearbySearchRequestElement.maxResultCount और SearchNearbyRequest.maxResultCount देखें. |
rankPreference
ज़रूरी नहीं |
टाइप:
SearchNearbyRankPreference optionalजवाब में नतीजों को रैंक करने का तरीका. ज़्यादा जानकारी के लिए, PlaceNearbySearchRequestElement.rankPreference और SearchNearbyRankPreference देखें. |
PlaceTextSearchRequestElement क्लास
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");
निर्माता | |
|---|---|
PlaceTextSearchRequestElement |
PlaceTextSearchRequestElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
evConnectorTypes
attr: ev-connector-types |
डिफ़ॉल्ट:
nullपसंदीदा ईवी कनेक्टर टाइप की सूची.
एचटीएमएल एट्रिब्यूट: ev-connector-types="ev-connector-type1 ev-connector-type2..." |
evMinimumChargingRateKw
attr: ev-minimum-charging-rate-kw |
इनपुट टाइप:
number optionalआउटपुट टाइप: number optionalडिफ़ॉल्ट:
nullकिलोवॉट में, चार्जिंग की कम से कम ज़रूरी दर.
एचटीएमएल एट्रिब्यूट: ev-minimum-charging-rate-kw="number" |
futureOpeningBusinessesIncluded |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: boolean optionalउन कारोबारों के लिए जगह के सुझाव शामिल करें जो अभी तक नहीं खुले हैं, लेकिन आने वाले समय में खुलने की उम्मीद है. |
includedType
attr: included-type |
इनपुट टाइप:
string optionalआउटपुट टाइप: string optionalडिफ़ॉल्ट:
nullअनुरोध की गई जगह का टाइप.
एचटीएमएल एट्रिब्यूट: included-type="type" |
isOpenNow
attr: is-open-now |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: boolean optionalडिफ़ॉल्ट:
nullइसका इस्तेमाल, खोज के नतीजों को उन जगहों तक सीमित करने के लिए किया जाता है जो फ़िलहाल खुली हैं.
एचटीएमएल एट्रिब्यूट: is-open-now |
locationBias
attr: location-bias |
डिफ़ॉल्ट:
nullखोज के लिए जगह की जानकारी.
एचटीएमएल एट्रिब्यूट:
|
locationRestriction
attr: location-restriction |
डिफ़ॉल्ट:
nullखोज के लिए जगह की जानकारी से जुड़ी पाबंदी. यह
LatLngBounds में बदल जाता है.एचटीएमएल एट्रिब्यूट: location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng" |
maxResultCount
attr: max-result-count |
इनपुट टाइप:
number optionalआउटपुट टाइप: number optionalडिफ़ॉल्ट:
nullनतीजों की ज़्यादा से ज़्यादा संख्या.
एचटीएमएल एट्रिब्यूट: max-result-count="number" |
minRating
attr: min-rating |
इनपुट टाइप:
number optionalआउटपुट टाइप: number optionalडिफ़ॉल्ट:
nullउन नतीजों को फ़िल्टर करें जिनकी औसत उपयोगकर्ता रेटिंग, इस सीमा से कम है.
एचटीएमएल एट्रिब्यूट: min-rating="number" |
priceLevels
attr: price-levels |
डिफ़ॉल्ट:
nullइसका इस्तेमाल, खोज के नतीजों को उन जगहों तक सीमित करने के लिए किया जाता है जिन्हें कीमत के कुछ लेवल के तौर पर मार्क किया गया है.
एचटीएमएल एट्रिब्यूट: price-levels="price-level1 price-level2..." |
rankPreference
attr: rank-preference |
डिफ़ॉल्ट:
nullजवाब में नतीजों को रैंक करने का तरीका.
एचटीएमएल एट्रिब्यूट: rank-preference="value-name" |
textQuery
attr: text-query |
इनपुट टाइप:
string optionalआउटपुट टाइप: string optionalडिफ़ॉल्ट:
nullटेक्स्ट से खोजने के लिए टेक्स्ट क्वेरी.
एचटीएमएल एट्रिब्यूट: text-query="string" |
useStrictTypeFiltering
attr: use-strict-type-filtering |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: boolean optionalडिफ़ॉल्ट:
nullइसका इस्तेमाल, 'includedType' के लिए सख्त टाइप फ़िल्टरिंग सेट करने के लिए किया जाता है.
एचटीएमएल एट्रिब्यूट: use-strict-type-filtering |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
PlaceTextSearchRequestElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceTextSearchRequestElementOptions
PlaceTextSearchRequestElement ने लागू किया
PlaceTextSearchRequestElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
evConnectorTypes
ज़रूरी नहीं |
टाइप:
Array<EVConnectorType> optionalपसंदीदा ईवी कनेक्टर टाइप की सूची. ज़्यादा जानकारी के लिए, SearchByTextRequest.evSearchOptions और PlaceTextSearchRequestElement.evConnectorTypes देखें. |
evMinimumChargingRateKw
ज़रूरी नहीं |
टाइप:
number optionalकिलोवॉट में, चार्जिंग की कम से कम ज़रूरी दर. ज़्यादा जानकारी के लिए, SearchByTextRequest.evSearchOptions और PlaceTextSearchRequestElement.evMinimumChargingRateKw देखें. |
futureOpeningBusinessesIncluded
ज़रूरी नहीं |
टाइप:
boolean optionalउन कारोबारों के लिए जगह के सुझाव शामिल करें जो अभी तक नहीं खुले हैं, लेकिन आने वाले समय में खुलने की उम्मीद है. |
includedType
ज़रूरी नहीं |
टाइप:
string optionalअनुरोध की गई जगह का टाइप. ज़्यादा जानकारी के लिए, SearchByTextRequest.includedType और PlaceTextSearchRequestElement.includedType देखें. |
isOpenNow
ज़रूरी नहीं |
टाइप:
boolean optionalइसका इस्तेमाल, खोज के नतीजों को उन जगहों तक सीमित करने के लिए किया जाता है जो फ़िलहाल खुली हैं. ज़्यादा जानकारी के लिए, SearchByTextRequest.isOpenNow और PlaceTextSearchRequestElement.isOpenNow देखें. |
locationBias
ज़रूरी नहीं |
टाइप:
LocationBias optionalखोज के लिए जगह की जानकारी. ज़्यादा जानकारी के लिए, SearchByTextRequest.locationBias और PlaceTextSearchRequestElement.locationBias देखें. |
locationRestriction
ज़रूरी नहीं |
टाइप:
LatLngBounds|LatLngBoundsLiteral optionalखोज के लिए जगह की जानकारी से जुड़ी पाबंदी. ज़्यादा जानकारी के लिए, SearchByTextRequest.locationRestriction और PlaceTextSearchRequestElement.locationRestriction देखें. |
maxResultCount
ज़रूरी नहीं |
टाइप:
number optionalनतीजों की ज़्यादा से ज़्यादा संख्या. ज़्यादा जानकारी के लिए, SearchByTextRequest.maxResultCount और PlaceTextSearchRequestElement.maxResultCount देखें. |
minRating
ज़रूरी नहीं |
टाइप:
number optionalउन नतीजों को फ़िल्टर करें जिनकी औसत उपयोगकर्ता रेटिंग, इस सीमा से कम है. ज़्यादा जानकारी के लिए, SearchByTextRequest.minRating और PlaceTextSearchRequestElement.minRating देखें. |
priceLevels
ज़रूरी नहीं |
टाइप:
Array<PriceLevel> optionalइसका इस्तेमाल, खोज के नतीजों को उन जगहों तक सीमित करने के लिए किया जाता है जिन्हें कीमत के कुछ लेवल के तौर पर मार्क किया गया है. ज़्यादा जानकारी के लिए, SearchByTextRequest.priceLevels और PlaceTextSearchRequestElement.priceLevels देखें. |
rankPreference
ज़रूरी नहीं |
टाइप:
SearchByTextRankPreference optionalजवाब में नतीजों को रैंक करने का तरीका. ज़्यादा जानकारी के लिए, SearchByTextRequest.rankPreference और PlaceTextSearchRequestElement.rankPreference देखें. |
textQuery
ज़रूरी नहीं |
टाइप:
string optionalटेक्स्ट से खोजने के लिए टेक्स्ट क्वेरी. ज़्यादा जानकारी के लिए, SearchByTextRequest.textQuery और PlaceTextSearchRequestElement.textQuery देखें. |
useStrictTypeFiltering
ज़रूरी नहीं |
टाइप:
boolean optionalइसका इस्तेमाल, SearchByTextRequest.includedType के लिए सख्त टाइप फ़िल्टरिंग सेट करने के लिए किया जाता है. ज़्यादा जानकारी के लिए, SearchByTextRequest.useStrictTypeFiltering और PlaceTextSearchRequestElement.useStrictTypeFiltering देखें. |
Autocomplete class
class
google.maps.places.Autocomplete
extends MVCObject
library "places"
यह विजेट, उपयोगकर्ता के टेक्स्ट इनपुट के आधार पर जगह के सुझाव देता है. यह text टाइप के इनपुट एलिमेंट से अटैच होता है और उस फ़ील्ड में टेक्स्ट एंट्री को सुनता है. अनुमानों की सूची, ड्रॉप-डाउन सूची के तौर पर दिखती है. साथ ही, टेक्स्ट डालने पर यह अपडेट होती है.
const {Autocomplete} = await google.maps.importLibrary("places");
निर्माता | |
|---|---|
Autocomplete |
Autocomplete(inputField[, opts])पैरामीटर:
Autocomplete का एक नया इंस्टेंस बनाता है, जो दिए गए विकल्पों के साथ, इनपुट टेक्स्ट के लिए तय किए गए फ़ील्ड से अटैच होता है. |
तरीके | |
|---|---|
getBounds |
getBounds()पैरामीटर: कोई नहीं
रिटर्न वैल्यू:
LatLngBounds|undefined बायस की सीमाएं.यह फ़ंक्शन, उन सीमाओं को दिखाता है जिनके लिए अनुमान पक्षपातपूर्ण हैं. |
getFields |
getFields()पैरामीटर: कोई नहीं
रिटर्न वैल्यू:
Array<string>|undefinedजानकारी सही तरीके से मिलने पर, जवाब में जगह की जानकारी के लिए शामिल किए जाने वाले फ़ील्ड दिखाता है. फ़ील्ड की सूची देखने के लिए, PlaceResult पर जाएं. |
getPlace |
getPlace()पैरामीटर: कोई नहीं
रिटर्न वैल्यू:
PlaceResult उपयोगकर्ता की चुनी गई जगह.अगर उपयोगकर्ता की चुनी गई जगह की जानकारी मिल जाती है, तो यह वर्कफ़्लो उस जानकारी को दिखाता है. ऐसा न होने पर, यह एक स्टब Place ऑब्जेक्ट दिखाता है. इसमें name प्रॉपर्टी, इनपुट फ़ील्ड की मौजूदा वैल्यू पर सेट होती है. |
setBounds |
setBounds(bounds)पैरामीटर:
रिटर्न वैल्यू: कोई नहीं
इससे वह इलाका सेट किया जाता है जिसके अंदर मौजूद जगहों के नतीजे दिखाने हैं. नतीजे इस इलाके के हिसाब से दिखाए जाते हैं. हालांकि, ऐसा नहीं है कि सिर्फ़ इसी इलाके के नतीजे दिखाए जाएं. |
setComponentRestrictions |
setComponentRestrictions(restrictions)पैरामीटर:
रिटर्न वैल्यू: कोई नहीं
कॉम्पोनेंट से जुड़ी पाबंदियां सेट करता है. कॉम्पोनेंट से जुड़ी पाबंदियों का इस्तेमाल, अनुमानों को सिर्फ़ पैरंट कॉम्पोनेंट तक सीमित करने के लिए किया जाता है. उदाहरण के लिए, देश. |
setFields |
setFields(fields)पैरामीटर:
रिटर्न वैल्यू: कोई नहीं
जानकारी मिलने पर, जवाब में जगह की जानकारी के लिए शामिल किए जाने वाले फ़ील्ड सेट करता है. फ़ील्ड की सूची देखने के लिए, PlaceResult पर जाएं. |
setOptions |
setOptions(options)पैरामीटर:
रिटर्न वैल्यू: कोई नहीं
|
setTypes |
setTypes(types)पैरामीटर:
रिटर्न वैल्यू: कोई नहीं
इससे, दिखाए जाने वाले अनुमानों के टाइप सेट किए जाते हैं. इस्तेमाल किए जा सकने वाले टाइप के बारे में जानने के लिए, डेवलपर गाइड देखें. अगर कोई टाइप तय नहीं किया गया है, तो सभी टाइप दिखाए जाएंगे. |
इनहेरिट की गई:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
इवेंट | |
|---|---|
place_changed |
function()आर्ग्युमेंट: कोई नहीं
यह इवेंट तब ट्रिगर होता है, जब उपयोगकर्ता की चुनी गई जगह के लिए PlaceResult उपलब्ध हो जाता है. अगर उपयोगकर्ता किसी ऐसी जगह का नाम डालता है जो कंट्रोल ने नहीं सुझाई है और Enter बटन दबाता है या जगह की जानकारी का अनुरोध पूरा नहीं हो पाता है, तो PlaceResult में name प्रॉपर्टी में उपयोगकर्ता का इनपुट शामिल होता है. इसमें कोई अन्य प्रॉपर्टी तय नहीं होती. |
AutocompleteOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.AutocompleteOptions
Autocomplete ऑब्जेक्ट पर सेट किए जा सकने वाले विकल्प.
प्रॉपर्टी | |
|---|---|
bounds
ज़रूरी नहीं |
टाइप:
LatLngBounds|LatLngBoundsLiteral optionalवह इलाका जिसमें जगहें खोजनी हैं. |
componentRestrictions
ज़रूरी नहीं |
टाइप:
ComponentRestrictions optionalकॉम्पोनेंट से जुड़ी पाबंदियां. कॉम्पोनेंट से जुड़ी पाबंदियों का इस्तेमाल, अनुमानों को सिर्फ़ पैरंट कॉम्पोनेंट तक सीमित करने के लिए किया जाता है. उदाहरण के लिए, देश. |
fields
ज़रूरी नहीं |
टाइप:
Array<string> optionalजगह की जानकारी के जवाब में, जगह के लिए शामिल किए जाने वाले फ़ील्ड. जानकारी को सही तरीके से वापस पाने पर, इसके लिए बिल भेजा जाएगा. अगर ['ALL'] को पास किया जाता है, तो सभी उपलब्ध फ़ील्ड दिखाए जाएंगे और उनके लिए बिल भेजा जाएगा. हालांकि, प्रोडक्शन डिप्लॉयमेंट के लिए इसका सुझाव नहीं दिया जाता. फ़ील्ड की सूची देखने के लिए, PlaceResult पर जाएं. नेस्ट किए गए फ़ील्ड को डॉट-पाथ के साथ तय किया जा सकता है. उदाहरण के लिए, "geometry.location". डिफ़ॉल्ट रूप से, ['ALL'] होता है. |
ज़रूरी नहीं |
टाइप:
boolean optionalसिर्फ़ जगह के आईडी वापस पाने हैं या नहीं. place_changed इवेंट ट्रिगर होने पर उपलब्ध कराए गए PlaceResult में, सिर्फ़ जगह का आईडी, types, और name फ़ील्ड होंगे. साथ ही, ऑटोकंप्लीट सेवा से मिले जगह का आईडी, types, और description फ़ील्ड होंगे. डिफ़ॉल्ट रूप से बंद है. |
strictBounds
ज़रूरी नहीं |
टाइप:
boolean optionalयह एक बूलियन वैल्यू है. इससे पता चलता है कि ऑटोकंप्लीट विजेट को सिर्फ़ उन जगहों की जानकारी दिखानी चाहिए जो क्वेरी भेजे जाने के समय, ऑटोकंप्लीट विजेट की सीमाओं के अंदर हों. strictBounds को false (जो कि डिफ़ॉल्ट है) पर सेट करने से, नतीजों में सीमाओं के अंदर मौजूद जगहों को प्राथमिकता दी जाएगी. हालांकि, नतीजे सिर्फ़ उन जगहों तक सीमित नहीं होंगे. |
types
ज़रूरी नहीं |
टाइप:
Array<string> optionalकिस तरह के अनुमान दिखाए जाएं. इस्तेमाल किए जा सकने वाले टाइप के बारे में जानने के लिए, डेवलपर गाइड देखें. अगर कोई टाइप तय नहीं किया गया है, तो सभी टाइप दिखाए जाएंगे. |
SearchBox क्लास
class
google.maps.places.SearchBox
extends MVCObject
library "places"
यह एक ऐसा विजेट है जो उपयोगकर्ता के टेक्स्ट इनपुट के आधार पर, क्वेरी के सुझाव देता है. यह text टाइप के इनपुट एलिमेंट से अटैच होता है और उस फ़ील्ड में टेक्स्ट एंट्री को सुनता है. अनुमानों की सूची, ड्रॉप-डाउन सूची के तौर पर दिखती है. साथ ही, टेक्स्ट डालने पर यह अपडेट होती है.
const {SearchBox} = await google.maps.importLibrary("places");
निर्माता | |
|---|---|
SearchBox |
SearchBox(inputField[, opts])पैरामीटर:
SearchBox का एक नया इंस्टेंस बनाता है, जो दिए गए विकल्पों के साथ, इनपुट टेक्स्ट के लिए तय किए गए फ़ील्ड से अटैच होता है. |
तरीके | |
|---|---|
getBounds |
getBounds()पैरामीटर: कोई नहीं
रिटर्न वैल्यू:
LatLngBounds|undefinedयह उन सीमाओं को दिखाता है जिनके लिए क्वेरी के सुझावों को प्राथमिकता दी जाती है. |
getPlaces |
getPlaces()पैरामीटर: कोई नहीं
रिटर्न वैल्यू:
Array<PlaceResult>|undefinedयह उपयोगकर्ता की चुनी गई क्वेरी दिखाता है, ताकि उसका इस्तेमाल places_changed इवेंट के साथ किया जा सके. |
setBounds |
setBounds(bounds)पैरामीटर:
रिटर्न वैल्यू: कोई नहीं
यह उस इलाके को सेट करता है जिसके हिसाब से क्वेरी के सुझाव दिखाए जाएंगे. नतीजे सिर्फ़ इस इलाके के हिसाब से दिखाए जाएंगे. हालांकि, ऐसा नहीं है कि आपको सिर्फ़ इसी इलाके के नतीजे दिखेंगे. |
इनहेरिट की गई:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
इवेंट | |
|---|---|
places_changed |
function()आर्ग्युमेंट: कोई नहीं
यह इवेंट तब ट्रिगर होता है, जब उपयोगकर्ता कोई क्वेरी चुनता है. नई जगहों की जानकारी पाने के लिए, getPlaces का इस्तेमाल किया जाना चाहिए. |
SearchBoxOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.SearchBoxOptions
SearchBox ऑब्जेक्ट पर सेट किए जा सकने वाले विकल्प.
प्रॉपर्टी | |
|---|---|
bounds
ज़रूरी नहीं |
टाइप:
LatLngBounds|LatLngBoundsLiteral optionalवह इलाका जिसके लिए क्वेरी के सुझावों को प्राथमिकता दी जानी चाहिए. सुझाव, इन सीमाओं को टारगेट करने वाली क्वेरी के लिए पक्षपातपूर्ण होते हैं. हालांकि, ये सिर्फ़ इन तक सीमित नहीं होते. |
PlaceContextualElement क्लास
class
google.maps.places.PlaceContextualElement
extends HTMLElement
implements PlaceContextualElementOptions
library "places"
एक ऐसा विजेट जो कॉन्टेक्स्ट टोकन का इस्तेमाल करके, Google Maps से जानकारी लेने की सुविधा के जवाब को कॉन्टेक्स्ट के हिसाब से दिखाता है.
<gmp-place-contextual context-token="string"> </gmp-place-contextual>
const {PlaceContextualElement} = await google.maps.importLibrary("places");
निर्माता | |
|---|---|
PlaceContextualElement |
PlaceContextualElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
contextToken
attr: context-token |
इनपुट टाइप:
string optionalआउटपुट टाइप: string optionalकॉन्टेक्स्ट टोकन.
एचटीएमएल एट्रिब्यूट: context-token="string" |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
PlaceContextualElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceContextualElementOptions
PlaceContextualElement ने लागू किया
PlaceContextualElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
contextToken
ज़रूरी नहीं |
टाइप:
string optionalGoogle Maps से जानकारी लेने की सुविधा के जवाब में दिया गया कॉन्टेक्स्ट टोकन. |
PlaceContextualListConfigElement क्लास
class
google.maps.places.PlaceContextualListConfigElement
extends HTMLElement
implements PlaceContextualListConfigElementOptions
library "places"
यह एक एचटीएमएल एलिमेंट है, जो जगह के हिसाब से काम के एलिमेंट की सूची वाले व्यू के लिए विकल्प कॉन्फ़िगर करता है.
<gmp-place-contextual-list-config layout="value-name" map-hidden> </gmp-place-contextual-list-config>
const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places");
निर्माता | |
|---|---|
PlaceContextualListConfigElement |
PlaceContextualListConfigElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
layout
attr: layout |
लेआउट.
एचटीएमएल एट्रिब्यूट: layout="value-name" |
mapHidden
attr: map-hidden |
इनपुट टाइप:
boolean optionalआउटपुट टाइप: booleanमैप छिपा हुआ है या नहीं.
एचटीएमएल एट्रिब्यूट: map-hidden |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
PlaceContextualListConfigElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlaceContextualListConfigElementOptions
PlaceContextualListConfigElement ने लागू किया
PlaceContextualListConfigElement के लिए विकल्प.
प्रॉपर्टी | |
|---|---|
layout
ज़रूरी नहीं |
टाइप:
PlaceContextualListLayout optionalडिफ़ॉल्ट:
PlaceContextualListLayout.VERTICALलेआउट. |
mapHidden
ज़रूरी नहीं |
टाइप:
boolean optionalडिफ़ॉल्ट:
falseअगर मैप को छिपाना है, तो वैल्यू true होगी. |
PlaceContextualListLayout कॉन्स्टेंट
कॉन्सटैंट
google.maps.places.PlaceContextualListLayout
लाइब्रेरी "places"
उन लेआउट की सूची जो सूची वाले व्यू के लिए, प्लेस कॉन्टेक्स्चुअल एलिमेंट के साथ काम करते हैं.
इन कॉन्सटैंट को स्ट्रिंग के तौर पर भी इस्तेमाल किया जा सकता है. TypeScript में, स्ट्रिंग लिटरल को PlaceContextualListLayoutString टाइप से तय किया जाता है.
const {PlaceContextualListLayout} = await google.maps.importLibrary("places");
कॉन्स्टेंट | |
|---|---|
COMPACT |
कॉम्पैक्ट लिस्ट लेआउट: सूची के आइटम, एक ही लाइन में लिंक के तौर पर रेंडर किए जाते हैं. साथ ही, ओवरफ़्लो होने पर उन्हें ड्रॉपडाउन सूची में दिखाया जाता है. |
VERTICAL |
वर्टिकल लिस्ट लेआउट: इसमें आइटम, वर्टिकल लिस्ट में कार्ड के तौर पर रेंडर होते हैं. |
PlacePinElement क्लास
class
google.maps.places.PlacePinElement
extends HTMLElement
implements PlacePinElementOptions
library "places"
यह किसी जगह के लिए मैप पिन दिखाता है. इसके लिए, वह उस जगह की कैटगरी के आइकॉन या फ़ोटो का इस्तेमाल करता है. जगह की जानकारी देने के लिए, PlaceDetailsPlaceRequestElement या PlaceDetailsLocationRequestElement जोड़ें. पिन को AdvancedMarkerElement के कॉन्टेंट के तौर पर इस्तेमाल करें. यह सुविधा 3D मैप में उपलब्ध नहीं है.
उदाहरण:
<gmp-advanced-marker>
<gmp-place-pin>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-rating></gmp-place-rating>
</gmp-place-pin>
</gmp-advanced-marker> इस एलिमेंट का इस्तेमाल करने के लिए, Google Cloud Console में जाकर अपने प्रोजेक्ट के लिए जगहों की जानकारी देने वाली यूआई किट API को चालू करें.
<gmp-place-pin icon="value-name" scale="number"> </gmp-place-pin>
const {PlacePinElement} = await google.maps.importLibrary("places");
निर्माता | |
|---|---|
PlacePinElement |
PlacePinElement([options])पैरामीटर:
|
प्रॉपर्टी | |
|---|---|
icon
attr: icon |
डिफ़ॉल्ट:
PlacePinIcon.TYPEपिन के अंदर दिखने वाला आइकॉन.
PlacePinIcon देखें.एचटीएमएल एट्रिब्यूट: icon="value-name" |
photoRendered
readonly |
टाइप:
booleanसिर्फ़ पढ़ने का ऐक्सेस. अगर पिन में जगह की फ़ोटो दिख रही है, तो वैल्यू true होगी. अगर icon, PHOTO नहीं है, तो हमेशा गलत होगा. अगर icon की वैल्यू PHOTO है, लेकिन जगह की कोई फ़ोटो नहीं है या फ़ोटो लोड नहीं हो पाई, तो यह वैल्यू गलत है. साथ ही, पिन में जगह के टाइप का आइकॉन दिखता है. gmp-load के ट्रिगर होने से पहले सेट करें. |
place
readonly |
टाइप:
Place optionalसिर्फ़ पढ़ने का ऐक्सेस. Place ऑब्जेक्ट में, रेंडर की गई मौजूदा जगह का आईडी, जगह की जानकारी, और व्यूपोर्ट शामिल होता है. undefined अगर जगह की जानकारी अब तक लोड नहीं हुई है या लोड नहीं हो सकी. |
scale
attr: scale |
इनपुट टाइप:
number optionalआउटपुट टाइप: numberडिफ़ॉल्ट:
1पिन के साइज़ को बढ़ाने वाला मल्टीप्लायर.
एचटीएमएल एट्रिब्यूट: scale="number" |
स्लॉट गेम | |
|---|---|
default |
पिन पर दिखने वाला वैकल्पिक कॉन्टेंट, जैसे कि PlaceRatingElement, कस्टम <span> या टेक्स्ट. लाइट डीओएम के चाइल्ड एलिमेंट, सीधे पिन में स्लॉट किए जाते हैं. कॉन्टेंट कहां दिखेगा, यह icon पर निर्भर करता है: TYPE के लिए जगह के टाइप वाले आइकॉन के बगल में, PHOTO के लिए फ़ोटो पर बैज के तौर पर, और NONE के लिए पिन के मुख्य कॉन्टेंट के तौर पर. |
सीएसएस प्रॉपर्टी | |
|---|---|
--gmp-background |
पिन के बैकग्राउंड का रंग: पिल, फ़ोटो फ़्रेम, फ़ोटो बैज, बीक, और जगह के टाइप वाली पिन का बॉर्डर. |
--gmp-border-radius |
पिल (स्लॉट किए गए कॉन्टेंट के साथ जगह के टाइप का आइकॉन या सिर्फ़ स्लॉट किया गया कॉन्टेंट) और PHOTO पिन में मौजूद फ़ोटो फ़्रेम का बॉर्डर रेडियस. स्लॉट किए गए कॉन्टेंट के साथ जगह के टाइप वाले आइकॉन के लिए, डिफ़ॉल्ट रूप से 30px पर सेट होता है. स्लॉट किए गए कॉन्टेंट के लिए, डिफ़ॉल्ट रूप से 12px पर सेट होता है. साथ ही, 12px फ़ोटो फ़्रेम पर सेट होता है. यह बिना स्लॉट वाले कॉन्टेंट के, जगह के टाइप वाली पिन पर लागू नहीं होता. |
--gmp-glyph-background |
जगह के टाइप के ग्लिफ़ के पीछे का बैकग्राउंड कलर. डिफ़ॉल्ट रूप से, यह जगह के iconBackgroundColor पर सेट होता है. |
--gmp-glyph-color |
जगह के टाइप के ग्लिफ़ का रंग. यह ग्लिफ़ दिखने पर लागू होता है. इसमें वह समय भी शामिल है, जब PHOTO पिन, जगह के टाइप के आइकॉन पर वापस आ जाता है. |
तरीके | |
|---|---|
इनहेरिट की गई:
addEventListener,
removeEventListener
|
इवेंट | |
|---|---|
gmp-error |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब पिन को रेंडर नहीं किया जा सकता. उदाहरण के लिए, नेटवर्क की गड़बड़ी, क्रेडेंशियल की गड़बड़ी (जैसे, गलत एपीआई पासकोड), जगह का ऐसा आईडी जिसे हल नहीं किया जा सकता या ऐसी जगह जिसकी कोई जगह की जानकारी नहीं है. पिन छिपा हुआ है. यह इवेंट बबल नहीं होता. |
gmp-load |
function(event)आर्ग्युमेंट:
यह इवेंट तब ट्रिगर होता है, जब जगह की जानकारी लोड हो जाती है और पिन रेंडर हो जाता है. जब icon, PHOTO होता है, तो यह फ़ोटो के लोड होने या लोड न होने के बाद ही ट्रिगर होता है. सिर्फ़ फ़ोटो लोड न होने पर, gmp-error ट्रिगर नहीं होता. PlacePinElement.place से लोड की गई जगह की जानकारी पढ़ें और देखें कि फ़ोटो PlacePinElement.photoRendered से दिखाई गई है या नहीं. यह इवेंट बबल नहीं होता. |
PlacePinElementOptions इंटरफ़ेस
इंटरफ़ेस
google.maps.places.PlacePinElementOptions
PlacePinElement ने लागू किया
PlacePinElement बनाने के विकल्प.
प्रॉपर्टी | |
|---|---|
icon
ज़रूरी नहीं |
टाइप:
PlacePinIcon optionalPlacePinElement.icon देखें. |
scale
ज़रूरी नहीं |
टाइप:
number optionalPlacePinElement.scale देखें. |
PlacePinIcon कॉन्स्टेंट
कॉन्सटैंट
google.maps.places.PlacePinIcon
लाइब्रेरी "places"
PlacePinElement के लिए आइकॉन के विकल्प. TYPE डिफ़ॉल्ट है. अगर चुने गए आइकॉन के लिए ज़रूरी डेटा मौजूद नहीं है, तो पिन TYPE पर वापस आ जाता है. अगर TYPE के लिए ज़रूरी डेटा मौजूद नहीं है, तो इसके बजाय एक सामान्य आइकॉन दिखाया जाता है.
इन कॉन्सटैंट को स्ट्रिंग के तौर पर भी इस्तेमाल किया जा सकता है. TypeScript में, स्ट्रिंग लिटरल को PlacePinIconString टाइप से तय किया जाता है.
const {PlacePinIcon} = await google.maps.importLibrary("places");
कॉन्स्टेंट | |
|---|---|
NONE |
कोई आइकॉन नहीं दिखता, सिर्फ़ स्लॉट किया गया कॉन्टेंट दिखता है. |
PHOTO |
इससे जगह की फ़ोटो, सर्कल में दिखती है. अगर जगह की कोई फ़ोटो नहीं है, तो TYPE पर वापस जाएं. |
TYPE |
इससे जगह की कैटगरी का आइकॉन दिखता है. |