마커를 클릭 가능하도록 설정하고 마커에 접근성 기능 추가

마커를 클릭하거나 드래그할 수 있으면 마커를 사용하여 키보드 및 마우스 입력에 응답할 수 있습니다. 마우스 또는 키보드를 사용하여 마커 간에 이동하고 마커를 드래그할 수 있는 경우 마커를 이동할 수 있습니다. title 옵션에 지정된 텍스트는 스크린 리더에 표시됩니다.

마커를 클릭 가능하도록 설정하려면 클릭 이벤트 핸들러를 추가합니다.
마커를 드래그 가능하도록 설정하려면 AdvancedMarkerView.draggable 속성을 true로 설정합니다.
마커의 설명 텍스트를 설정하려면 AdvancedMarkerView.title 옵션을 사용합니다.

마커를 클릭 가능하도록 설정

다음 예는 클릭 가능하고 포커스 가능한 마커가 5개 있는 지도를 보여줍니다.

키보드를 사용하여 마커를 탐색하려면 다음 단계를 따르세요.

Tab 키를 사용해 첫 번째 마커에 포커스를 맞춥니다. 동일한 지도에 마커가 여러 개 있는 경우 화살표 키를 사용하여 마커 간에 이동하세요.
마커를 클릭할 수 있는 경우 '클릭'하려면 Enter 키를 누릅니다. 마커에 정보 창이 있는 경우 클릭하거나 Enter 키 또는 스페이스바를 눌러 정보 창을 열 수 있습니다. 정보 창이 닫히면 포커스가 연결된 마커로 돌아갑니다.
나머지 지도 컨트롤로 계속 이동하려면 Tab을 다시 누르세요.

코드 보기

TypeScript

function initMap() {
    const map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // Set LatLng and title text for the markers. The first marker (Boynton Pass)
    // receives the initial focus when tab is pressed. Use arrow keys to
    // move between markers; press tab again to cycle through the map controls.
    const tourStops = [
        {
            position: { lat: 34.8791806, lng: -111.8265049 },
            title: "Boynton Pass"
        },
        {
            position: { lat: 34.8559195, lng: -111.7988186 },
            title: "Airport Mesa"
        },
        {
            position: { lat: 34.832149, lng: -111.7695277 },
            title: "Chapel of the Holy Cross"
        },
        {
            position: { lat: 34.823736, lng: -111.8001857 },
            title: "Red Rock Crossing"
        },
        {
            position: { lat: 34.800326, lng: -111.7665047 },
            title: "Bell Rock"
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new google.maps.InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pinView = new google.maps.marker.PinView({
            glyph: `${i + 1}`,
        });

        const marker = new google.maps.marker.AdvancedMarkerView({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pinView.element,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

declare global {
    interface Window {
        initMap: () => void;
    }
}

window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapId: "4504f8b37365c3d0",
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    {
      position: { lat: 34.8791806, lng: -111.8265049 },
      title: "Boynton Pass",
    },
    {
      position: { lat: 34.8559195, lng: -111.7988186 },
      title: "Airport Mesa",
    },
    {
      position: { lat: 34.832149, lng: -111.7695277 },
      title: "Chapel of the Holy Cross",
    },
    {
      position: { lat: 34.823736, lng: -111.8001857 },
      title: "Red Rock Crossing",
    },
    {
      position: { lat: 34.800326, lng: -111.7665047 },
      title: "Bell Rock",
    },
  ];
  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pinView = new google.maps.marker.PinView({
      glyph: `${i + 1}`,
    });
    const marker = new google.maps.marker.AdvancedMarkerView({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pinView.element,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;

      infoWindow.close();
      infoWindow.setContent(marker.title);
      infoWindow.open(marker.map, marker);
    });
  });
}

window.initMap = initMap;index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

[class$=api-load-alpha-banner] {
  display: none;
}
style.css

HTML

<html>
  <head>
    <title>Advanced Marker Accessibility</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>index.html

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

마커를 다시 클릭할 수 없도록 설정하려면 클릭 이벤트 리스너를 삭제하세요.

// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});

// Removing the listener.
google.maps.event.removeListener(clickListener);

마커를 드래그 가능하도록 설정

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

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

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

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