지도 ID는 Google 지도의 단일 인스턴스를 나타내는 데 사용되는 고유 식별자입니다. 지도 ID를 사용하여 웹사이트와 애플리케이션에서 기능을 사용 설정하거나 지도를 관리하거나 스타일을 지정합니다. Google Cloud 콘솔 프로젝트의 지도 관리 페이지에서 필요한 각 플랫폼(JavaScript, Android, iOS 또는 정적 지도)의 지도 ID를 만들 수 있습니다.
지도 ID로 할 수 있는 작업
지도 ID를 사용하여 지형지물과 스타일을 사용 설정합니다. 다음은 지도 ID를 사용하는 방법의 몇 가지 예입니다. 전체 목록은 지도 ID를 사용하는 기능을 참고하세요.
클라우드 기반 지도 스타일 지정: 지도 ID를 지도 스타일과 연결하여 Google Cloud 콘솔을 사용하여 지도의 스타일을 지정하고 맞춤설정하며 관리합니다. 모든 플랫폼(JavaScript, Android, iOS, Maps Static API)에서 사용할 수 있습니다.
벡터 지도: 지도 ID를 사용하여 WebGL을 사용하여 클라이언트 측의 로드 시간에 그려지는 벡터 기반 타일로 구성된 지도를 사용합니다. JavaScript에서 사용할 수 있습니다.
고급 마커: 지도 ID를 사용하여 고급 마커를 사용 설정합니다. JavaScript, Android, iOS에서 사용할 수 있습니다.
클라우드 기반 지도 스타일 지정 예시
클라우드 기반 지도 스타일 지정을 사용하여 웹사이트 및 Android 앱의 지도 스타일을 지정하려면 다음 단계를 따르세요.
사용 중인 각 플랫폼의 지도 ID를 만듭니다. 예를 들어 JavaScript 및 Android 지도 ID를 만듭니다. 자세한 내용은 지도 ID 만들기를 참고하세요.
Google Cloud 콘솔에서 지도 스타일을 구성합니다. 자세한 내용은 클라우드 기반 지도 스타일 지정을 참고하세요.
Google Cloud 콘솔에서 두 지도 ID를 모두 지도 스타일과 연결합니다. 자세한 내용은 스타일에 지도 ID 연결을 참고하세요.
웹사이트 JavaScript 및 Android 앱 코드에서 지도 ID를 참조합니다. 자세한 내용은 앱에 지도 ID 추가하기를 참고하세요.
그러면 지도 ID와 연결된 지도 스타일이 웹사이트와 Android 앱에 표시됩니다. Cloud 콘솔에서 지도 스타일을 업데이트하면 고객이 앱을 업데이트하지 않아도 두 위치에 모두 변경사항이 자동으로 표시됩니다.
지도 ID를 사용하는 기능
다음 표에는 지도 ID를 사용하는 Google Maps Platform 기능 및 API가 나와 있습니다.
| 기능 또는 API | 지도 ID를 사용하여 이러한 목표 달성 |
|---|---|
| 고급 마커 | 고급 마커를 사용 설정합니다. 지도 ID를 만들 필요가 없으며 대신 데모 지도 ID `DEMO_MAP_ID`를 사용할 수 있습니다. |
| 경계를 위한 데이터 기반 스타일 지정 | 지도 ID를 경계 및 스타일 집합과 연결하여 경계에 따라 지도의 스타일을 지정합니다. |
| 데이터 세트를 위한 데이터 기반 스타일 지정 | 지도 ID를 데이터 및 스타일 집합과 연결하여 데이터 세트에 따라 지도 스타일을 지정합니다. |
| Flutter | Flutter 앱에서 사용되는 Google 지도의 스타일을 지정합니다. |
| Maps Embed API | 웹페이지에 삽입할 지도를 지정하고 스타일을 지정합니다. |
| Maps JavaScript API | 웹페이지에 표시할 지도의 스타일을 지정합니다. |
| Android용 Maps SDK | Android 애플리케이션에 표시할 지도의 스타일을 지정합니다.1 |
| iOS용 Maps SDK | iOS 애플리케이션에 표시할 지도의 스타일을 지정합니다.1 |
| Maps Static API | 정적 이미지로 렌더링할 지도를 지정하고 스타일을 지정합니다. |
| 이동 솔루션 | Android 및 iOS용 Maps JavaScript API 및 SDK를 사용하여 이동성 솔루션의 지도 스타일을 지정합니다.1 |
| WebGL (벡터 지도) | JavaScript 벡터 지도 ID를 사용하여 WebGL 기능을 사용 설정합니다. |
1 Android용 Maps SDK 또는 iOS용 Maps SDK에서 지도 ID를 사용하면 Dynamic Maps SKU에 따라 청구되는 지도 로드가 트리거됩니다.
지도 ID를 만들고 사용하는 방법
지도 ID는 Google 지도의 단일 인스턴스를 나타내는 고유 식별자입니다. Cloud Console에서 지도 ID를 만들고 지도 ID와 연결된 지도 스타일을 업데이트합니다.
필수 권한
프로젝트에서 지도 ID를 만들거나 관리하려면 프로젝트의 Cloud Console IAM 페이지에서 적절한 역할 수준 권한(편집자 또는 소유자)이 있는 사용자를 사용해야 합니다. 자세한 내용은 IAM 기본 및 사전 정의된 역할 참조를 참고하세요.
지도 ID 만들기
Cloud 콘솔에서 언제든지 지도 ID를 만들고 지도 ID와 연결된 스타일을 업데이트할 수 있습니다.
지도 ID를 만들려면 다음 단계를 따르세요.
필요한 권한으로 Cloud Console 프로젝트에 로그인하고 엽니다.
Cloud Console에서 지도 관리 페이지로 이동합니다.
지도 ID 만들기를 선택합니다.
새 지도 ID 만들기 페이지에서 다음을 수행합니다.
- 이름에 지도 ID의 이름을 지정합니다.
- 선택사항: 설명에 지도 ID의 용도를 설명합니다.
- 지도 유형에서 지도 ID를 사용할 플랫폼을 선택합니다. JavaScript를 선택하는 경우 래스터 (기본값) 또는 벡터 지도 유형도 선택합니다. 벡터 지도에 관한 자세한 내용은 벡터 지도를 참고하세요.
- 저장을 선택하여 새 지도 ID를 표시합니다.
지도 ID를 지도 스타일에 연결
이 안내에서는 프로젝트에 기존 지도 스타일이 하나 이상 있다고 가정합니다. 지도 스타일이 없는 경우 클라우드 기반 지도 스타일 지정을 참고하고 플랫폼을 선택하여 만드는 방법을 알아보세요.
- Cloud Console에서 지도 관리 페이지로 이동합니다.
- 표에서 기존 지도 ID를 선택합니다.
- 연결된 지도 스타일에서 지도 스타일을 선택합니다.
저장을 선택합니다.
앱에 지도 ID 추가하기
Android
MapView 클래스를 사용하거나 프로그래매틱 방식으로 GoogleMapOptions 클래스를 사용하여 활동의 레이아웃 파일에 있는 <fragment> 요소를 통해 지도 ID를 추가합니다.
예를 들어 res/values/strings.xml에 map_id라는 문자열 값으로 저장된
지도 ID를 만들었다고 가정해보겠습니다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>
활동의 레이아웃 파일에 있는 <fragment> 요소를 통해 추가된 지도의 경우, 맞춤 스타일이 있어야 하는 모든 지도 프래그먼트에서 map:mapId 속성에 지도 ID를 지정해야 합니다.
<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
map:name="com.google.android.gms.maps.SupportMapFragment"
…
map:mapId="@string/map_id" />
MapView 클래스의 map:mapId 속성을 사용하여 지도 ID를
지정할 수도 있습니다.
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
....
map:mapId="@string/map_id" />
프로그래매틱 방식으로 지도 ID를 지정하려면 GoogleMapOptions 클래스를 사용하여 지도 ID를 MapFragment 인스턴스에 전달합니다.
자바
MapFragment mapFragment = MapFragment.newInstance(
new GoogleMapOptions()
.mapId(getResources().getString(R.string.map_id)));
Kotlin
val mapFragment = MapFragment.newInstance(
GoogleMapOptions()
.mapId(resources.getString(R.string.map_id))
)
Android 스튜디오에서 평상시처럼 앱을 빌드하고 실행합니다. 첫 번째 단계에서 구성한 맞춤 스타일은 지정된 지도 ID가 있는 모든 지도에 적용됩니다.
iOS
지도 ID를 사용하여 지도를 인스턴스화하려면 다음 단계를 따르세요.
- Cloud 콘솔의 지도 ID 문자열로
GMSMapID를 만듭니다. - 방금 만든 지도 ID를 지정하는
GMSMapView를 만듭니다.
Swift
let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView
Objective-C
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
longitude:-122.336471
zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;
자체 지도 ID를 사용하는 경우 언제든지 Cloud 콘솔에서 지도 ID를 설정하여 새 스타일을 적용할 수 있으며, 이 스타일은 약 6시간 이내에 나와 사용자의 지도 뷰에 자동으로 반영됩니다.
변경사항을 즉시 확인하려면 앱을 종료하고 최근에 사용한 앱 목록에서 앱을 강제 종료한 후 다시 열어 앱을 닫고 다시 시작할 수 있습니다. 그러면 업데이트된 지도가 표시됩니다.
자바스크립트
애플리케이션 코드에서 지도 ID로 지도를 만들려면 다음 단계를 따르세요.
이미 삽입된 JSON 코드로 지도를 맞춤설정하고 있다면
MapOptions객체에서styles속성을 삭제합니다. 그렇지 않은 경우에는 이 단계를 건너뜁니다.mapId속성을 사용하여 지도에 지도 ID를 추가합니다. 예를 들면 다음과 같습니다.
map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' });
Maps Static
웹 서비스 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=MAP_ID&signature=YOUR_SIGNATURE" />