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

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

На следующем примере карты показан перетаскиваемый маркер, который отображает свое обновленное положение после завершения перетаскивания (срабатывает событие dragend ):

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

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

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

Машинопись 

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

    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', (event) => {
        const position = draggableMarker.position as google.maps.LatLng;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${position.lat}, ${position.lng}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

initMap();
index.ts

JavaScript 

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await 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', (event) => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}
initMap();
index.js

Установить описательный текст

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

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

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