マップ ID は、Google Cloud に保存されている Google マップのスタイル設定と構成設定を表す一意の識別子です。マップ ID を使用して、ウェブサイトやアプリケーションで機能を有効にしたり、地図を管理したり、スタイルを設定したりします。Google Cloud コンソールのプロジェクトの [マップ管理] ページで、JavaScript、Android、iOS、静的マップなど、必要なプラットフォームごとにマップ ID を作成できます。
マップ ID を使用する機能について詳しくは、マップ ID の概要をご覧ください。
必要な権限
プロジェクトでマップ ID を作成または管理するには、プロジェクトの Cloud コンソールの IAM ページで、適切なロールレベルの権限（編集者または所有者）を持つプリンシパルを使用する必要があります。詳細については、IAM の基本ロールと事前定義ロールのリファレンスをご覧ください。
マップ ID を作成する
Cloud コンソールで次の手順に沿ってマップ ID を作成します。
必要な権限で Cloud コンソール プロジェクトにログインして開きます。
Cloud コンソールで、[マップ管理] ページに移動します。
[マップ ID を作成] をクリックします。
[新しいマップ ID を作成] ページで、次の操作を行います。
- [名前] に、マップ ID の名前を入力します。
- 省略可: [説明] に、マップ ID の用途を説明します。
- [地図の種類] で、マップ ID を使用する予定のプラットフォームを選択します。JavaScript を選択した場合は、[ラスター]（デフォルト）または [ベクター] の地図の種類も選択します。ベクトルマップの詳細については、ベクトルマップをご覧ください。
- [保存] をクリックして、新しいマップ ID を表示します。
マップ ID を地図のスタイルに関連付ける
Cloud ベースのマップのスタイル設定を使用している場合は、地図のスタイルをマップ ID に関連付けます。詳しくは、スタイルをマップ ID に関連付けるをご覧ください。
マップ ID をアプリに追加する
Android
アクティビティのレイアウト ファイルの <fragment> 要素を使ってマップ ID を追加するには、MapView クラスを使用するか、プログラムで GoogleMapOptions クラスを使用します。
たとえば、map_id という名前の文字列値として res/values/strings.xml に保存されているマップ ID を作成したとします。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>
アクティビティのレイアウト ファイルで <fragment> 要素を使って追加した地図の場合、カスタム スタイルを持つすべての地図フラグメントで、map:mapId 属性にマップ ID を指定する必要があります。
<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 を追加して、プログラムで地図を作成します。
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 {
fun onCreate(...) {
val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
val map3DView = Map3DView(context, map3DOptions)
map3DView.getMap3dViewAsync(this)
}
}
レイアウト属性を使用してマップ 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 コードを使用して地図をカスタマイズしている場合は、
MapOptionsオブジェクトからstylesプロパティを削除します。それ以外の場合は、この手順は省略してください。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
ウェブサービス 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" />