클라우드 기반 지도 스타일 지정

Google Maps Platform에서는 Google Cloud 콘솔을 통해 손쉽게 지도의 스타일을 지정하고 지도를 맞춤설정 및 관리할 수 있는 클라우드 기반 지도 스타일 지정 기능을 제공합니다. 이 기능을 사용하면 스타일을 변경할 때마다 앱 코드를 업데이트하지 않고도 사용자를 위한 맞춤 지도 환경을 만들 수 있습니다.

2020년 9월 15일 이전에 생성된 스타일에는 Google 지도의 고급 자연 지형지물 표시 기능이 적용되지 않습니다. 지도 스타일 지정에 Google 지도의 고급 자연 지형지물 지원을 사용하려면 지도 스타일을 생성해야 합니다.

클라우드 기반 지도 스타일 지정을 사용하는 경우 지도 ID를 지정하면 코드를 변경하지 않고도 Google 지도를 사용하는 모든 앱에서 지도 스타일을 만들고 수정할 수 있습니다. 모든 스타일 변경을 Cloud 콘솔에서 수행할 수 있으며 코딩 기술이 필요하지 않습니다. 도로, 건물, 수역, 관심 장소, 대중교통 경로와 같은 다양한 지도 요소의 모양과 색상을 변경합니다.

기능은 다음과 같습니다.

• 클라우드 기반 지도 스타일 지정: JSON을 사용하여 코드로 지도 스타일을 지정하는 대신 Cloud 콘솔에서 지도 ID 및 지도 스타일을 통해 동적 또는 정적 지도를 관리하고 지도의 스타일을 지정할 수 있습니다.
• 벡터 지도: 자바스크립트 개발자는 maps.google.com에서 사용할 수 있는 것과 동일한 WebGL 가속 벡터 기반 지도를 웹 앱에서 바로 사용할 수 있습니다.
• 비즈니스 관심 장소 필터링: 비즈니스 관심 장소 카테고리 다섯 개를 지도 화면에서 선택적으로 삭제할 수 있습니다.
• POI 밀도 조정: 기본 지도에 표시되는 관심 장소의 밀도를 조정하여 기본적으로 관심 장소를 더 많이 또는 더 적게 표시할 수 있습니다.

클라우드 기반 지도 스타일 지정은 Android용 Maps SDK¹, iOS용 Maps SDK, 자바스크립트, Maps Static API에서 사용할 수 있지만 플랫폼에 따라 일부 지형지물은 표시되지 않습니다.

시작하기 전에

• 지도 ID 만들기
  클라우드 기반 지도 스타일 지정을 사용하려면 지도 ID를 사용하여 지도를 로드해야 합니다.
• 하드 코딩된 스타일 지정에서 이전
  지도 ID를 추가하여 JSON 또는 URL 쿼리 매개변수와 같은 하드 코딩 스타일 지정으로 맞춤설정된 기존 지도에서 클라우드 기반 지도 스타일 지정을 사용하려면 향후 기능 충돌을 방지하기 위해 하드 코딩 스타일 지정을 삭제하는 것이 좋습니다. JSON 스타일 지정을 새 지도 스타일로 가져올 수 있습니다.
  • Android에서 MapStyleOptions 업데이트
  • iOS에서 GMSMapStyle 클래스 업데이트
  • 자바스크립트에서 MapTypeStyle 스타일 지정 삭제
  • Maps Static에서 style 매개변수 삭제하기

결제

클라우드 기반 지도 스타일 지정을 사용하려면 지도 ID가 필요합니다. Android용 Maps SDK, iOS용 Maps SDK, 자바스크립트에서 지도 ID를 사용하면 동적 지도 SKU에 대한 요금이 부과됩니다. Maps Static API에서 지도 ID를 사용하면 정적 Maps SKU에 대한 요금이 부과됩니다.

예

다음은 지도 ID를 사용하여 맞춤 스타일 지도를 로드하는 기본적인 예입니다. 이 경우 Maps JavaScript API는 지도가 로드될 때 지도 ID 8e0a97af9386fef를 참조하고 현재 해당 지도 ID와 연결된 지도 스타일을 자동으로 적용합니다.

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js