Le icone dei luoghi indicano i vari tipi di luoghi (ad esempio caffetterie, biblioteche e musei). Puoi richiedere le icone e i relativi colori di sfondo utilizzando la classe Place.
Campi
Utilizza i seguenti campi per lavorare con le icone dei luoghi:
icon restituisce l'URL di un'icona PNG a colori di 71 x 71 pixel (solo servizio Luoghi).
iconBackgroundColor e icon_background_color restituiscono il
codice colore esadecimale predefinito per la categoria dell'icona del luogo.
icon_mask_base_uri (servizio Luoghi) restituisce l'URL di base per un'icona non colorata, meno l'estensione del tipo di file (aggiungi .svg o .png).
svgIconMaskURI (classe di luogo) restituisce l'URL di base di un'icona SVG non colorata.
Applicare l'icona e il colore del luogo a un indicatore
Con i dettagli dei luoghi, puoi richiedere un'icona e un colore di sfondo per i segnaposto. L'esempio seguente mostra il codice per creare un indicatore utilizzando i dati dei luoghi passando
place.iconBackgroundColor all'opzione PinElement.background e
place.svgIconMaskURI a PinElement.glyph. Utilizza place.location
per posizionare l'indicatore nella posizione corretta. In questo esempio viene visualizzato anche il simbolo place.displayName
nel titolo dell'indicatore.
TypeScript
// 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,});
// 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,});
Le tabelle seguenti mostrano tutte le icone dei luoghi disponibili per categoria. Per impostazione predefinita, vengono visualizzati con un glifo nero. Il colore di sfondo dell'icona è determinato dalla categoria del luogo.
Categoria di luogo: Cibo e bevande (colore dello sfondo dell'icona #FF9E67)
Bar, Night club
Bar
Ristorante, panificio
Categoria di luogo: vendita al dettaglio (colore di sfondo dell'icona #4B96F3)
Libri, abbigliamento, elettronica, gioielli, scarpe, centro commerciale/galleria commerciale
Minimarket
Negozio di alimentari, supermercato
Farmacia
Categoria di luogo: Servizi (colore sfondo icona #909CE1)
Bancomat
Banca
Gas
Alloggio
Ufficio postale
Categoria di luogo: Spettacoli (colore di sfondo dell'icona #13B5C7)
Acquario, Turistico
Golf
Storico
Film
Museo
Cinema
Categoria di luogo: Trasporti (colore di sfondo dell'icona #10BDFF)
Aeroporto
Autobus, ridesharing, taxi
Treno/mezzo su rotaie
Categoria di luogo: comunale/generico/religioso (colore dello sfondo dell'icona #7B9EB0)
Cimitero
Edificio pubblico
Raccolta
Monumento
Parcheggio
Scuola (elementare, media, universitaria)
Culto (cristiano)
Adorazione (indù)
Culto (Islam)
Culto (giainista)
Culto (ebraico)
Culto (sikh)
Attività generica
Categoria di luogo: all'aperto (colore di sfondo dell'icona #4DB546)
Navigazione
Campeggio
Parcheggia
Stadio
Zoo
Categoria di luogo: Emergenza (colore di sfondo dell'icona #F88181)
[null,null,["Ultimo aggiornamento 2025-08-31 UTC."],[[["\u003cp\u003ePlace icons, accessible through the Place Class or Places Service, visually represent various place types like restaurants and libraries.\u003c/p\u003e\n"],["\u003cp\u003eYou can customize markers by using a place's icon, background color, name, and location data.\u003c/p\u003e\n"],["\u003cp\u003ePlace icons are categorized and have default background colors based on their category (e.g., food and drink places have an orange background).\u003c/p\u003e\n"],["\u003cp\u003eThe documentation provides code samples in TypeScript and JavaScript for applying place icons and colors to markers.\u003c/p\u003e\n"],["\u003cp\u003eYou can find a comprehensive table showcasing all available place icons and their corresponding background colors within the documentation.\u003c/p\u003e\n"]]],["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"],null,["Select platform: [Android](/maps/documentation/places/android-sdk/icons \"View this page for the Android platform docs.\") [iOS](/maps/documentation/places/ios-sdk/icons \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/place-icons \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/places/web-service/icons \"View this page for the Web Service platform docs.\")\n\nPlace icons indicate the various types of places (for example coffee shops, libraries, and\nmuseums). You can request icons and their background colors using the\n[Place Class](/maps/documentation/javascript/place).\n\nFields\n\nUse the following fields to work with place icons:\n\n| **Field** | **Place Class** | **Places Service** |\n|-----------------------|-------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------|\n| Icon | --- | [icon](/maps/documentation/javascript/reference/places-service#PlaceResult.) |\n| Icon background color | [iconBackgroundColor](/maps/documentation/javascript/reference/place#Place.iconBackgroundColor) | [icon_background_color](/maps/documentation/javascript/reference/places-service#PlaceResult.icon_background_color) |\n| Icon mask URI | [svgIconMaskURI](/maps/documentation/javascript/reference/place#Place.svgIconMaskURI) | [icon_mask_base_uri](/maps/documentation/javascript/reference/places-service#PlaceResult.icon_mask_base_uri) |\n\n- `icon` returns the URL for a colored 71px x 71px PNG icon (Places Service only).\n- `iconBackgroundColor` and `icon_background_color` return the default HEX color code for the place icon's category.\n- `icon_mask_base_uri` (Places Service) returns the base URL for a non-colored icon, minus the file type extension (append `.svg` or `.png`).\n- `svgIconMaskURI` (Place Class) returns the base URL for a non-colored SVG icon.\n\nApply place icon and color to a marker\n\nWith Place Details, you can request a place icon and background color which you can apply\nto markers. The following example shows code to create a marker using place data by passing\n`place.iconBackgroundColor` to the `PinElement.background` option, and\n`place.svgIconMaskURI` to `PinElement.glyph`. Use `place.location`\nto place the marker in the correct location. This example also displays the `place.displayName`\nin the marker title. \n\nTypeScript \n\n```typescript\n// A marker customized using a place icon and color, name, and geometry.\nconst place = new Place({\n id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',\n});\n\n// Call fetchFields, passing the desired data fields.\nawait place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] });\n\nconst pinElement = new PinElement({\n background: place.iconBackgroundColor,\n glyph: new URL(String(place.svgIconMaskURI)),\n});\n\nconst placeIconMarkerView = new AdvancedMarkerElement({\n map,\n position: place.location,\n content: pinElement.element,\n title: place.displayName,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/advanced-markers-graphics/index.ts#L68-L87\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\n// A marker customized using a place icon and color, name, and geometry.\nconst place = new Place({\n id: \"ChIJN5Nz71W3j4ARhx5bwpTQEGg\",\n});\n\n// Call fetchFields, passing the desired data fields.\nawait place.fetchFields({\n fields: [\n \"location\",\n \"displayName\",\n \"svgIconMaskURI\",\n \"iconBackgroundColor\",\n ],\n});\n\nconst pinElement = new PinElement({\n background: place.iconBackgroundColor,\n glyph: new URL(String(place.svgIconMaskURI)),\n});\nconst placeIconMarkerView = new AdvancedMarkerElement({\n map,\n position: place.location,\n content: pinElement.element,\n title: place.displayName,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/advanced-markers-graphics/docs/index.js#L67-L91\n```\n[See the example](/maps/documentation/javascript/examples/advanced-markers-graphics)\n\nPlace icon and background color requests\n\nThe following tables show all of the available place icons by category. By\ndefault these display with a black glyph. The icon background color\nis dictated by the place's category.\n\n| **Place category: Food and drink** (icon background color #FF9E67) ||||\n|--------------------------------------------------------------------|-----------------------------------------|----------------------|------------------|\n| Bar, Night club | Cafe | Restaurant, Bakery |\n| Books, Clothing, Electronics, Jewelry, Shoes, Shopping center/Mall | Convenience store | Grocery, Supermarket | Pharmacy |\n| ATM | Bank | Gas | Lodging |\n| Post office |\n| Aquarium, Tourist | Golf | Historic | Movie |\n| Museum | Theater |\n| Airport | Bus, rideshare, taxi | Train/Rail |\n| Cemetery | Civic building | Library | Monument |\n| Parking | School (primary, secondary, university) | Worship (Christian) |\n| Worship (Hindu) | Worship (Islam) | Worship (Jain) | Worship (Jewish) |\n| Worship (Sikh) | Generic business |\n| Boating | Camping | Park | Stadium |\n| Zoo |\n| Hospital | Police |"]]
