장소 아이콘은 다양한 유형의 장소(예: 커피숍, 도서관, 박물관)를 나타냅니다. 아이콘 및 배경 색상은 장소 클래스를 사용하여 요청할 수 있습니다.
필드
장소 아이콘을 사용하려면 다음 필드를 사용하세요.
| 필드 | 장소 클래스 | 장소 서비스 | 
|---|---|---|
| 아이콘 | --- | icon | 
       
| 아이콘 배경 색상 | iconBackgroundColor | 
         icon_background_color | 
       
| 아이콘 마스크 URI | svgIconMaskURI | 
         icon_mask_base_uri | 
       
icon은 색상이 지정된 71x71픽셀 PNG 아이콘의 URL을 반환합니다(장소 서비스만 해당).iconBackgroundColor및icon_background_color는 장소 아이콘의 카테고리에 대해 기본 16진수 색상 코드를 반환합니다.icon_mask_base_uri(장소 서비스)는 색상이 지정되지 않은 아이콘의 기준 URL에서 파일 형식 확장자를 뺀 값을 반환합니다(.svg또는.png추가).svgIconMaskURI(장소 클래스)는 색상이 지정되지 않은 SVG 아이콘의 기준 URL을 반환합니다.
장소 아이콘과 색상을 마커에 적용
장소 세부정보를 사용하면 마커에 적용할 수 있는 장소 아이콘과 배경 색상을 요청할 수 있습니다. 다음 예는 place.iconBackgroundColor를 PinElement.background 옵션에 전달하고 place.svgIconMaskURI를 PinElement.glyph에 전달하여 장소 데이터로 마커를 만드는 코드를 보여줍니다. place.location을 사용하여 마커를 올바른 위치에 배치합니다. 또한 이 예에서는 마커 제목에 place.displayName을 표시합니다.
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, });
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, });
장소 아이콘 및 배경 색상 요청
다음 표에는 사용 가능한 모든 장소 아이콘이 카테고리별로 나와 있습니다. 기본적으로 이러한 장소 아이콘은 검은 글리프로 표시됩니다. 아이콘 배경 색상은 장소의 카테고리에 따라 결정됩니다.
| 장소 카테고리: 식음료 (아이콘 배경색 #FF9E67)  | 
  |||
|---|---|---|---|
| 
       바, 나이트클럽  | 
    
       카페  | 
    
       음식점, 제과점  | 
  |
| 장소 카테고리: 소매 (아이콘 배경색 #4B96F3)  | 
  |||
| 
       도서, 의류, 전자제품, 보석, 신발, 쇼핑 센터/몰  | 
    
       편의점  | 
    
       식료품점, 슈퍼마켓  | 
    
       약국  | 
  
| 장소 카테고리: 서비스 (아이콘 배경 #909CE1)  | 
  |||
| 
       ATM  | 
    
       은행  | 
    
       주유소  | 
    
       숙박시설  | 
  
| 
       우체국  | 
  |||
| 장소 카테고리: 엔터테인먼트 (아이콘 배경색 #13B5C7)  | 
  |||
| 
       수족관, 관광명소  | 
    
       골프  | 
    
       유적지  | 
    
       영화  | 
  
| 
       박물관  | 
    
       극장  | 
  ||
| 장소 카테고리: 교통 (아이콘 배경색 #10BDFF)  | 
  |||
| 
       공항  | 
    
       버스, 차량 공유, 택시  | 
    
       기차/철도  | 
  |
| 장소 카테고리: 시/일반/종교 (아이콘 배경색 #7B9EB0)  | 
  |||
| 
       묘지  | 
    
       관청 건물  | 
    
       도서관  | 
    
       기념비  | 
  
| 
       주차장  | 
    
       학교(초등학교, 중고등학교, 대학교)  | 
    
       예배당(기독교)  | 
  |
| 
       예배당(힌두교)  | 
    
       예배당(이슬람교)  | 
    
       예배당(자이나교)  | 
    
       예배당(유대교)  | 
  
| 
       예배당(시크교)  | 
    
       일반 비즈니스  | 
  ||
| 장소 카테고리: 실외 (아이콘 배경색 #4DB546)  | 
  |||
| 
       보트 타기  | 
    
       캠핑  | 
    
       공원  | 
    
       경기장  | 
  
| 
       동물원  | 
  |||
| 장소 카테고리: 응급 (아이콘 배경색 #F88181)  | 
  |||
| 
       병원  | 
    
       경찰서  | 
  ||