지도 ID는 Google Cloud에 저장된 Google 지도 스타일 지정 및 구성 설정을 나타내는 고유 식별자입니다. 지도 ID를 사용하여 웹사이트 및 애플리케이션에서 기능을 사용 설정하거나 지도를 관리 또는 스타일 지정할 수 있습니다. 지도 관리 페이지의 Google Cloud 콘솔 프로젝트에서 JavaScript, Android, iOS 또는 Static Maps와 같이 필요한 각 플랫폼의 지도 ID를 만들 수 있습니다.
지도 ID를 사용하는 기능 및 자세한 내용은 지도 ID 개요를 참고하세요.
필수 권한
프로젝트에서 지도 ID를 만들거나 관리하려면 프로젝트의 Cloud 콘솔 IAM 페이지에서 적절한 역할 수준 권한(편집자 또는 소유자)이 있는 보안 주체를 사용해야 합니다. 자세한 내용은 IAM 기본 및 사전 정의된 역할 참조를 확인하세요.
지도 ID 만들기
다음 단계에 따라 Cloud 콘솔에서 지도 ID를 만듭니다.
Cloud 콘솔에서 지도 관리 페이지로 이동합니다.
지도 ID 만들기 를 클릭합니다.
새 지도 ID 만들기 페이지에서 다음을 실행합니다.
- 이름에 지도 ID의 이름을 지정합니다.
- 선택사항: 설명에 지도 ID가 사용되는 용도를 설명합니다.
- 지도 유형에서 지도 ID를 사용하려는 플랫폼을 선택합니다. JavaScript를 선택하는 경우 래스터 (기본값) 또는 벡터 지도 유형도 선택합니다. 벡터 지도에 관한 자세한 내용은 벡터 지도를 참고하세요.
- 저장 을 클릭하여 새 지도 ID를 표시합니다.
지도 ID를 지도 스타일에 연결하기
클라우드 기반 지도 스타일 지정을 사용하는 경우 지도 스타일을 지도 ID와 연결합니다. 자세한 내용은 지도 ID에 스타일 연결을 참고하세요.
앱에 지도 ID 추가하기
Android
활동의 레이아웃 파일에 있는 <fragment> 요소를 통해 지도 ID를 추가합니다. MapView 클래스를 사용하거나 프로그래매틱 방식으로 GoogleMapOptions 클래스를 사용합니다.
예를 들어 res/values/strings.xml에 map_id라는 문자열 값으로 저장된 지도 ID를 만들었다고 가정해보겠습니다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>
활동의 레이아웃 파일에 있는 <fragment> 요소를 통해 추가된 지도의 경우,
맞춤 스타일이 있어야 하는 모든 지도 프래그먼트에서
지도 ID를 map:mapId 속성에 지정해야 합니다.
<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:map="http://schemas.android.com/apk/res-auto"
....
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가 있는 모든 지도에 적용됩니다.
Android 3D
프로그래매틱 방식으로 또는 레이아웃 속성을 사용하여 mapId 문자열 속성을 Map3DOptions에 설정합니다. Map3DOptions 는 인스턴스화 중에 Map3DView 객체에 제공되며 Map3DView가 생성된 후에는 변경할 수 없습니다.
개발자는 필요에 따라 새 OnMapIdErrorListener를 구현하여 잘못되었거나 찾을 수 없는 지도 ID에 관한 알림을 받고 이에 대응할 수 있습니다.
프로그래매틱 방식으로 지도를 만들고 OnMapIdErrorListener를 설정하여 지도 ID를 추가합니다.
import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DOptions
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
import com.google.android.gms.maps3d.model.Map3DMode
class MainActivity : Activity(), OnMap3DViewReadyCallback, OnMapIdError {
fun onCreate(...) {
val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
val map3DView = Map3DView(context, map3DOptions)
map3DView.getMap3dViewAsync(this)
}
override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
googleMap3D.setMapIdErrorListener(
object : OnMapIdErrorListener {
override fun onMapIdError() {
// Handle error event.
}
}
)
}
}
레이아웃 속성을 사용하여 지도 ID를 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map3d="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent">
<com.google.android.gms.maps3d.Map3DView
android:id="@+id/map3dView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
map3d:mode="hybrid"
map3d:mapId="MAP_ID"/>
</LinearLayout>
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시간 이내에 사용자와 사용자의 지도 뷰에 자동으로 반영됩니다.
변경사항을 즉시 확인하려면 앱을 종료하고 최근 사용한 앱 목록에서 앱을 강제 종료한 후 앱을 다시 열어 앱을 닫고 다시 시작하면 됩니다. 그러면 업데이트된 지도가 표시됩니다.
iOS 3D
iOS 개발자는 Map에 새 style 수정자를 설정할 수 있습니다. 이 수정자는 지도 ID와 선택적으로 지도 ID가 잘못되었거나 찾을 수 없을 때 호출할 클로저를 허용합니다.
import SwiftUI
import GoogleMaps3D
struct ContentView: View {
init () {
Map.apiKey = "YOUR_API_KEY"
}
var body: some View {
Map(initialCamera: .init(
latitude: 0.0,
longitude: 0.0,
),
mode: .hybrid
)
.style(
with: "MAP_ID",
error: {
// Handle styling error.
}
)
// Could also use trailing closure syntax
// .style(with: "MAP_ID") {
// // Handle styling error.
// }
}
}
JavaScript
애플리케이션 코드에서 지도 ID로 지도를 만들려면 다음 단계를 따르세요.
이미 삽입된 JSON 코드로 지도를 맞춤설정하고 있다면 객체에서
styles속성을 삭제합니다.MapOptions그렇지 않으면 이 단계를 건너끕니다.mapId속성을 사용하여 지도에 지도 ID를 추가합니다. 예를 들면 다음과 같습니다.
map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' });
JavaScript 3D
애플리케이션에서 지도 ID로 지도를 만들려면 mapId 속성을 사용하여 지도에 지도 ID를 추가합니다. 예를 들면 다음과 같습니다.
async function init() { const { Map3DElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200, }, tilt: 67.5, heading: 108.94057782079429, range: 6605.57279990986, mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs. mode: 'HYBRID', }); document.body.append(map); } void init();
Maps Static
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=MAP_ID&signature=YOUR_SIGNATURE" />