LocalContextMapView 스타일 지정

이 섹션에서는 맞춤 지도 스타일을 적용하고 지도 마커 아이콘의 모양을 맞춤설정하여 LocalContextMapView 지도 모양을 맞춤설정하는 방법을 설명합니다.

맞춤 지도 스타일 적용

맞춤 스타일을 적용하여 LocalContextMapView 지도의 시각적 모양을 맞춤설정할 수 있습니다. 하지만 LocalContextMapView에는 표준 Map과 다른 기본 스타일이 제공됩니다.

LocalContextMapView 기본 스타일을 맞춤 스타일로 완전히 재정의하는 방법은 다음과 같습니다(styles에는 맞춤 스타일 배열이 포함됩니다).

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

LocalContextMapView 기본 스타일을 기반으로 맞춤 스타일(styles)을 만드는 방법은 다음과 같습니다.

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});index.ts

자바스크립트

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});index.js

마커 아이콘 맞춤설정

핀 색상, 글리프 색상, 배율(크기)을 맞춤설정하여 마커 아이콘의 시각적 모양을 설정할 수 있습니다. LocalContextMapView를 초기화할 때 설정하세요. 이러한 값은 정적 객체(아이콘 스타일이 상태에 따라 변경되지 않음) 또는 동적 함수(아이콘이 강조표시되거나 선택되면 아이콘 스타일이 변경됨)로 설정할 수 있습니다.

맞춤 스타일은 기본 스타일에 추가되어 병합됩니다.
RGB, 16진수, HSL, 색상 키워드를 포함한 모든 CSS 색상 문법이 지원됩니다.
배율은 숫자 값이며 2는 2배, 1은 1배인 식입니다. 기본적으로 핀에는 상태마다 다른 배율 값이 설정됩니다. 배율은 절댓값이므로 전달하는 값에 따라 기본값에 상대적인 핀 크기가 변경되지 않고 기본값이 재정의됩니다. 예를 들어 모든 상태의 배율을 1로 설정하면 상태에 관계없이 핀이 같은 크기로 설정됩니다.

정적으로 마커 아이콘 색상 및 배율 설정

마커 아이콘과 글리프의 기본 색상과 배율을 설정할 수 있습니다. 이렇게 하려면 pinOptionsSetup에서 glyphColor 및 background의 색상 값과 scale의 숫자 값을 지정하세요. 다음 예에서는 아이콘을 검은색, 글리프를 흰색으로 설정하고 배율을 2로 늘립니다.

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

동적으로 마커 아이콘 색상 및 배율 설정

상태(기본값, 강조표시됨 또는 선택됨)를 기반으로 마커 아이콘 및 글리프의 기본 색상을 설정하려면 조건문을 사용하여 각 상태에 원하는 값을 설정하세요. 사용자가 마커 위로 마우스를 가져가면 isHighlighted가 true가 됩니다. 사용자가 마커를 클릭하면 isSelected가 true가 됩니다. 장소 세부정보 뷰가 닫히면 마커 아이콘이 기본 스타일로 돌아갑니다. 다음 예에서는 상태에 따라 마커 아이콘 스타일을 변경합니다.

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

로컬 컨텍스트 베타로 클라우드 기반 지도 스타일 지정 사용

로컬 컨텍스트 베타와 함께 클라우드 기반 지도 스타일 지정을 사용하려면 다음 단계를 따르세요.

mapId가 있는 Map을 만들어 LocalContextMapView에 전달
일반 관심 장소의 라벨 및 아이콘 사용 중지
내부 Map 옵션에서 몇 가지 요소 사용 중지. 이 단계는 선택사항입니다.

`mapId`가 있는 `Map`을 만들어 `LocalContextMapView`에 전달

클라우드 기반 지도 스타일 지정 ID를 사용하여 지도를 추가하려면 map 요소(ID와 모든 내부 Map 옵션 포함)를 정의하고 이를 사용하여 다음 예에 표시된 대로 LocalContextMapView를 초기화합니다.

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

일반 관심 장소의 라벨 및 아이콘 사용 중지

일반 관심 장소의 라벨 및 아이콘을 사용 중지하려면 다음 단계를 따르세요.

Google Cloud 콘솔에서 지도 스타일을 선택하여 지도 스타일 화면을 엽니다.
관심 장소의 스타일 구성에서 라벨 및 아이콘의 공개 상태를 사용 안함으로 설정합니다.
관심 장소의 스타일 구성에서 공원 라벨의 공개 상태를 사용으로 설정합니다.

내부 `Map` 옵션 설정(선택사항)

아래와 같이 다른 내부 Map 옵션 외에 다음과 같은 내부 Map 옵션을 설정할 수도 있습니다.

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});