マップ ID を使用する

マップ ID は、Google マップの 1 つのインスタンスを表す一意の識別子です。マップ ID を使用すると、ウェブサイトやアプリで機能を有効にしたり、地図を管理またはスタイル設定したりできます。必要なプラットフォーム（JavaScript、Android、iOS、静的マップ）ごとにマップ ID を作成するには、Google Cloud コンソールのプロジェクトの [マップ管理] ページを使用します。

地図 ID でできること

マップ ID を使用して、対象物とスタイル設定を有効にします。地図 ID の使用例をいくつか示します。一覧については、マップ ID を使用する機能をご覧ください。

• クラウドベースの地図のスタイル設定: マップ ID を地図のスタイルに関連付けて、Google Cloud コンソールを使用して地図のスタイル設定、カスタマイズ、管理を行います。すべてのプラットフォーム（JavaScript、Android、iOS、Maps Static API）で利用できます。

• ベクターマップ: マップ ID を使用して、WebGL を使用してクライアントサイドの読み込み時に描画されるベクターベースのタイルで構成された地図を使用します。JavaScript で使用可能。

• 高度なマーカー: マップ ID を使用して高度なマーカーを有効にします。JavaScript、Android、iOS でご利用いただけます。

Cloud ベースのマップのスタイル設定の例

Cloud ベースのマップのスタイル設定を使用してウェブサイトと Android アプリの地図のスタイルを設定する手順は次のとおりです。

1. 使用するプラットフォームごとにマップ ID を作成します。たとえば、JavaScript マップ ID と Android マップ ID を作成します。詳しくは、マップ ID を作成するをご覧ください。

2. Google Cloud コンソールで地図のスタイルを構成します。詳しくは、Cloud ベースのマップのスタイル設定をご覧ください。

3. Google Cloud コンソールで、両方のマップ ID を地図のスタイルに関連付けます。詳しくは、マップ ID をスタイルに関連付けるをご覧ください。

4. ウェブサイトの JavaScript と Android アプリのコードでマップ ID を参照します。詳しくは、マップ ID をアプリに追加するをご覧ください。

マップ ID に関連付けられた地図のスタイルがウェブサイトと Android アプリに表示されます。地図のスタイルは Cloud コンソールで更新できます。変更は両方の場所に自動的に反映されるため、ユーザーがアプリを更新する必要はありません。

マップ ID を使用する機能

次の表に、地図 ID を使用する Google Maps Platform の機能と API を示します。

¹ Maps SDK for Android または Maps SDK for iOS でマップ ID を使用すると、マップが読み込まれて Dynamic Maps SKU に対する課金が発生します。

マップ ID を作成して使用する方法

マップ ID は、Google マップの 1 つのインスタンスを表す一意の識別子です。マップ ID の作成と、マップ ID に関連付けられた地図のスタイルの更新は、Cloud コンソールで行います。

必要な権限

プロジェクトでマップ ID を作成または管理するには、プロジェクトの Cloud コンソール IAM ページで、適切なロールレベルの権限（編集者または所有者）を持つプリンシパルを使用する必要があります。詳細については、IAM の基本ロールと事前定義ロールのリファレンスをご覧ください。

マップ ID を作成する

マップ ID の作成と、マップ ID に関連付けられたスタイルの更新は、Cloud コンソールでいつでも行えます。

マップ ID を作成する手順は次のとおりです。

1. 必要な権限を使用して Cloud コンソールにログインし、Cloud コンソール プロジェクトを開きます。

2. Cloud コンソールで、[マップ管理] ページに移動します。

3. [マップ ID を作成] を選択します。

   

4. [新しいマップ ID を作成] ページで、次の操作を行います。

   1. [名前] にマップ ID の名前を入力します。
   2. 省略可: [説明] に、地図 ID の用途を説明します。
   3. [地図の種類] で、マップ ID を使用するプラットフォームを選択します。JavaScript を選択した場合は、[ラスター]（デフォルト）または [ベクター] の地図タイプも選択します。ベクターマップについて詳しくは、ベクターマップをご覧ください。
   4. [保存] を選択して、新しいマップ ID を表示します。

マップ ID を地図スタイルに関連付ける

以下の手順は、プロジェクトに既存の地図のスタイルが少なくとも 1 つあることを前提としています。地図のスタイルがない場合は、Cloud ベースのマップのスタイル設定でプラットフォームを選択し、作成方法をご覧ください。

1. Cloud コンソールで、[マップ管理] ページに移動します。
2. 表から既存のマップ ID を選択します。
3. [関連付けられている地図のスタイル] で、地図のスタイルを選択します。

4. [保存] を選択します。

   

マップ ID をアプリに追加する

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

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

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

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;

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_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" />