장소 아이콘은 다양한 유형의 장소(예: 커피숍, 도서관, 박물관)를 나타냅니다. 아이콘 및 배경 색상은 장소 클래스 또는 장소 서비스를 사용하여 요청할 수 있습니다.
필드
장소 아이콘을 사용하려면 다음 필드를 사용하세요.
필드 | 장소 클래스 | 장소 서비스 |
---|---|---|
아이콘 | --- | 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) |
|||
병원 |
경찰서 |