지원 중단됨: 기존 클라우드 스타일 지정은 지원 중단되었으며 2025년 3월에 사용 중단될 예정입니다. 이때 기존 지도 스타일이 더 이상 작동하지 않을 수 있습니다. 2025년 3월 전에 새로운 클라우드 기반 지도 스타일 지정으로 업데이트하는 것이 좋습니다. 지원 중단에 대한 자세한 내용은 지원 중단을 참조하세요. 기존 스타일을 업데이트하려면 지도 스타일을 최신 버전으로 업데이트를 참고하세요.

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

기존 예

Android

ApiDemos 샘플 앱 실행

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

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

알려진 문제

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

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

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

iOS

ApiDemos 샘플 앱 실행

ApiDemos 샘플 앱을 실행하려면 GitHub 샘플 Google 지도 샘플 앱과 CloudBasedMapStylingViewController 프로젝트 (Swift용 GitHub 샘플 | Objective-C)를 확인하세요.

선택적 클라우드 스타일 지정 CocoaPod 또는 GitHub 데모

처음부터 시작하는 대신 클라우드에서 iOS 지도의 스타일을 지정하는 방법을 보여주는 Objective-C 샘플 애플리케이션을 사용해 볼 수 있습니다. 자세한 내용은 Objective-C 샘플을 참조하세요.

베타 데모 앱 빌드

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

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

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

static NSString *const kAPIKey = @"YOUR_API_KEY";

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

다음 줄을 삭제합니다.

```
#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 Google Cloud Shell

Maps Static API

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

style 매개변수로 맞춤설정된 기존 지도와 함께 클라우드 기반 지도 스타일을 지정하는 경우 향후 지형지물과 충돌하지 않도록 기존 지도를 삭제해야 합니다.

Google 웹 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" />