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.
Champs
Utilisez les icônes de lieu à l'aide des champs suivants :
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.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,});
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
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/31 (UTC).
[null,null,["Dernière mise à jour le 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 |"]]