Place Icons

Select platform: Android iOS JavaScript Web Service

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, or the Places Service.

Fields

Use the following fields to work with place icons:

Field Place Class Places Service
Icon --- icon
Icon background color iconBackgroundColor icon_background_color
Icon mask URI svgIconMaskURI icon_mask_base_uri
  • 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.

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,
});
See the example

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.

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