マップ ID を作成する方法

プラットフォームを選択: Android iOS JavaScript ウェブサービス

マップ ID は、Google Cloud に保存されている Google マップのスタイル設定と構成設定を表す一意の識別子です。マップ ID を使用すると、ウェブサイトやアプリケーションで地図の機能を有効にしたり、地図を管理したり、地図のスタイルを設定したりできます。必要なプラットフォーム(JavaScript、Android、iOS、Static Maps)ごとにマップ ID を作成するには、Google Cloud コンソールのプロジェクトの [マップ管理] ページに移動します。

マップ ID を使用する機能について詳しくは、 マップ ID の概要をご覧ください。

必要な権限

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

マップ ID を作成する

Cloud コンソールでマップ ID を作成する手順は次のとおりです。

  1. 必要な権限 を持つアカウントでログインし、Cloud コンソールのプロジェクトを開きます。

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

  3. [マップ ID を作成] をクリックします。

    新しいマップ ID を作成

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

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

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

Cloud ベースのマップのスタイル設定を使用している場合は、地図のスタイルをマップ ID に関連付けます。詳しくは、スタイルをマップ ID に関連付けるをご覧ください。

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

Android

アクティビティのレイアウト ファイルの <fragment> 要素を使ってマップ ID を追加するには、MapView クラスを使用するか、プログラムで using the 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> 要素を使って追加した地図の場合、 カスタム スタイルを持つすべての地図フラグメントで、 map 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 クラスを使って MapFragment インスタンスに渡します。

Java

 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 Studio で、通常どおりにアプリをビルドして実行します。最初の手順で設定したカスタム スタイルは、指定したマップ ID を持つすべての地図に適用されます。

iOS

マップ ID を使用して地図をインスタンス化する手順は次のとおりです。

  1. Cloud コンソールのマップ ID 文字列を使用して GMSMapID を作成します。
  2. 作成したマップ 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 時間以内に自動的に地図ビューに反映されます。

変更をすぐに確認したい場合は、アプリを終了し、最近使用したアプリ一覧からアプリを強制終了してから、もう一度アプリを開いて再起動します。更新された地図が表示されます。

JavaScript

アプリケーション コードでマップ ID を使用して地図を作成する手順は次のとおりです。

  1. 埋め込み JSON コードを使用して地図をカスタマイズしている場合は、 お使いの styles プロパティMapOptions オブジェクトから削除します。それ以外の場合は、この手順は省略してください。

  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=MAP_ID&signature=YOUR_SIGNATURE" />

ニューヨーク州ニューヨーク市のブルックリン橋を中心とした地図。右下に地図のコントロールが表示されている。道路、水域、陸地でカスタム スタイルが適用された地図。