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

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

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

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

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

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 markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

背景色を変更する

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

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

輪郭線の色を変更する

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

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

グリフの色を変更する

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

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

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

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

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);

高度を変更する

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

// Change a marker's altitude and add an extrusion.
const extrudedMarker = 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();

次のステップ