Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/documentation/javascript/place-icons below:

Place Icons | Maps JavaScript API

Stay organized with collections Save and categorize content based on your preferences.

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.

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.

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

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

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.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-08-14 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-14 UTC."],[[["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 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"]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4