Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

マップ ID を作成する方法

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

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

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

必要な権限

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

マップ ID を作成する

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

必要な権限を持つアカウントでログインし、Cloud コンソールのプロジェクトを開きます。
Cloud コンソールで、 [マップ管理] ページに移動します。
[マップ ID を作成] をクリックします。
[新しいマップ 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 を持つすべての地図に適用されます。

Android 3D

mapId 文字列プロパティを Map3DOptions に設定するには、プログラムを使用するか、レイアウト属性を使用します。Map3DOptions はインスタンス化時に Map3DView オブジェクトに提供され、Map3DView の構築後に変更することはできません。

デベロッパーは、無効なマップ ID または見つからないマップ ID を通知して対応するために、必要に応じて新しい OnMapIdErrorListener を実装できます。

マップ ID を追加し、プログラムで地図を作成して、OnMapIdErrorListener を設定します。

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();index.js

Maps Static

ウェブサービス API のいずれかを使用する新しい地図または既存の地図にマップ ID を追加するには、map_id URL パラメータを追加して、マップ ID に設定します。次の例では、Maps Static API を使用して地図にマップ ID を追加しています。

<img src="/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=%3Cspan%20data-devsite-credential-type="api_key" class="replaceable-credential">YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />

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

マップ ID を追加する前に Maps Static URL にデジタル署名がある場合は、マップ ID を追加した後で新しいデジタル署名を作成して追加する必要があります。新しい URL 署名シークレットを生成するときは、URL から以前のデジタル署名を削除してください。