「高度なマーカー」機能では、パフォーマンスに優れたマーカーの作成とカスタマイズが可能です。デフォルト マーカーの背景の色、輪郭線の色、グリフの色をカスタマイズするほか、マーカーのサイズを調整したり、マーカーのデフォルト アイコンをカスタム画像に差し替えたりすることができます。DOM クリック イベントやキーボード入力に反応するマーカーを作成できる点も特長です。高度なマーカーはカスタム HTML および CSS を使ったさらなるカスタマイズに対応しており、完全なカスタム マーカーの作成も可能です。3D アプリケーションでマーカーを表示する高度も制御できます。高度なマーカーはラスター地図とベクター地図の両方に対応しています(マップ ID が必要です)。
色、スケール、アイコン画像をカスタマイズする
デフォルト マーカーの背景の色、グリフの色、輪郭線の色をカスタマイズするほか、マーカーのサイズを調整することができます。
デフォルトのマーカー アイコンを、SVG または PNG 形式のカスタム画像に差し替えることも可能です。
カスタム HTML マーカーを作成する
カスタム HTML および CSS を使って、視覚的に特徴のあるマーカーや、アニメーション表示するマーカーを作成できます。
マーカーをクリックやキーボード イベントに反応させる
click
イベント リスナーを追加すれば、マーカーをクリックやキーボード イベントに反応させることができます。
function initMap() { const map = new google.maps.Map(document.getElementById('map'), { center: {lat: 37.4239163, lng: -122.0947209}, zoom: 17, mapId: 'DEMO_MAP_ID', }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: {lat: 37.4239163, lng: -122.0947209}, }); marker.addListener('click', ({domEvent, latLng}) => { const {target} = domEvent; // Handle the click event. // ... }); }
マーカーの表示高度と衝突時動作を設定する
3D 地図要素に合わせて正しく表示されるよう、マーカーの表示高度を設定できます。また、別のマーカーや地図ラベルと表示位置が重なった場合の動作を指定可能です。マーカーの表示高度の指定は、ベクター地図専用の機能です。