マーカーの基本的なカスタマイズ

3D マーカーは、2 つのクラスによってマーカーを定義します。基本パラメータ（position、label、map）を提供する 3DMarkerElement クラスと、さらなるカスタマイズ用のオプションを含む PinElement クラスです。

地図にマーカーを追加するには、まず、3DMarkerElement クラスと PinElement クラスを提供するマーカー ライブラリを読み込む必要があります。

次のスニペットは、新しい PinElement を作成してマーカーに適用するコードを示しています。

const pinScaled = new PinElement({
  scale: 1.5,
});

const markerWithLabel = new Marker3DElement({
  position: { lat: 37.419, lng: -122.03 },
  label: 'Simple label'
});

HTML を使って作成される地図では、マーカーの基本パラメータが gmp-marker-3d HTML 要素を使って宣言されるため、PinElement クラスを使うカスタマイズはすべてプログラマティックに適用する必要があります。これを行うには、コードで HTML ページから gmp-marker-3d 要素を取得する必要があります。次のスニペットは、gmp-marker-3d 要素のコレクションをクエリし、その結果に対して反復処理をして、gmp-marker-3d で宣言されたカスタマイズを適用するためのコードを示しています。

// Return an array of markers.
const markers = [...document.querySelectorAll('gmp-marker-3d')];

// Loop through the markers
for (let i = 0; i < markers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  markers[i].appendChild(pin.element);
}

このページでは、マーカーを次のようにカスタマイズする方法を解説します。

マーカーのスケールを調整する

マーカーのスケールを調整するには、scale オプションを使用します。

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(pinScaled);

背景色を変更する

マーカーの背景色を変更するには、PinElement.background オプションを使用します。

// Change the background color.
const pinBackground = new PinElement({
  background: '#FBBC04',
});
const markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

輪郭線の色を変更する

マーカーの輪郭線の色を変更するには、PinElement.borderColor オプションを使用します。

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerBorder = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
});

markerBorder.appendChild(pinBorder);

グリフの色を変更する

マーカーのグリフの色を変更するには、PinElement.glyphColor オプションを使用します。

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerGlyph = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
});

markerGlyph.appendChild(pinGlyph);

グリフにテキストを追加する

デフォルトのグリフをテキスト文字に置き換えるには、PinElement.glyph オプションを使用します。PinElement のテキストグリフは PinElement に対応し、そのデフォルトの色は PinElement のデフォルトの glyphColor と同じになります。

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
});

markerGlyphText.appendChild(pinTextGlyph);

高度を変更する

Marker3DElement.position.altitude オプションを Marker3DElement.altitudeMode と Marker3DElement.extruded と組み合わせて使用すると、マーカーの高さを変更し、地面とマーカーの間に押し出し線を追加できます。

const marker = new Marker3DElement({
  position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
  altitudeMode: 'RELATIVE_TO_GROUND',
  extruded: true,
});

マーカーを削除する

Marker3DElement.remove() を使用して、地図からマーカーを削除します。

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

次のステップ