마커를 클릭하거나 드래그할 수 있으면 마커를 사용하여 키보드 및 마우스 입력에 응답할 수 있습니다. 마우스 또는 키보드를 사용하여 마커 간에 이동하고 마커를 드래그할 수 있는 경우 마커를 이동할 수 있습니다. 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;
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;
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; }
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>
샘플 사용해 보기
마커를 다시 클릭할 수 없도록 설정하려면 클릭 이벤트 리스너를 삭제하세요.
// 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 키를 누릅니다.
코드 보기
TypeScript
function initMap() { const map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: {lat: 37.39094933041195, lng: -122.02503913145092}, zoom: 14, mapId: '4504f8b37365c3d0', }); const infoWindow = new google.maps.InfoWindow(); const draggableMarker = new google.maps.marker.AdvancedMarkerView({ map, position: {lat: 37.39094933041195, lng: -122.02503913145092}, draggable: 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); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 37.39094933041195, lng: -122.02503913145092 }, zoom: 14, mapId: "4504f8b37365c3d0", }); const infoWindow = new google.maps.InfoWindow(); const draggableMarker = new google.maps.marker.AdvancedMarkerView({ map, position: { lat: 37.39094933041195, lng: -122.02503913145092 }, draggable: 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); }); } window.initMap = initMap;
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; }
HTML
<html> <head> <title>Draggable Advanced Marker</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>
샘플 사용해 보기
설명 텍스트 설정
마커에 스크린 리더로 읽을 수 있는 설명 텍스트를 설정하려면 아래와 같이 AdvancedMarkerView.title
속성을 사용하세요.
const markerView = new google.maps.marker.AdvancedMarkerView({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
title: "Some descriptive text.",
});
title
속성이 설정되면 텍스트가 스크린 리더에 표시되고 마우스가 마커 위에 마우스를 가져가면 텍스트가 표시됩니다.