نمادهای مکان انواع مختلف مکان ها را نشان می دهند (به عنوان مثال کافی شاپ ها، کتابخانه ها و موزه ها). می توانید نمادها و رنگ های پس زمینه آنها را با استفاده از کلاس مکان درخواست کنید.
فیلدها
از فیلدهای زیر برای کار با نمادهای مکان استفاده کنید:
icon نشانی اینترنتی یک نماد PNG رنگی 71px x 71px (فقط سرویس مکان‌ها) را برمی‌گرداند.
iconBackgroundColor و icon_background_color کد رنگ HEX پیش‌فرض را برای دسته نماد مکان برمی‌گردانند.
icon_mask_base_uri (سرویس مکان‌ها) نشانی وب پایه یک نماد غیر رنگی را منهای پسوند نوع فایل (ضمیمه .svg یا .png ) برمی‌گرداند.
svgIconMaskURI (کلاس مکان) URL پایه یک نماد 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.constplace=newPlace({id:'ChIJN5Nz71W3j4ARhx5bwpTQEGg',});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:['location','displayName','svgIconMaskURI','iconBackgroundColor']});constpinElement=newPinElement({background:place.iconBackgroundColor,glyph:newURL(String(place.svgIconMaskURI)),});constplaceIconMarkerView=newAdvancedMarkerElement({map,position:place.location,content:pinElement.element,title:place.displayName,});
// A marker customized using a place icon and color, name, and geometry.constplace=newPlace({id:"ChIJN5Nz71W3j4ARhx5bwpTQEGg",});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:["location","displayName","svgIconMaskURI","iconBackgroundColor",],});constpinElement=newPinElement({background:place.iconBackgroundColor,glyph:newURL(String(place.svgIconMaskURI)),});constplaceIconMarkerView=newAdvancedMarkerElement({map,position:place.location,content:pinElement.element,title:place.displayName,});
جداول زیر تمام نمادهای مکان موجود را بر اساس دسته بندی نشان می دهد. به طور پیش فرض این نمایش با یک علامت سیاه و سفید. رنگ پس‌زمینه نماد براساس دسته‌بندی مکان تعیین می‌شود.
دسته مکان: غذا و نوشیدنی (رنگ پس زمینه نماد #FF9E67)
نوار، باشگاه شبانه
کافه
رستوران، نانوایی
دسته مکان: خرده فروشی (رنگ پس زمینه نماد #4B96F3)
کتاب، پوشاک، لوازم الکترونیکی، جواهرات، کفش، مرکز خرید / مرکز خرید
خواروبارفروشی کوچک
خواربار فروشی، سوپرمارکت
داروخانه
دسته مکان: خدمات (رنگ پس زمینه نماد #909CE1)
دستگاه خودپرداز
بانک
گاز
اسکان
اداره پست
دسته مکان: سرگرمی (رنگ پس زمینه نماد #13B5C7)
آکواریوم، توریستی
گلف
تاریخی
فیلم
موزه
تئاتر
دسته مکان: حمل و نقل (رنگ پس زمینه نماد #10BDFF)
فرودگاه
اتوبوس، اشتراک سواری، تاکسی
قطار/راه آهن
دسته مکان: شهرداری/عمومی/مذهبی (رنگ پس زمینه نماد #7B9EB0)
تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003ePlace icons, accessible through the Place Class or Places Service, visually represent various place types like restaurants and libraries.\u003c/p\u003e\n"],["\u003cp\u003eYou can customize markers by using a place's icon, background color, name, and location data.\u003c/p\u003e\n"],["\u003cp\u003ePlace icons are categorized and have default background colors based on their category (e.g., food and drink places have an orange background).\u003c/p\u003e\n"],["\u003cp\u003eThe documentation provides code samples in TypeScript and JavaScript for applying place icons and colors to markers.\u003c/p\u003e\n"],["\u003cp\u003eYou can find a comprehensive table showcasing all available place icons and their corresponding background colors within the documentation.\u003c/p\u003e\n"]]],["Place icons represent various types of locations. Using the Place Class or Places Service, you can retrieve `icon` (a colored PNG), `iconBackgroundColor` (HEX code), and `icon_mask_base_uri` (base URL for a non-colored icon). Apply these to markers: utilize `iconBackgroundColor` for the PinElement's background and `svgIconMaskURI` for its glyph, while positioning the marker with `place.location`. A provided example shows TypeScript and JavaScript code to implement this, fetching fields to customize a marker with place icon and colors.\n"],null,["Select platform: [Android](/maps/documentation/places/android-sdk/icons \"View this page for the Android platform docs.\") [iOS](/maps/documentation/places/ios-sdk/icons \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/place-icons \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/places/web-service/icons \"View this page for the Web Service platform docs.\")\n\nPlace icons indicate the various types of places (for example coffee shops, libraries, and\nmuseums). You can request icons and their background colors using the\n[Place Class](/maps/documentation/javascript/place).\n\nFields\n\nUse the following fields to work with place icons:\n\n| **Field** | **Place Class** | **Places Service** |\n|-----------------------|-------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------|\n| Icon | --- | [icon](/maps/documentation/javascript/reference/places-service#PlaceResult.) |\n| Icon background color | [iconBackgroundColor](/maps/documentation/javascript/reference/place#Place.iconBackgroundColor) | [icon_background_color](/maps/documentation/javascript/reference/places-service#PlaceResult.icon_background_color) |\n| Icon mask URI | [svgIconMaskURI](/maps/documentation/javascript/reference/place#Place.svgIconMaskURI) | [icon_mask_base_uri](/maps/documentation/javascript/reference/places-service#PlaceResult.icon_mask_base_uri) |\n\n- `icon` returns the URL for a colored 71px x 71px PNG icon (Places Service only).\n- `iconBackgroundColor` and `icon_background_color` return the default HEX color code for the place icon's category.\n- `icon_mask_base_uri` (Places Service) returns the base URL for a non-colored icon, minus the file type extension (append `.svg` or `.png`).\n- `svgIconMaskURI` (Place Class) returns the base URL for a non-colored SVG icon.\n\nApply place icon and color to a marker\n\nWith Place Details, you can request a place icon and background color which you can apply\nto markers. The following example shows code to create a marker using place data by passing\n`place.iconBackgroundColor` to the `PinElement.background` option, and\n`place.svgIconMaskURI` to `PinElement.glyph`. Use `place.location`\nto place the marker in the correct location. This example also displays the `place.displayName`\nin the marker title. \n\nTypeScript \n\n```typescript\n// A marker customized using a place icon and color, name, and geometry.\nconst place = new Place({\n id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',\n});\n\n// Call fetchFields, passing the desired data fields.\nawait place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] });\n\nconst pinElement = new PinElement({\n background: place.iconBackgroundColor,\n glyph: new URL(String(place.svgIconMaskURI)),\n});\n\nconst placeIconMarkerView = new AdvancedMarkerElement({\n map,\n position: place.location,\n content: pinElement.element,\n title: place.displayName,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/advanced-markers-graphics/index.ts#L68-L87\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\n// A marker customized using a place icon and color, name, and geometry.\nconst place = new Place({\n id: \"ChIJN5Nz71W3j4ARhx5bwpTQEGg\",\n});\n\n// Call fetchFields, passing the desired data fields.\nawait place.fetchFields({\n fields: [\n \"location\",\n \"displayName\",\n \"svgIconMaskURI\",\n \"iconBackgroundColor\",\n ],\n});\n\nconst pinElement = new PinElement({\n background: place.iconBackgroundColor,\n glyph: new URL(String(place.svgIconMaskURI)),\n});\nconst placeIconMarkerView = new AdvancedMarkerElement({\n map,\n position: place.location,\n content: pinElement.element,\n title: place.displayName,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/advanced-markers-graphics/docs/index.js#L67-L91\n```\n[See the example](/maps/documentation/javascript/examples/advanced-markers-graphics)\n\nPlace icon and background color requests\n\nThe following tables show all of the available place icons by category. By\ndefault these display with a black glyph. The icon background color\nis dictated by the place's category.\n\n| **Place category: Food and drink** (icon background color #FF9E67) ||||\n|--------------------------------------------------------------------|-----------------------------------------|----------------------|------------------|\n| Bar, Night club | Cafe | Restaurant, Bakery |\n| Books, Clothing, Electronics, Jewelry, Shoes, Shopping center/Mall | Convenience store | Grocery, Supermarket | Pharmacy |\n| ATM | Bank | Gas | Lodging |\n| Post office |\n| Aquarium, Tourist | Golf | Historic | Movie |\n| Museum | Theater |\n| Airport | Bus, rideshare, taxi | Train/Rail |\n| Cemetery | Civic building | Library | Monument |\n| Parking | School (primary, secondary, university) | Worship (Christian) |\n| Worship (Hindu) | Worship (Islam) | Worship (Jain) | Worship (Jewish) |\n| Worship (Sikh) | Generic business |\n| Boating | Camping | Park | Stadium |\n| Zoo |\n| Hospital | Police |"]]
