マーカー

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

Maps JavaScript の 3D Maps には、特定の用途に最適化された 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 クラスを使用することを強くおすすめします。

次のステップ