Cloud ベースのマップのスタイル設定を使用する

Google Cloud Console でマップ ID と地図のスタイルを使用していつでも地図を作成、カスタマイズ、公開、管理できます。以下にその手順について説明します。

Google Cloud プロジェクトでマップ ID または地図のスタイルを作成、管理するには、プロジェクト所有者またはプロジェクト編集者の IAM の役割が必要です。

アプリケーションコードでの Cloud ベースのマップのスタイル設定の使用

アプリケーションコードで Cloud ベースのマップのスタイル設定を使用して地図を作成するには:

埋め込み JSON コードを使用して地図をカスタマイズしている場合は、MapOptions オブジェクトから styles プロパティを削除します。それ以外の場合は、このステップをスキップします。
mapId プロパティを使用して、Cloud ベースのマップのスタイル設定を地図に追加します。次がそのサンプルです。
```
map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});
```

地図のスタイルを作成する

地図のスタイルは、任意のマップ ID に関連付けることができる一連のカスタマイズに対する一意の識別子です。

新しいスタイルは以下の手順で作成します。

Cloud Console で、[地図のスタイル] ページに移動します。
[新しい地図スタイルを作成] をクリックして [新しい地図のスタイル] ページを開きます。
[新しい地図のスタイル] ページで、次のいずれかのオプションを選択します。
1. 使用可能なスタイルバリエーションから [地図のスタイル] を選択します。
2. [JSON スタイル設定コード] をインポートします。[JSON のインポート] タブのテキストボックスに JSON コードを貼り付けてください。
3. カスタマイズされた地図のスタイルを選択して、特定の業種（旅行、物流、不動産、小売など）の目標を強調します。
[スタイルエディタでカスタマイズ] をクリックして、地図対象物に追加するカスタマイズを指定します。詳しくは、スタイルエディタの使用をご覧ください。
地図のスタイルに名前を付け、変更を保存するには、[保存] を選択します。

スタイルの詳細を更新する

[地図のスタイル] ページで地図のスタイルを選択して、次の操作を行うことができます。

[スタイルのカスタマイズ] ボタンを選択して、スタイルエディタでカスタマイズを続けるか、スタイルの詳細を表示する。詳しくは、スタイルエディタの使用をご覧ください。
[編集] ボタンを選択して、スタイルの説明文の名前を変更または編集する。
[複製] ボタンを選択して、スタイルを複製する。
[削除] ボタンを選択して、スタイルを削除する。
スタイルに関連付けられたマップ ID を表示する。

2020 年 9 月 15 日より前に作成されたスタイルについては、Google マップの地形描写の拡張が適用されません。Google マップの地形描写の拡張を地図のスタイル設定に適用するには、地図のスタイルを作成する必要があります。

例

以下は、マップ ID を使用してカスタムのスタイル付き地図を読み込む基本的な例です。この場合、Maps JavaScript は地図が読み込まれるときにマップ ID 8e0a97af9386fef を参照し、現在そのマップ ID に関連付けられている地図のスタイルを自動的に適用します。

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}
index.js

サンプルを表示

function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Using a Map Id</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </head> <body> <div id="map"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

サンプルを試す

CodeSandbox.io

Stackblitz.com

GitPod.io

Google Cloud Shell