Page Summary

outlined_flag

• Place icons, accessible through the Place Class or Places Service, visually represent various place types like restaurants and libraries.

• You can customize markers by using a place's icon, background color, name, and location data.

• Place icons are categorized and have default background colors based on their category (e.g., food and drink places have an orange background).

• The documentation provides code samples in TypeScript and JavaScript for applying place icons and colors to markers.

• You can find a comprehensive table showcasing all available place icons and their corresponding background colors within the documentation.

Place icons indicate the various types of places (for example coffee shops, libraries, and museums). You can request icons and their background colors using thePlace Class.

Fields

Use the following fields to work with place icons:

• icon returns the URL for a colored 71px x 71px PNG icon (Places Service only).
• iconBackgroundColor andicon_background_color return the default HEX color code for the place icon's category.
• icon_mask_base_uri (Places Service) returns the base URL for a non-colored icon, minus the file type extension (append.svg or.png).
• svgIconMaskURI (Place Class) returns the base URL for a non-colored SVG icon.

Apply place icon and color to a marker

With Place Details, you can request a place icon and background color which you can apply to markers. The following example shows code to create a marker using place data by passingplace.iconBackgroundColor to thePinElement.background option, andplace.svgIconMaskURI toPinElement.glyph. Useplace.location to place the marker in the correct location. This example also displays theplace.displayName in the marker title.

// 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,});
index.ts

// 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,});
index.js

Place icon and background color requests

The following tables show all of the available place icons by category. Bydefault these display with a black glyph. The icon background coloris dictated by the place's category.

Place category: Food and drink (icon background color #FF9E67)
Bar, Night club	Cafe	Restaurant, Bakery
Place category: Retail (icon background color #4B96F3)
Books, Clothing, Electronics, Jewelry, Shoes, Shopping center/Mall	Convenience store	Grocery, Supermarket	Pharmacy
Place category: Services (icon background color #909CE1)
ATM	Bank	Gas	Lodging
Post office
Place category: Entertainment (icon background color #13B5C7)
Aquarium, Tourist	Golf	Historic	Movie
Museum	Theater
Place category: Transportation (icon background color #10BDFF)
Airport	Bus, rideshare, taxi	Train/Rail
Place category: Municipal/generic/religious (icon background color #7B9EB0)
Cemetery	Civic building	Library	Monument
Parking	School (primary, secondary, university)	Worship (Christian)
Worship (Hindu)	Worship (Islam)	Worship (Jain)	Worship (Jewish)
Worship (Sikh)	Generic business
Place category: Outdoor (icon background color #4DB546)
Boating	Camping	Park	Stadium
Zoo
Place category: Emergency (icon background color #F88181)
Hospital	Police