お知らせ: Google Maps Platform に間もなく新しい基本地図のスタイルが導入されます。このアップデートにより、デフォルトのカラーパレットが新しくなるほか、ピンが最新化され、地図のエクスペリエンスとユーザビリティが改善されます。すべての地図のスタイルは、2025 年 3 月に自動的に更新されます。ご利用の詳細およびいち早く使用する方法については、Google Maps Platform の新しい地図のスタイルをご覧ください。

データセットを地図に追加する

データセット内の対象物を選択的にスタイル設定する場合、FeatureStyleFunction でロジックを定義します。この関数は、定義したロジックをもとに FeatureStyleOptions を返します。スタイル設定のロジックが不要な場合は、FeatureStyleOptions を使って直接スタイルを設定してかまいません。このページでは、データセットを地図に追加し、スタイル設定を適用する方法を説明します。

前提条件

先へ進む前に、マップ ID、地図スタイル、データセット ID を用意しましょう。

データセット ID を地図スタイルと関連付ける

作成しておいたデータセットを使用する地図スタイルと関連付けましょう。手順は次のとおりです。

Google Cloud コンソールで、[データセット] ページに移動します。
目的のデータセットの名前をクリックします。[データセットの詳細] ページが表示されます。
[プレビュー] タブをクリックします。
[地図のスタイルを追加します] までスクロールして、クリックします。
関連付ける地図スタイル（複数可）のチェックボックスをオンにして、[保存] をクリックします。

単純なスタイル規則を使用する

対象物をスタイル設定する最も簡単な方法は、FeatureStyleOptions を渡して各スタイル属性（色、不透明度、線の太さなど）を定義することです。対象物の各種スタイルオプションは、データセット地図レイヤに直接適用するか、FeatureStyleFunction と組み合わせて使用します。

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};index.ts

JavaScript

const styleOptions = {
  strokeColor: "green",
  strokeWeight: 2,
  strokeOpacity: 1,
  fillColor: "green",
  fillOpacity: 0.3,
};
index.js

宣言型のスタイル規則を使用する

FeatureStyleFunction を使えば、スタイル規則を宣言によって設定し、データセット全体に適用できます。データセットの属性値に応じて、対象物に FeatureStyleOptions を適用します。一部の対象物を不可視のままにする場合などは、対象物スタイル関数（FeatureStyleFunction）で null を返すことも可能です。この例では、各ポイントにデータ属性に応じた色を付けるスタイル関数を示しています。

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}index.ts

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
  // Get the dataset feature, so we can work with all of its attributes.
  const datasetFeature = params.feature;
  // Get all of the needed dataset attributes.
  const furColors =
    datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];

  // Apply styles. Fill is primary fur color, stroke is secondary fur color.
  switch (furColors) {
    case "Black+":
      return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 };
      break;
    case "Cinnamon+":
      return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 };
      break;
    case "Cinnamon+Gray":
      return /* FeatureStyleOptions */ {
        fillColor: "#8b0000",
        strokeColor: "gray",
        pointRadius: 6,
      };
      break;
    case "Cinnamon+White":
      return /* FeatureStyleOptions */ {
        fillColor: "#8b0000",
        strokeColor: "white",
        pointRadius: 6,
      };
      break;
    case "Gray+":
      return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 };
      break;
    case "Gray+Cinnamon":
      return /* FeatureStyleOptions */ {
        fillColor: "gray",
        strokeColor: "#8b0000",
        pointRadius: 6,
      };
      break;
    case "Gray+Cinnamon, White":
      return /* FeatureStyleOptions */ {
        fillColor: "silver",
        strokeColor: "#8b0000",
        pointRadius: 6,
      };
      break;
    case "Gray+White":
      return /* FeatureStyleOptions */ {
        fillColor: "gray",
        strokeColor: "white",
        pointRadius: 6,
      };
      break;
    default: // Color not defined.
      return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 };
      break;
  }
}
index.js

データセット地図レイヤにスタイルを適用する

対象物スタイル関数（FeatureStyleFunction）内でスタイルを適用する手順は次のとおりです。

map.getDatasetFeatureLayer() を呼び出してデータセット ID を渡し、データセット地図レイヤを取得します。
データセットのレイヤに、対象物のスタイルオプション（例: styleOptions）または関数（例: setStyle）を設定することで、スタイルを適用します。

TypeScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;index.ts

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

レイヤからスタイル設定を削除する

レイヤからスタイル設定を削除するには、次のように style を null に設定します。

featureLayer.style = null;

一部の対象物を不可視のままにする場合などは、対象物スタイル関数（FeatureStyleFunction）で null を返すことも可能です。

帰属情報テキストを追加する

アップロードしたデータセットを Google マップ上で表示する際は、必要な帰属情報も地図上に表示してください。帰属情報テキストは、Google のロゴを隠したり干渉したりしないように表示する必要があります。

帰属情報テキストを追加する方法としては、カスタムコントロールによって任意の HTML を地図上の標準的な位置に表示することが考えられます。次のコード例は、こういったカスタムコントロールをプログラマティックに作成する関数を示したものです。

TypeScript

function createAttribution(map) {
    const attributionLabel = document.createElement('div');
    // Define CSS styles.
    attributionLabel.style.backgroundColor = '#fff';
    attributionLabel.style.opacity = '0.7';
    attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
    attributionLabel.style.fontSize = '10px';
    attributionLabel.style.padding = '2px';
    attributionLabel.style.margin = '2px';
    attributionLabel.textContent = 'Data source: NYC Open Data';
    return attributionLabel;
}index.ts

JavaScript

function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}
index.js

定義したコントロールは、初期化時に地図に追加しましょう。コードは次のようになります。

TypeScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);index.ts

JavaScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);

attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);index.js