로컬 컨텍스트 지도 맞춤설정

이 예에서는 기본 지도에 맞춤 지도 스타일을 적용합니다. 이 지도에는 하와이의 와이키키가 표시되며 트로피컬 색 구성표로 스타일이 지정됩니다. 또한 더 많은 관심 장소를 표시하기 위해 maxPlaceCount를 18로 설정했습니다.

코드 이해하기

기본 지도 액세스

기본 지도는 google.maps.localContext.LocalContextMapView 객체의 map 속성으로 액세스할 수 있습니다. 이 지도는 일반 google.maps.Map 객체이며 해당 클래스에 사용할 수 있는 모든 매개변수와 메서드를 사용하여 맞춤설정할 수 있습니다. 예를 들어 맞춤 마커와 이벤트 리스너를 추가할 수 있습니다.

var marker = new google.maps.Marker({position: center, map:  localContextMapView.map});
localContextMapView.map.addListener('click', () => {
    localContextMapView.hidePlaceDetailsView();
  });

맞춤 스타일 적용

google.maps.localContext.LocalContextMapView.map의 기본 스타일은 표준 Map과 다르기 때문에 기본값을 재정의하거나 맞춤 스타일을 로컬 컨텍스트 라이브러리 기본값과 병합할 수 있습니다. 자세한 내용은 지도 스타일 지정을 참고하세요.

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

TypeScript

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

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

자바스크립트

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

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

맞춤 마커 추가

이 예에서는 호텔 아이콘을 사용하여 중심점과 빨간색 기본 핀 마커를 구별합니다. Markerlabelicon 속성을 수정하여 마커를 맞춤설정하는 방법을 자세히 알아보세요.

기본적으로 이러한 마커는 로컬 컨텍스트 라이브러리 관심 장소 마커 아래에 표시됩니다. 로컬 컨텍스트 라이브러리 마커가 맞춤 마커를 가리지 않도록 하려면 마커의 zIndex 속성을 maxPlaceCount보다 높은 값으로 설정하세요.

TypeScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

자바스크립트

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

샘플 사용해 보기