LocalContextMapView のスタイルを設定する

このセクションでは、地図にカスタムのスタイルを適用し、地図上のマーカーのアイコンの外観をカスタマイズすることで、オリジナルの LocalContextMapView 地図を作成する方法について説明します。

地図にカスタムのスタイルを適用する

カスタムのスタイルを適用することで、LocalContextMapView 地図の外観をカスタマイズできます。ただし、LocalContextMapView には、標準の Map とは異なるデフォルトのスタイルがあります。

LocalContextMapView のデフォルトのスタイルをカスタムのスタイルで完全にオーバーライドするには（styles でカスタムのスタイルの配列を保持するには）:

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

カスタムのスタイル（styles）を LocalContextMapView のデフォルトのスタイルの上にビルドするには:

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.ts

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.js

マーカーのアイコンをカスタマイズする

マーカーのアイコンの外観は、ピンの色、グリフの色、縮尺（サイズ）をカスタマイズすることで設定できます。これは、LocalContextMapView を初期化するときに行います。これらの値は、静的オブジェクト（アイコンのスタイルが状態によって変化しない）、または動的関数（アイコンがハイライト表示または選択されたときにアイコンのスタイルが変化）に設定できます。

  • カスタムのスタイルは、デフォルトのスタイルの上位に統合されます。
  • RGB、16 進数、HSL、カラー キーワードなど、すべての CSS の色構文がサポートされています。
  • 縮尺は数値で指定し、縮尺 1 の 2 倍の場合は縮尺 2 のようになります。デフォルトで、ピンには状態ごとに異なる縮尺値があります。縮尺は絶対値であるため、値を渡すと、ピンサイズがデフォルト値に対して相対的に変化するのではなく、デフォルトの値がオーバーライドされます。たとえば、すべての状態に対して縮尺を 1 に設定すると、状態に関係なくピンのサイズは同じになります。

マーカーのアイコンの色と縮尺を静的に設定する

マーカーのアイコンとグリフのデフォルトの色と縮尺を設定できます。これを行うには、glyphColor と background に色の値を指定し、pinOptionsSetup に scale の数値を指定します。次のサンプルでは、アイコンを黒、グリフを白に設定し、縮尺を 2 に増やしています。

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

マーカーのアイコンの色と縮尺を動的に設定する

マーカーの状態（デフォルト、ハイライト表示、選択）ごとにアイコンとグリフのデフォルトの色を設定するには、条件ステートメントを使用して各状態に希望する値を設定します。ユーザーがマーカーにカーソルを合わせると、isHighlighted が true になります。ユーザーがマーカーをクリックすると、isSelected が true になります。場所の詳細ビューを閉じると、マーカーのアイコンがデフォルトのスタイルに戻ります。次のサンプルは、状態に応じてマーカーのアイコンのスタイルを変更する方法を示しています。

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

ローカル コンテキスト（ベータ版）で Cloud ベースのマップのスタイル設定を使用する

Cloud ベースのマップのスタイル設定をローカル コンテキスト（ベータ版）と併用するには:

  1. mapId を設定した Map を作成し、LocalContextMapView に渡します。
  2. 汎用スポットのラベルとアイコンをオフにします。
  3. 内部 Map オプションでいくつかの要素をオフにします。この手順は省略可能です。

mapId を設定した Map を作成し、LocalContextMapView に渡す

Cloud ベースのマップのスタイル設定 ID を使用して地図を追加するには、map 要素（ID とすべての内部 Map オプションを含む）を定義し、それを使用して LocalContextMapView を初期化します。次にサンプルを示します。

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

汎用スポットのラベルとアイコンをオフにする

汎用スポットのラベルとアイコンをオフにする手順は次のとおりです。

  1. Google Cloud Console にアクセスし、[地図のスタイル] を選択して [地図のスタイル] 画面を開きます。
  2. [スポット] のスタイル設定で、[ラベル] と [アイコン] の [公開設定] を [オフ] に設定します。
  3. [スポット] のスタイル設定で、[公園ラベル] の [公開設定] を [オン] に設定します。

内部 Map オプションを設定する（省略可）

以下に示すように、すでに設定した他の内部 Map オプションに加えて、次の内部 Map オプションを設定することもできます。

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});