マーカーを使用すると、ユーザーが地図上で場所を確認しやすくなります。このガイドでは、3D マップでマーカーを使用、カスタマイズする方法を説明します。マーカーの形状、サイズ、色のほか、表示する高さを調整できます。次の例に基本的なマーカーを示します。
Maps JavaScript の 3D Maps には、それぞれ特定の用途に最適化された 2 つの異なるマーカークラスが用意されています。次の表に、使用可能な 2 つのクラスの違いとトレードオフを示します。
| 能力 | MarkerElement |
Marker3DElement |
|---|---|---|
| カスタマイズ | 高（カスタム HTML 要素、コア アニメーション API などをサポート） | 低（カスタマイズ性は低くなります） |
| パフォーマンス | インタラクションのパフォーマンスが低い（マーカーの数が多いと FPS が低下する） | インタラクションのパフォーマンスが高い（大規模なデータセットのレンダリングに最適化されている） |
| 推奨容量 | 約 1,000 個のマーカーまで安定したインタラクション パフォーマンス | 1,000 個を超えるマーカーの処理に推奨 |
色、スケール、アイコン画像をカスタマイズする
マーカーのデフォルトの背景色、グリフの色、輪郭線の色、サイズをカスタマイズできます。
マーカーのデフォルトのアイコンを、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
});
マーカーのパフォーマンス
カスタム HTML マーカー（MarkerElement）は、
標準の 3D マーカー（Marker3DElement）よりもパフォーマンスが低くなります。1,000
個を超えるマーカーを使用するアプリケーションでは、最適なパフォーマンスを確保するために Marker3dElement
クラス を使用することを強くおすすめします。