장소 아이콘

플랫폼 선택: Android iOS JavaScript 웹 서비스

장소 아이콘은 다양한 유형의 장소(예: 커피숍, 도서관, 박물관)를 나타냅니다. 아이콘 및 배경 색상은 장소 클래스 또는 장소 서비스를 사용하여 요청할 수 있습니다.

필드

장소 아이콘을 사용하려면 다음 필드를 사용하세요.

필드 장소 클래스 장소 서비스
아이콘 --- 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,
});
index.ts

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
예시 보기

장소 아이콘 및 배경 색상 요청

다음 표에는 사용 가능한 모든 장소 아이콘이 카테고리별로 나와 있습니다. 기본적으로 이러한 장소 아이콘은 검은 글리프로 표시됩니다. 아이콘 배경 색상은 장소의 카테고리에 따라 결정됩니다.

장소 카테고리: 식음료
(아이콘 배경색 #FF9E67)
바
바,
나이트클럽 		카페
카페 		음식점
음식점, 제과점
장소 카테고리: 소매
(아이콘 배경색 #4B96F3)
서점
도서, 의류, 전자제품, 보석, 신발,
쇼핑 센터/몰 		편의점
편의점 		식료품점
식료품점, 슈퍼마켓 		약국
약국
장소 카테고리: 서비스
(아이콘 배경 #909CE1)
ATM
ATM 		은행
은행 		주유소
주유소 		숙박시설
숙박시설
우체국
우체국
장소 카테고리: 엔터테인먼트
(아이콘 배경색 #13B5C7)
수족관, 관광명소
수족관, 관광명소 		골프
골프 		유적지
유적지 		영화
영화
박물관
박물관 		극장
극장
장소 카테고리: 교통
(아이콘 배경색 #10BDFF)
공항
공항 		버스
버스, 차량 공유, 택시 		기차/철도
기차/철도
장소 카테고리: 시/일반/종교
(아이콘 배경색 #7B9EB0)
묘지
묘지 		관청 건물
관청 건물 		도서관
도서관 		기념비
기념비
주차장
주차장 		학교(초등학교, 중고등학교, 대학교)
학교(초등학교, 중고등학교, 대학교) 		예배당(기독교)
예배당(기독교)
예배당(힌두교)
예배당(힌두교) 		예배당(이슬람교)
예배당(이슬람교) 		예배당(자이나교)
예배당(자이나교) 		예배당(유대교)
예배당(유대교)
예배당(시크교)
예배당(시크교) 		일반 비즈니스
일반 비즈니스
장소 카테고리: 실외
(아이콘 배경색 #4DB546)
보트 타기
보트 타기 		캠핑
캠핑 		공원
공원 		경기장
경기장
동물원
동물원
장소 카테고리: 응급
(아이콘 배경색 #F88181)
병원
병원 		경찰서
경찰서