Place Icons

Place icons indicate the various types of places (for example coffee shops, libraries, and museums). You can request icons and their background colors using the Place 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 and icon_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 passing place.iconBackgroundColor to the PinElement.background option, and place.svgIconMaskURI to PinElement.glyph. Use place.location to place the marker in the correct location. This example also displays the place.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. By default these display with a black glyph. The icon background color is dictated by the place's category.