マーカー

マーカーを使用すると、ユーザーが地図上で場所を確認しやすくなります。このガイドでは、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 クラスの使用が強く推奨されます。

次のステップ