Как сделать маркеры перетаскиваемыми

Перетаскиваемый маркер можно перемещать по карте с помощью мыши или клавиш со стрелками. Чтобы сделать маркер перетаскиваемым, установите для свойства AdvancedMarkerElement.gmpDraggable значение true.

Ниже показана карта, на которой настроен перетаскиваемый маркер. Он устанавливается в новой точке, когда перетаскивание завершается (при активации события gmp-dragend).

Как перетаскивать маркеры с помощью клавиатуры

1. Чтобы выбрать маркеры, нажимайте клавишу Tab.
2. Перейдите к нужному маркеру с помощью клавиш со стрелками.
3. Чтобы начать перетаскивание, нажмите Option + Пробел или Option + Ввод (Mac), Alt + Пробел или Alt + Ввод (Windows).
4. Переместите маркер с помощью клавиш со стрелками.
5. Чтобы установить маркер в новой точке, нажмите Пробел или Ввод. При этом функция перетаскивания отключится.
6. Если вы хотите отключить функцию перетаскивания и вернуть маркер в исходное положение, нажмите Esc.

Посмотреть код

TypeScript

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

async function init() {
    // 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.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position as google.maps.LatLngAltitude;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();
index.ts

Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.

JavaScript

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

async function init() {
    // 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.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();
index.js

Как добавить описательный текст

Чтобы добавить для маркера описательный текст, доступный для программ чтения с экрана, используйте свойство AdvancedMarkerElement.title, как показано ниже.

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

Если свойство title задано, текст будет распознаваться программой чтения с экрана и отображаться при наведении указателя мыши на маркер.