जगह के आइकॉन

जगह के आइकॉन से, अलग-अलग तरह की जगहों के बारे में पता चलता है. जैसे, कॉफ़ी शॉप, लाइब्रेरी, और म्यूज़ियम. Place क्लास का इस्तेमाल करके, आइकॉन और उनके बैकग्राउंड के रंगों का अनुरोध किया जा सकता है.

फ़ील्ड

जगह के आइकॉन के साथ काम करने के लिए, इन फ़ील्ड का इस्तेमाल करें:

• icon, 71 पिक्सल x 71 पिक्सल वाले रंगीन PNG आइकॉन का यूआरएल दिखाता है. यह सिर्फ़ Places Service के लिए होता है.
• iconBackgroundColor और icon_background_color, जगह के आइकॉन की कैटगरी के लिए, डिफ़ॉल्ट रंग का हेक्स कोड दिखाते हैं.
• icon_mask_base_uri (Places Service), बिना रंग वाले आइकॉन के लिए बेस यूआरएल दिखाता है. इसमें फ़ाइल टाइप एक्सटेंशन शामिल नहीं होता. इसके लिए, .svg या .png जोड़ें.
• svgIconMaskURI (Place Class), बिना रंग वाले एसवीजी आइकॉन के लिए बेस यूआरएल दिखाता है.

किसी मार्कर पर जगह का आइकॉन और रंग लागू करना

जगह की जानकारी की मदद से, जगह के आइकॉन और बैकग्राउंड के रंग का अनुरोध किया जा सकता है. इसे मार्कर पर लागू किया जा सकता है. यहां दिए गए उदाहरण में, जगह के डेटा का इस्तेमाल करके मार्कर बनाने का कोड दिखाया गया है. इसके लिए, place.iconBackgroundColor को PinElement.background विकल्प और place.svgIconMaskURI को PinElement.glyph में पास किया गया है. मार्कर को सही जगह पर सेट करने के लिए, place.location का इस्तेमाल करें. इस उदाहरण में, मार्कर के टाइटल में place.displayName भी दिखता है.

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
    fields: [
        'location',
        'displayName',
        'svgIconMaskURI',
        'iconBackgroundColor',
    ],
});

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);
index.ts

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
    fields: [
        'location',
        'displayName',
        'svgIconMaskURI',
        'iconBackgroundColor',
    ],
});

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);
index.js

आइकॉन और बैकग्राउंड के रंग के लिए अनुरोध करना

नीचे दी गई टेबल में, कैटगरी के हिसाब से उपलब्ध सभी प्लेस आइकॉन दिखाए गए हैं. डिफ़ॉल्ट रूप से, ये काले रंग के ग्लिफ़ के साथ दिखते हैं. आइकॉन के बैकग्राउंड का रंग, जगह की कैटगरी के हिसाब से तय होता है.

जगह की कैटगरी: खाना और पीना (आइकॉन के बैकग्राउंड का रंग #FF9E67)
बार, नाइट क्लब	कैफ़े	रेस्टोरेंट, बेकरी
जगह की कैटगरी: खुदरा (आइकॉन के बैकग्राउंड का रंग #4B96F3)
किताबें, कपड़े, इलेक्ट्रॉनिक सामान, गहने, जूते, शॉपिंग सेंटर/मॉल	किराने की दुकान	किराना, सुपरमार्केट	फ़ार्मेसी
जगह की कैटगरी: सेवाएं (आइकॉन के बैकग्राउंड का रंग #909CE1)
एटीएम	बैंक	गैस	ठहरने की जगह
पोस्ट ऑफ़िस
जगह की कैटगरी: मनोरंजन (आइकॉन के बैकग्राउंड का रंग #13B5C7)
अक्वेरियम, पर्यटक	गोल्फ़	ऐतिहासिक	फ़िल्म
म्यूज़ियम	थिएटर
जगह की कैटगरी: परिवहन (आइकॉन के बैकग्राउंड का रंग #10BDFF)
एयरपोर्ट	बस, राइडशेयर, टैक्सी	ट्रेन/रेल
जगह की कैटगरी: नगर पालिका/सामान्य/धार्मिक (आइकॉन के बैकग्राउंड का रंग #7B9EB0)
कब्रिस्तान	नागरिक भवन	लाइब्रेरी	स्मारक
पार्किंग	स्कूल (प्राइमरी, सेकंडरी, यूनिवर्सिटी)	ईसाई धर्म से जुड़े भजन
पूजा (हिंदू)	इबादत (इस्लाम)	पूजा-पाठ (जैन धर्म)	पूजा-पाठ (यहूदी धर्म)
पूजा-पाठ (सिख धर्म)	जेनेरिक कारोबार
जगह की कैटगरी: आउटडोर (आइकॉन के बैकग्राउंड का रंग #4DB546)
बोटिंग	कैंपिंग	पार्क	स्टेडियम
चिड़ियाघर
जगह की कैटगरी: आपातकालीन (आइकॉन के बैकग्राउंड का रंग #F88181)
अस्पताल	पुलिस