컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

지도 ID 사용하기

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

지도 ID를 만들면 프로젝트와 연결되며, 단일 플랫폼 (Android, iOS, 자바스크립트) 또는 Maps Static API로 제한됩니다.

Cloud Console에서 지도 ID를 만들거나 관리하려면 프로젝트 소유자 또는 프로젝트 편집자 IAM 역할이 있어야 합니다.

필수 권한

특정 Google Cloud 프로젝트에서 지도 ID 또는 지도 스타일을 만들거나 관리하려면 프로젝트의 소유자 또는 편집자 IAM 역할을 보유해야 합니다.

지도 ID 만들기

지도 ID는 Google 지도의 단일 인스턴스를 나타내는 고유 식별자입니다. Cloud Console에서 언제든지 지도 ID를 만들고 지도 ID와 연결된 스타일을 업데이트할 수 있습니다.

지도 ID를 만들려면 다음 단계를 따르세요.

  1. Cloud Console에서 지도 관리 페이지로 이동합니다.
  2. 새 지도 ID 만들기를 선택하여 새 지도 ID 만들기 양식을 표시합니다.
    새 지도 ID 만들기

    양식에서 다음 작업을 처리합니다.

    • 지도 이름을 지정합니다.
    • 지도 유형 또는 플랫폼을 지정합니다.
    • 자바스크립트 지도의 경우 래스터 또는 벡터 지도 유형을 선택합니다.
    • 지도에 대한 설명을 입력합니다.
    • 다음을 선택하여 새 지도 ID를 표시합니다.

지도 ID를 지도 스타일에 연결하기

이 안내에서는 프로젝트에 기존 지도 스타일이 하나 이상 있다고 가정합니다.

  1. Cloud Console에서 지도 관리 페이지로 이동합니다.
  2. 이 페이지의 지도 이름 열에서 기존 지도 ID를 선택합니다.
  3. 이 양식의 하단에 있는 이 지도 ID와 연결된 지도 스타일 드롭다운에서 지도 스타일을 선택합니다.
  4. 저장을 선택합니다.
    사용자가 지도 스타일을 이 지도 ID와 연결할 수 있는 드롭다운 필드를 비롯하여 단일 지도 ID의 세부정보 페이지를 보여주는 스크린샷

앱에 지도 ID 추가

Android

MapView 클래스를 사용하거나 프로그래매틱 방식으로 GoogleMapOptions 클래스를 사용하여 활동의 레이아웃 파일에 있는 <fragment> 요소를 통해 지도 ID를 추가합니다.

예를 들어 res/values/strings.xmlmap_id라는 문자열 값으로 저장된 지도 ID를 만들었다고 가정해보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">YOUR_MAP_ID</string>
</resources>

활동의 레이아웃 파일에 있는 <fragment> 요소를 통해 추가된 지도의 경우, 맞춤 스타일이 있어야 하는 모든 지도 프래그먼트에서 지도 ID를 map:mapId 속성에 지정해야 합니다.

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    class="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를 사용하여 지도를 인스턴스화하려면 다음 단계를 따르세요.

  1. Cloud Console에서 지도 ID 문자열로 GMSMapID를 만듭니다.
  2. 방금 만든 지도 ID를 지정하는 GMSMapView를 만듭니다.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "<YOUR 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:@"<YOUR MAP ID>"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

자체 지도 ID를 사용하는 경우 언제든지 새 스타일을 갖도록 Cloud Console에서 지도 ID를 설정할 수 있으며 이 스타일은 약 6시간 이내에 사용자와 사용자에게 자동으로 지도 보기에 반영됩니다.

변경사항을 즉시 확인하려면 앱을 종료하고 최근에 사용한 앱 목록에서 앱을 강제 종료한 다음 다시 열어 앱을 닫았다가 다시 시작합니다. 업데이트된 지도가 표시됩니다.

자바스크립트

애플리케이션 코드에 지도 ID가 포함된 지도를 만들려면 다음 단계를 따르세요.

  1. 현재 삽입된 JSON 코드로 지도를 맞춤설정하고 있다면 MapOptions 객체에서 styles 속성을 삭제하세요. 그렇지 않은 경우 이 단계를 건너뛰세요.

  2. 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=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

뉴욕주 뉴욕시 브루클린 교의 중심에 있는 지도 및 오른쪽 하단에 지도 컨트롤 지도에는 도로, 물, 육지에서 맞춤 스타일이 표시됩니다.

지도 ID를 추가하기 전에 지도 정적 URL에 디지털 서명이 있다면 지도 ID를 추가한 후 새 디지털 서명을 만들고 추가해야 합니다. 새 URL 서명 비밀번호를 생성할 때 URL에서 이전 디지털 서명을 삭제해야 합니다.

지도 ID를 사용할 때 제공되는 기능

클라우드 기반 지도 스타일 지정: Google Cloud 콘솔을 사용하여 지도의 스타일을 지정하고 지도를 맞춤설정 및 관리합니다.
모든 플랫폼(Android, 자바스크립트, iOS, Maps Static API)에서 사용 가능

벡터 지도: 클라이언트 측에 WebGL을 사용하여 로드 시간에 그려지는 벡터 기반 타일로 구성된 지도입니다.
자바스크립트에서 사용 가능