Ícones de lugares

Os ícones de lugar indicam os vários tipos de locais (por exemplo, cafés, bibliotecas e museus). Você pode solicitar os ícones e as cores de fundo usando a classe Place.

Campos

Use os campos a seguir para trabalhar com os ícones de lugar:

• icon retorna o URL de um ícone PNG colorido de 71 x 71 pixels (somente o serviço do Places).
• iconBackgroundColor e icon_background_color retornam o código de cor hexadecimal padrão para a categoria do ícone de lugar.
• icon_mask_base_uri (serviço do Places) retorna o URL de base para um ícone sem cor e sem a extensão de tipo de arquivo (anexar .svg ou .png).
• svgIconMaskURI (classe Place) retorna o URL de base para um ícone SVG sem cor.

Aplicar um ícone de lugar e cor a um marcador

Com a Place Details, você pode solicitar um ícone de lugar e uma cor de fundo para implementar nos marcadores. O exemplo a seguir mostra o código para criar um marcador usando os dados de lugar transmitindo place.iconBackgroundColor para a opção PinElement.background, e place.svgIconMaskURI para PinElement.glyph. Use place.location para posicionar o marcador no local certo. Este exemplo também mostra o place.displayName no título do marcador.

// 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

// 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

Solicitações de ícone de lugar e cor do plano de fundo

As tabelas a seguir mostram todos os ícones de lugar disponíveis por categoria. Por padrão, elas aparecem com um glifo preto. A cor de fundo do ícone é definida pela categoria do lugar.

Categoria do lugar: alimentos e bebidas (cor #FF9E67 do plano de fundo do ícone)
Bar, Clube noturno	Café	Restaurante, padaria
Categoria do lugar: varejo (cor #4B96F3 do plano de fundo do ícone)
Livros, roupas, eletrônicos, joias, sapatos, Shopping Center	Loja de conveniência	Mercearia, supermercado	Farmácia
Categoria do lugar: serviços (cor #909CE1 do plano de fundo do ícone)
Caixa eletrônico	Banco	Postos de gasolina	Hospedagem
Correio
Categoria do lugar: entretenimento (cor #13B5C7 do plano de fundo do ícone)
Aquário, turista	Golfe	Histórico	Filme
Museu	Teatro
Categoria do lugar: transporte (cor #10BDFF do plano de fundo do ícone)
Aeroporto	Ônibus, serviço de transporte por aplicativo, táxi	Trem/Via férrea
Categoria do lugar: municipal/genérico/religioso (cor #7B9EB0 do plano de fundo do ícone)
Cemitério	Construção civil	Biblioteca	Monumento
Estacionamento	Escola (primária, secundária, universidade)	Igreja (cristã)
Templo (hindu)	Mesquita (islâmica)	Templo (jainista)	Templo (judeu)
Templo (siquista)	Empresa genérica
Categoria do lugar: ao ar livre (cor #4DB546 do plano de fundo do ícone)
Barco	Acampamento	Parque	Estádio
Zoológico
Categoria do lugar: emergência (cor #F88181 do plano de fundo do ícone)
Hospital	Polícia