마커를 드래그할 수 있도록 설정

드래그 가능하도록 사용 설정하면 사용자가 지도에서 마우스 또는 화살표 키를 사용하여 마커를 드래그할 수 있습니다. 마커를 드래그 가능하도록 설정하려면 AdvancedMarkerElement.gmpDraggable 속성을 true로 설정합니다.

다음 지도 예에서는 드래그가 완료되면(dragend 이벤트가 실행되면) 업데이트된 위치를 표시하는 드래그 가능한 마커를 보여줍니다.

키보드로 마커를 드래그하려면 다음 단계를 따르세요.

  1. 마커가 포커스될 때까지 Tab 키를 누릅니다.
  2. 화살표 키를 사용하여 원하는 마커로 이동합니다.
  3. 드래그를 활성화하려면 Option + 스페이스 바 또는 Option + Enter(Mac), Alt + 스페이스 바 또는 Alt + Enter(Windows)를 누릅니다.
  4. 화살표 키를 사용하여 마커를 이동합니다.
  5. 마커를 새 위치에 놓으려면 스페이스 바 또는 Enter 키를 누릅니다. 이렇게 하면 드래그 기능도 사용 중지됩니다.
  6. 드래그 기능을 사용 중지하고 마커를 이전 위치로 되돌리려면 Esc 키를 누릅니다.

코드 보기

TypeScript

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 map = new Map(document.getElementById('map') as HTMLElement, {
        center: {lat: 37.39094933041195, lng: -122.02503913145092},
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        map,
        position: {lat: 37.39094933041195, lng: -122.02503913145092},
        gmpDraggable: true,
        title: "This marker is draggable.",
    });
    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

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.39094933041195, lng: -122.02503913145092 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const infoWindow = new InfoWindow();
  const draggableMarker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.39094933041195, lng: -122.02503913145092 },
    gmpDraggable: true,
    title: "This marker is draggable.",
  });

  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 속성이 설정되면 텍스트가 스크린 리더에 표시되고 마커 위에 마우스를 가져가면 텍스트가 표시됩니다.