マーカー

マーカーを使用すると、ユーザーが地図上で場所を確認しやすくなります。このガイドでは、3D マップでマーカーを使用、カスタマイズする方法を説明します。マーカーの形状、サイズ、色のほか、表示する高さを調整できます。

マーカーを使用して、地図上に場所を表示します。上記の例は、カスタマイズが適用されていない基本的な単一のマーカーです。

色、スケール、アイコン画像をカスタマイズする

マーカーのデフォルトの背景色、グリフの色、輪郭線の色、サイズをカスタマイズできます。

カスタムのマーカー

マーカーのデフォルトのアイコンを、SVG 形式のカスタム リソースに差し替えます。

グラフィック付きのマーカー

マーカーの表示高度を設定する

マーカーを押し出して高さを設定することで、マーカーの高さを設定できます。

押し出したマーカー

マーカーをクリックやキーボード イベントに反応させる

click イベント リスナーを追加して、マーカーがクリックやキーボード イベントに反応するようにします。

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

マーカーが重なった場合の動作を設定する

別のマーカーや地図ラベルと表示位置が重なった場合の動作を指定できます。

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

次のステップ