Íconos de lugar

Selecciona la plataforma: Android iOS JavaScript Servicio web

Los íconos de lugar indican los diferentes tipos de lugares (por ejemplo, cafeterías, bibliotecas y museos). Puedes solicitar íconos y sus colores de fondo con la clase Place o el servicio Places.

Campos

Utiliza los siguientes campos para trabajar con íconos de lugar:

Campo	Clase Place	Servicio Places
Ícono	---	icon
Color de fondo del ícono	iconBackgroundColor	icon_background_color
URI de máscara del ícono	svgIconMaskURI	icon_mask_base_uri

• icon: Devuelve la URL de un ícono PNG de color de 71 × 71 px (solo para el servicio Places).
• iconBackgroundColor o icon_background_color: Muestra el código de color hexadecimal predeterminado para la categoría del ícono de lugar.
• icon_mask_base_uri (servicio Places): Muestra la URL base de un ícono sin color, menos la extensión del tipo de archivo (agrega .svg o .png).
• svgIconMaskURI (clase Place): Muestra la URL base de un ícono SVG sin color.

Aplica un ícono de lugar y un color a un marcador

Con Place Details, puedes solicitar un ícono de lugar y un color de fondo para aplicar a los marcadores. En el siguiente ejemplo, se muestra el código para crear un marcador con los datos de lugar. Para ello, se debe pasar place.iconBackgroundColor a la opción PinElement.background, así como place.svgIconMaskURI a PinElement.glyph. Utiliza place.location para colocar el marcador en la ubicación correcta. En este ejemplo, también se muestra el nombre del lugar (place.displayName) en el título del marcador.

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

Nota: Consulta la guía sobre cómo utilizar TypeScript y 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,
  glyph: new URL(String(place.svgIconMaskURI)),
});
const placeIconMarkerView = new AdvancedMarkerElement({
  map,
  position: place.location,
  content: pinElement.element,
  title: place.displayName,
});
index.js

Ver el ejemplo

Solicitudes de íconos de lugar y colores de fondo

Las siguientes tablas muestran todos los íconos de lugar disponibles por categoría. De forma predeterminada, estos se muestran con un glifo negro. La categoría del lugar determina el color de fondo del ícono.

Categoría de lugar: Comidas y bebidas (color de fondo del ícono #FF9E67)
Bar, club nocturno	Cafetería	Restaurante, panadería
Categoría de lugar: Venta minorista (color de fondo del ícono #4B96F3)
Libros, ropa, artículos electrónicos, artículos de joyería, calzado, centro comercial	Minimercado	Tienda de alimentos, supermercado	Farmacia
Categoría de lugar: Servicios (color de fondo del ícono #909CE1)
Cajero automático	Banco	Gasolinera	Alojamiento
Oficina de correo
Categoría de lugar: Entretenimiento (color de fondo del ícono #13B5C7)
Acuario, atracción turística	Golf	Lugar histórico	Cine
Museo	Teatro
Categoría de lugar: Transporte (color de fondo del ícono #10BDFF)
Aeropuerto	Autobús, transporte compartido, taxi	Tren o tren ligero
Categoría de lugar: Municipal/genérico/religioso (color de fondo del ícono #7B9EB0)
Cementerio	Edificio municipal	Biblioteca	Monumento
Estacionamiento	Institución educativa (primaria, secundaria o universitaria)	Lugar de culto (cristiano)
Lugar de culto (hindú)	Lugar de culto (islámico)	Lugar de culto (jainista)	Lugar de culto (judío)
Lugar de culto (sij)	Empresa genérica
Categoría de lugar: Actividades al aire libre (color de fondo del ícono #4DB546)
Náutica	Campamento	Parque	Estadio
Zoológico
Categoría de lugar: Emergencia (color de fondo del ícono #F88181)
Hospital	Policía