マーカー

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

Maps JavaScript の 3D マップには、それぞれ特定の用途に最適化された 2 つの異なるマーカークラスが用意されています。次の表に、使用可能な 2 つのクラスの違いとトレードオフを示します。

能力 MarkerElement Marker3DElement
カスタマイズ 高（カスタム HTML 要素、コア アニメーション API などをサポート） 低（カスタマイズ性は低くなります）
パフォーマンス インタラクションのパフォーマンスが低い（マーカーの数が多いと FPS が低下する） インタラクションのパフォーマンスが高い（大規模なデータセットのレンダリングに最適化されている）
推奨容量 約 1,000 個のマーカーまで安定したインタラクション パフォーマンス 1,000 個を超えるマーカーの処理に推奨

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

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

カスタムのマーカー

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

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

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

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

押し出したマーカー

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

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

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

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

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

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

マーカーのパフォーマンス

カスタム HTML マーカー（MarkerElement）は、 標準の 3D マーカー（Marker3DElement）よりもパフォーマンスが低くなります。1,000 個を超えるマーカーを使用するアプリケーションでは、最適なパフォーマンスを確保するために Marker3dElement クラス を使用することを強くおすすめします。

次のステップ