이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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, JavaScript, Maps Static API에서 사용할 수 있지만 플랫폼에 따라 일부 지형지물은 표시되지 않습니다.

시작하기 전에

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

* Android용 Maps SDK 업그레이드
클라우드 기반 지도 스타일 지정을 사용하려면 Android용 Maps SDK 18.0.0 이상을 사용하고 최신 Android용 Maps SDK 렌더기를 사용해야 합니다.

청구

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

예

Android

ApiDemos 샘플 앱 실행

ApiDemos 샘플 앱을 실행하려면 GitHub 샘플(Java | Kotlin)과 CloudBasedMapStylingDemoActivity 데모(Java | Kotlin)를 참고하세요.

클라우드에서 Android 지도의 스타일을 지정하는 방법을 보여주는 Java 및 Kotlin 샘플 애플리케이션을 확인할 수 있습니다.

알려진 문제

앱이 고객에게 제공되면 지도 ID가 포함된 지도의 맞춤 스타일을 Google Cloud 콘솔에서 업데이트할 수 있습니다. 새로운 스타일은 몇 시간 이내에 앱에 반영됩니다.

테스트를 위해 새로운 맞춤 스타일이 즉시 표시되도록 하려면 테스트 기기에서 앱 데이터를 삭제하세요. 기기에서 데이터를 삭제하는 방법에 대한 자세한 내용은 Android 도움말: 여유 공간 확보를 참고하세요.

설정은 휴대전화마다 다를 수 있습니다. 자세한 내용은 기기 제조업체에 문의하세요.

iOS

ApiDemos 샘플 앱 실행

ApiDemos 샘플 앱을 실행하려면 GitHub 샘플 GoogleMap 샘플 앱 및 CloudBasedMapStylingViewController 프로젝트 (Swift | Objective-C용 GitHub 샘플)를 참조하세요.

클라우드 스타일 지정 CocoaPod 또는 GitHub 데모(선택사항)

처음부터 시작하는 대신 여기에서 클라우드에서 iOS 지도의 스타일을 지정하는 방법을 보여주는 Objective-C 샘플 애플리케이션을 사용해 보세요.

베타 데모 앱 빌드

Xcode에서 컴파일 버튼을 눌러 빌드한 다음, 현재 구성표를 실행합니다. 빌드에서 SDKDemoAPIKey.h 파일에 API 키를 입력하라는 오류가 발생합니다.

아직 API 키가 없는 경우 다음 안내에 따라 Cloud Console에서 프로젝트를 설정하고 API 키를 가져옵니다. Cloud Console에서 키를 구성할 때 앱에서만 키를 사용할 수 있도록 앱의 번들 식별자를 지정할 수 있습니다. SDK 샘플 앱의 기본 번들 식별자는 com.example.GoogleMapsDemos입니다.

SDKDemoAPIKey.h 파일을 수정하고 API 키를 kAPIKey 상수의 정의에 붙여넣습니다.

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

수정을 위해 SDKDemoAPIKey.h 파일을 잠금 해제하라는 메시지가 Xcode에 표시되면 잠금 해제를 선택합니다.

다음 줄을 삭제합니다.

```
#error Register for API Key and insert here.
```

프로젝트를 빌드하고 실행합니다.

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

CloudStyling 데모는 Google Cloud Console에 설정된 스타일을 사용하여 지도 스타일을 지정하는 방법을 보여줍니다.

데모 애플리케이션이 실행되면 목록 상단의 베타 샘플 섹션에서 지도 맞춤설정 데모를 클릭합니다.

스타일 지도를 클릭하여 여러 지도 ID를 로드하는 효과를 확인합니다.

나만의 스타일을 추가 ('스타일 지도' > '새 지도 ID 추가')하여 맞춤 스타일 지도로 지도 업데이트를 확인해 보세요.

JavaScript

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

TypeScript

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

JavaScript

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

예 보기

샘플 사용해 보기

JSFiddle.net CodeSandbox.io Google Cloud Shell

Maps Static API

지도 ID는 특정 지도 스타일 또는 지형지물과 연결된 식별자입니다. Google Cloud Console에서 지도 스타일을 구성하고 지도 ID와 연결합니다. 그런 다음 코드에서 지도 ID를 참조하면 연결된 지도 스타일이 앱에 표시됩니다. 이후의 스타일 업데이트는 고객이 업데이트할 필요 없이 앱에 자동으로 표시됩니다.

style 매개변수로 맞춤설정된 기존 지도에서 클라우드 기반 지도 스타일 지정을 사용하는 경우 향후 기능과의 충돌을 방지하기 위해 기존 지도 스타일을 삭제해야 합니다.

웹 API 중 하나를 사용하는 새 지도 또는 기존 지도에 지도 ID를 추가하려면 map_id URL 매개변수를 추가하고 지도 ID로 설정합니다. 이 예는 Maps Static API를 사용하여 지도에 지도 ID를 추가하는 방법을 보여줍니다.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

Android 라이트 모드에서는 클라우드 기반 지도 스타일 지정을 사용할 수 없습니다. ↩