Yer simgeleri, çeşitli yer türlerini (ör. kafeler, kütüphaneler ve müzeler) gösterir. Sınıf yerleştirme özelliğini kullanarak simge ve arka plan renkleri isteyebilirsiniz.
Alanlar
Yer simgeleriyle çalışmak için aşağıdaki alanları kullanın:
icon, renkli 71 piksel x 71 piksel PNG simgesinin URL'sini döndürür (yalnızca Yerler Hizmeti).
iconBackgroundColor ve icon_background_color, yer simgesinin kategorisi için varsayılan HEX renk kodunu döndürür.
icon_mask_base_uri (Yerler Hizmeti), renkli olmayan bir simgenin temel URL'sini, dosya türü uzantısı eksiltilerek döndürür (.svg veya .png eklenir).
svgIconMaskURI (Yer sınıfı), renkli olmayan bir SVG simgesinin temel URL'sini döndürür.
İşaretçiye yer simgesi ve renk uygulama
Yer Ayrıntıları ile işaretçilere uygulayabileceğiniz bir yer simgesi ve arka plan rengi isteyebilirsiniz. Aşağıdaki örnekte, place.iconBackgroundColor değerini PinElement.background seçeneğine, place.svgIconMaskURI değerini ise PinElement.glyph seçeneğine göndererek yer verilerini kullanarak bir işaretçi oluşturma kodu gösterilmektedir. İşaretçiyi doğru konuma yerleştirmek için place.location
simgesini kullanın. Bu örnekte, işaretçi başlığında place.displayName
simgesi de gösterilmektedir.
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,});
Aşağıdaki tablolarda, kategoriye göre tüm mevcut yer simgeleri gösterilmektedir. Bunlar varsayılan olarak siyah bir simgeyle gösterilir. Simgenin arka plan rengi, yerin kategorisine göre belirlenir.
Yer kategorisi: Yiyecek ve içecek (simge arka plan rengi #FF9E67)
Bar, Gece kulübü
Kafe
Restoran, Fırın
Yer kategorisi: Perakende (simge arka plan rengi #4B96F3)
Kitap, Giyim, Elektronik, Mücevher, Ayakkabı, Alışveriş merkezi
Market
Bakkal, Süpermarket
Eczane
Yer kategorisi: Hizmetler (simge arka plan rengi #909CE1)
ATM
Banka
Gaz
Konaklama
Postane
Yer kategorisi: Eğlence (simge arka plan rengi #13B5C7)
Akvaryum, Turist
Golf
Tarihi
Film
Müze
Tiyatro
Yer kategorisi: Ulaşım (simge arka plan rengi #10BDFF)
Havalimanı
Otobüs, araç paylaşma, taksi
Tren/Demiryolu
Yer kategorisi: Belediye/genel/dini (simge arka plan rengi #7B9EB0)
Mezarlık
Belediye binası
Kitaplık
Anıt
Otopark
Okul (ilkokul, ortaokul, üniversite)
İbadet (Hristiyan)
Tapınma (Hindu)
İbadet (İslam)
Tapınma (Jain)
İbadet (Yahudi)
Tapınma (Sih)
Genel işletme
Yer kategorisi: Açık hava (simge arka plan rengi #4DB546)
Tekne
Kamp
Park
Stadyum
Hayvanat bahçesi
Yer kategorisi: Acil durum (simge arka plan rengi #F88181)
[null,null,["Son güncelleme tarihi: 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 |"]]
