Ułatwianie klikania i dostępu do znaczników

Możesz zwiększyć dostępność znaczników, włączając obsługę zdarzeń kliknięcia, dodając tekst opisowy dla czytników ekranu i dostosowując skalę znacznika.

  • Gdy znacznik jest klikalny (lub przeciągalny), może reagować na dane wejściowe z klawiatury i sygnał myszy.
  • Tekst określony w opcji title jest odczytywany przez czytniki ekranu i wyświetla się, gdy użytkownik przytrzyma wskaźnik myszy nad znacznikiem.
  • Zwiększenie rozmiaru znaczników zmniejsza precyzję wymaganą do interakcji z nimi na wszystkich urządzeniach, zwłaszcza na urządzeniach z ekranem dotykowym, i poprawia dostępność. Domyślne znaczniki spełniają minimalny standard rozmiaru WCAG AA ale w przypadku deweloperów, którzy chcą spełnić standard rozmiaru docelowego WCAG AAA należy zwiększyć rozmiar znacznika.

Więcej informacji o zmianie skali znacznika, dodawaniu tekstu tytułu i innych czynnościach znajdziesz w artykule Podstawowe dostosowywanie znacznika.

Poniższy przykład przedstawia mapę z 5 klikalnymi znacznikami, na których można się skupić, które zawierają tekst tytułu i zostały ustawione na skalę 1,5x:

Poruszanie się po znacznikach za pomocą klawiatury:

  1. Użyj klawisza Tab, aby skupić się na pierwszym znaczniku. Jeśli na tej samej mapie jest kilka znaczników, użyj klawiszy strzałek, aby przełączać się między nimi.
  2. Jeśli znacznik jest klikalny, naciśnij klawisz Enter, aby „kliknąć”. Jeśli znacznik ma okno informacyjne, możesz je otworzyć, klikając lub naciskając klawisz Enter albo spację. Gdy okno informacyjne zostanie zamknięte, fokus wróci do powiązanego znacznika.
  3. Naciśnij ponownie klawisz Tab, aby przejść do pozostałych elementów sterujących mapy.

Ustawianie znacznika jako klikalnego

W tej sekcji dowiesz się, jak sprawić, aby znaczniki reagowały na zdarzenia kliknięcia. Aby ustawić znacznik jako klikalny:

  • Ustaw właściwość gmpClickable na true.

TypeScript

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);

JavaScript

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);

  • Dodaj detektor zdarzeń gmp-click, aby reagować na dane wejściowe użytkownika.

TypeScript

// Add a click listener for each marker, and set up the info window.
marker.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});

JavaScript

// Add a click listener for each marker, and set up the info window.
marker.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});

  • Aby ponownie ustawić znacznik jako nieklikalny:

    • Wywołaj removeEventListener, aby usunąć detektor zdarzeń gmp-click:
    // Remove the listener.
marker.removeEventListener('gmp-click', clickListener);
    • Możesz też ustawić właściwość gmpClickable na false.

Aby jeszcze bardziej zwiększyć dostępność:

  • Ustaw tekst opisowy znacznika za pomocą opcji AdvancedMarkerElement.title.
  • Zwiększ skalę znacznika za pomocą właściwości scale elementu PinElement.

Pełny przykładowy kod

Zobacz pełny przykładowy kod źródłowy

TypeScript

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

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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 InfoWindow();

    // Create the markers.
    tourStops.forEach(({ position, title }, i) => {
        const pin = new PinElement({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();

JavaScript

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

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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 InfoWindow();

    // Create the markers.
    tourStops.forEach(({ position, title }, i) => {
        const pin = new PinElement({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();

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;
}

HTML

<html>
    <head>
        <title>Advanced Marker Accessibility</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>

        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="34.84555,-111.8035"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>