Icone di luoghi

Seleziona la piattaforma:Android iOS JavaScript Servizio web

Le icone dei luoghi indicano i vari tipi di luoghi (ad esempio bar, 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:

Campo	Place Class	Servizio Places
Icona	---	icon
Colore sfondo icona	iconBackgroundColor	icon_background_color
URI della maschera dell'icona	svgIconMaskURI	icon_mask_base_uri

• icon restituisce l'URL di un'icona PNG colorata di 71 x 71 px (solo servizio Places).
• iconBackgroundColor e icon_background_color restituiscono il codice colore esadecimale predefinito per la categoria dell'icona del luogo.
• icon_mask_base_uri (servizio Places) restituisce l'URL di base per un'icona non colorata, senza l'estensione del tipo di file (aggiungi .svg o .png).
• svgIconMaskURI (classe Place) restituisce l'URL di base per un'icona SVG non colorata.

Applica l'icona e il colore del luogo a un indicatore

Con Place Details, puoi richiedere un'icona e un colore di sfondo per un luogo, che puoi applicare agli indicatori. 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. Questo esempio mostra anche place.displayName nel titolo dell'indicatore.

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,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);
index.ts

Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

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,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);
index.js

Vedi l'esempio

Richieste di icone e colori di sfondo

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 di sfondo dell'icona #FF9E67)
Bar, Night club	Caffè	Ristorante, panificio
Categoria di luogo: vendita al dettaglio (colore di sfondo dell'icona #4B96F3)
Libri, abbigliamento, elettronica, gioielli, scarpe, centro commerciale	Minimarket	Negozio di alimentari, supermercato	Farmacia
Categoria di luogo: Servizi (colore di sfondo dell'icona #909CE1)
Bancomat	Banca	Gas	Struttura ricettiva
Ufficio postale
Categoria di luogo: Intrattenimento (colore di sfondo dell'icona #13B5C7)
Acquario, turista	Golf	Storico	Film
Museo	Cinema
Categoria di luogo: Trasporti (colore di sfondo dell'icona #10BDFF)
Aeroporto	Autobus, ridesharing, taxi	Treno/Mezzi su rotaie
Categoria di luogo: comunale/generico/religioso (colore di sfondo dell'icona #7B9EB0)
Cimitero	Edificio pubblico	Raccolta	Monumento
Parcheggio	Scuola (primaria, secondaria, università)	Culto (cristiano)
Luogo di culto (indù)	Culto (Islam)	Luogo di culto (giainista)	Luogo di culto (ebraico)
Luogo di culto (sikh)	Attività generica
Categoria di luogo: All'aperto (colore di sfondo dell'icona #4DB546)
Nautica	Campeggio	Parco	Stadio
Zoo
Categoria di luogo: Emergenza (colore di sfondo dell'icona #F88181)
Ospedale	Polizia