जगह के आइकॉन अलग-अलग तरह की जगहों को दिखाते हैं (उदाहरण के लिए, कॉफ़ी शॉप, लाइब्रेरी, और म्यूज़ियम है). आइकॉन और उनके बैकग्राउंड कलर का अनुरोध किया जा सकता है. इसके लिए, प्लेस क्लास या Places सेवा.
फ़ील्ड
जगह के आइकॉन के साथ काम करने के लिए, इन फ़ील्ड का इस्तेमाल करें:
फ़ील्ड | प्लेस क्लास | Places सेवा |
---|---|---|
आइकॉन | --- | icon |
आइकन पृष्ठभूमि का रंग | iconBackgroundColor |
icon_background_color |
आइकॉन मास्क यूआरआई | svgIconMaskURI |
icon_mask_base_uri |
icon
रंगीन 71px x 71px PNG आइकन के लिए URL वापस भेजता है (स्थान सेवा .iconBackgroundColor
औरicon_background_color
जगह के आइकॉन की कैटगरी के लिए डिफ़ॉल्ट HEX रंग कोड.icon_mask_base_uri
(Places Service) आपकी वेबसाइट/ऐप्लिकेशन के यूआरएल की बिना रंग वाला आइकॉन, जिसमें फ़ाइल टाइप एक्सटेंशन को घटाया गया है (.svg
या.png
जोड़ें).svgIconMaskURI
(प्लेस क्लास) बिना रंग वाले SVG आइकॉन का बेस यूआरएल दिखाता है.
मार्कर पर स्थान आइकन और रंग लागू करें
स्थान विवरण के साथ, आप स्थान आइकन और पृष्ठभूमि रंग का अनुरोध कर सकते हैं जिसे आप लागू कर सकते हैं
मार्कर इस्तेमाल किए जा सकते हैं. नीचे दिया गया उदाहरण पास करके स्थान डेटा का इस्तेमाल करके एक मार्कर बनाने के लिए कोड दिखाता है
place.iconBackgroundColor
से PinElement.background
विकल्प और
place.svgIconMaskURI
से PinElement.glyph
. place.location
का इस्तेमाल करें
मार्कर को सही स्थान पर रखने के लिए. इस उदाहरण में, place.displayName
भी दिखाया गया है
लिखें.
TypeScript
// 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, glyph: new URL(String(place.svgIconMaskURI)), }); const placeIconMarkerView = new AdvancedMarkerElement({ map, position: place.location, content: pinElement.element, title: place.displayName, });अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
// 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, glyph: new URL(String(place.svgIconMaskURI)), }); const placeIconMarkerView = new AdvancedMarkerElement({ map, position: place.location, content: pinElement.element, title: place.displayName, });
आइकॉन और बैकग्राउंड के रंग के अनुरोध करें
नीचे दी गई टेबल में, कैटगरी के हिसाब से जगह के लिए उपलब्ध सभी आइकॉन दिखाए गए हैं. इन्होंने बदलाव किया है इन स्क्रीन को एक काले ग्लिफ़ के साथ डिफ़ॉल्ट रूप से सेट करें. आइकॉन के बैकग्राउंड का रंग यह जगह की कैटगरी के हिसाब से तय होता है.
जगह की कैटगरी: खाने-पीने की चीज़ें (आइकॉन के बैकग्राउंड का रंग #FF9E67) |
|||
---|---|---|---|
नाइट क्लब |
|
|
|
जगह की कैटगरी: खुदरा (आइकॉन के बैकग्राउंड का रंग #4B96F3) |
|||
शॉपिंग सेंटर/मॉल |
![]() |
|
|
जगह की कैटगरी: सेवाएं (आइकॉन के बैकग्राउंड का रंग #909CE1) |
|||
|
|
|
|
|
|||
जगह की कैटगरी: मनोरंजन (आइकॉन के बैकग्राउंड का रंग #13B5C7) |
|||
|
|
|
|
|
|
||
जगह की कैटगरी: परिवहन (आइकॉन के बैकग्राउंड का रंग #10BDFF) |
|||
|
|
|
|
जगह की कैटगरी: नगरपालिका/सामान्य/धार्मिक (आइकॉन के बैकग्राउंड का रंग #7B9EB0) |
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
जगह की कैटगरी: आउटडोर (आइकॉन के बैकग्राउंड का रंग #4DB546) |
|||
|
|
|
|
|
|||
जगह की कैटगरी: आपातकालीन स्थिति (आइकॉन के बैकग्राउंड का रंग #F88181) |
|||
|
|