マーカーをドラッグできるようにする

ドラッグ可能に設定したマーカーは、マウスまたは矢印キーで地図内を移動させることができます。マーカーをドラッグ可能にするには、AdvancedMarkerElement.gmpDraggable プロパティを true に設定します。

次の例では、ドラッグ可能なマーカーが地図内に表示されており、ドラッグして動かした先の（dragend イベントが発生した時点の）座標が表示されるようになっています。

キーボードでマーカーをドラッグする方法:

  1. マーカーにフォーカスが移るまで Tab キーを押します。
  2. 矢印キーで目的のマーカーにフォーカスを移します。
  3. ドラッグ操作モードを開始するには、Mac の場合は Option + Space または Option + Enter、Windows の場合は Alt + Space または Alt + Enter を押します。
  4. 矢印キーでマーカーをドラッグすることができます。
  5. マーカーを新しい位置にドロップするには、Space または Enter を押します。この時点でドラッグ操作モードも終了します。
  6. マーカーを元の位置に戻してドラッグ操作モードを終了するには、Esc キーを押します。

コードの確認

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function initMap() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addListener('dragend', () => {
        const position = draggableMarker.position!;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void initMap();

JavaScript

const mapElement = document.querySelector('gmp-map');

async function initMap() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addListener('dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void initMap();

説明テキストを指定する

スクリーン リーダーが読み上げ可能な説明テキストをマーカーに設定するには、AdvancedMarkerElement.title 属性を使用します。コードは次のようになります。

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

title 属性が設定されていると、そのテキストはスクリーン リーダーの読み取り対象となり、マーカーにマウスカーソルを合わせた際にも表示されます。