장소 아이콘

플랫폼 선택: 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

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

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	은행	주유소	숙박시설
우체국
장소 카테고리: 엔터테인먼트 (아이콘 배경색 #13B5C7)
수족관, 관광명소	골프	유적지	영화
박물관	극장
장소 카테고리: 교통 (아이콘 배경색 #10BDFF)
공항	버스, 차량 공유, 택시	기차/철도
장소 카테고리: 시/일반/종교 (아이콘 배경색 #7B9EB0)
묘지	관청 건물	도서관	기념비
주차장	학교(초등학교, 중고등학교, 대학교)	예배당(기독교)
예배당(힌두교)	예배당(이슬람교)	예배당(자이나교)	예배당(유대교)
예배당(시크교)	일반 비즈니스
장소 카테고리: 실외 (아이콘 배경색 #4DB546)
보트 타기	캠핑	공원	경기장
동물원
장소 카테고리: 응급 (아이콘 배경색 #F88181)
병원	경찰서