Places UI Kit :A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

Place Icons

Page Summary

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.

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 .

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

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

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)