Icônes de lieu

Sélectionnez une plate-forme : Android iOS JavaScript Services Web

Les icônes de lieu indiquent les différents types de lieux (cafés, bibliothèques et musées, par exemple). Vous pouvez demander des icônes et leurs couleurs d'arrière-plan à l'aide de la classe Place ou du service Places.

Champs

Utilisez les icônes de lieu à l'aide des champs suivants :

Champ	Classe Place	Service Places
Icône	---	icon
Couleur d'arrière-plan de l'icône	iconBackgroundColor	icon_background_color
URI de masque de l'icône	svgIconMaskURI	icon_mask_base_uri

• icon renvoie l'URL associée à une icône colorée de 71 x 71 pixels au format PNG (service Places uniquement).
• iconBackgroundColor et icon_background_color renvoient le code couleur hexadécimal par défaut pour la catégorie de l'icône de lieu.
• icon_mask_base_uri (service Places) renvoie l'URL de base d'une icône non colorée, moins l'extension du type de fichier (ajoutez .svg ou .png).
• svgIconMaskURI (classe Place) renvoie l'URL de base d'une icône SVG non colorée.

Appliquer une icône de lieu et une couleur à un repère

Avec Place Details, vous pouvez envoyer une requête pour une icône de lieu et une couleur d'arrière-plan que vous pouvez appliquer aux repères. L'exemple suivant montre le code permettant de créer un repère à l'aide des données de lieu en transmettant place.iconBackgroundColor à l'option PinElement.background et place.svgIconMaskURI à PinElement.glyph. Utilisez place.location pour placer le repère à l'endroit souhaité. Cet exemple affiche également le place.displayName dans le titre du repère.

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

Remarque : Consultez ce guide sur l'utilisation de TypeScript et 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

Consulter l'exemple

Demandes d'icônes de lieu et de couleurs d'arrière-plan

Les tableaux suivants présentent toutes les icônes de lieu disponibles par catégorie. Par défaut, ces symboles s'affichent avec un glyphe noir. La couleur d'arrière-plan de l'icône est déterminée par la catégorie de lieu.

Catégorie de lieu : alimentation et boissons (couleur d'arrière-plan de l'icône #FF9E67)
Bar, boîte de nuit	Café	Restaurant, boulangerie
Catégorie de lieu : commerce de détail (couleur d'arrière-plan de l'icône #4B96F3)
Livres, vêtements, électronique, bijoux, chaussures, centre commercial	Supérette	Épicerie, supermarché	Pharmacie
Catégorie de lieu : services (couleur d'arrière-plan de l'icône #909CE1)
Distributeur de billets	Banque	Station-service	Hébergement
Bureau de poste
Catégorie de lieu : divertissement (couleur d'arrière-plan de l'icône #13B5C7)
Aquarium, tourisme	Golf	Historique	Films
Musée	Théâtre
Catégorie de lieu : transport (couleur d'arrière-plan de l'icône #10BDFF)
Aéroport	Bus, VTC, taxi	Train
Catégorie de lieu : municipal/générique/religieux (couleur d'arrière-plan de l'icône #7B9EB0)
Cimetière	Bâtiment municipal	Bibliothèque	Monument
Parking	École primaire, école secondaire, université	Lieu de culte (chrétien)
Lieu de culte (hindou)	Lieu de culte (islam)	Lieu de culte (jaïn)	Lieu de culte (juif)
Lieu de culte (sikh)	Entreprise générique
Catégorie de lieu : extérieur (couleur d'arrière-plan de l'icône #4DB546)
Nautisme	Camping	Parc	Stade
Zoo
Catégorie de lieu : service d'urgence (couleur d'arrière-plan de l'icône #F88181)
Hôpital	Police