הסימונים יהיו נגישים ונגישים

כשסמן ניתן ללחיצה או לגרירה, הוא יכול להגיב לקלט של מקלדת ועכבר. ניתן להשתמש בעכבר או במקלדת כדי לעבור בין סמנים, וכדי להזיז סמן אם ניתן לגרור אותו. הטקסט שצוין באפשרות title קריא על ידי קוראי מסך.

• כדי להפוך את הסמן לניתן ללחיצה, צריך להגדיר את המאפיין AdvancedMarkerElement.gmpClickable ל-true ולהוסיף handler של אירועים מסוג קליק.
• כדי לסמן סמן שאפשר לגרור, מגדירים את המאפיין AdvancedMarkerElement.gmpDraggable ל-true.
• כדי להגדיר טקסט תיאורי לסמן, משתמשים באפשרות AdvancedMarkerElement.title.

הגדרת הסמן כקליקבילי

בדוגמה הבאה מוצגת מפה עם חמישה סמנים שניתנים למיקוד ושניתן ללחוץ עליהם:

כדי לנווט בין הסמנים באמצעות המקלדת:

1. השתמשו במקש Tab כדי להתמקד בסמן הראשון. אם יש כמה סמנים באותה המפה, תוכלו להשתמש במקשי החיצים כדי לעבור בין הסמנים.
2. אם הסמן קליקבילי, מקישים על מקש Enter כדי "ללחוץ". אם לסמן יש חלון מידע, ניתן לפתוח אותו על ידי לחיצה, או על ידי הקשה על מקש Enter או על מקש הרווח. כשחלון המידע ייסגר, המיקוד יחזור לסמן המשויך.
3. מקישים שוב על Tab כדי להמשיך לנווט בשאר הפקדים במפה.

להצגת הקוד

TypeScript

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

    const map = new 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 InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pin = new PinElement({
            glyph: `${i + 1}`,
        });

        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.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);
        });
    });
}

initMap();
index.ts

הערה: מומלץ לקרוא את המדריך בנושא השימוש ב-TypeScript ובמפות Google.

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new 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 InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pin = new PinElement({
      glyph: `${i + 1}`,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.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);
    });
  });
}

initMap();
index.js

כדי לבטל שוב את אפשרות הלחיצה על סמן, מסירים את ה-listener של אירועי קליק:

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

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

הפיכת סמן לניתן לגרירה

כשאפשרות הגרירה מופעלת, משתמשים יכולים לגרור סמנים במפה באמצעות העכבר או מקשי החיצים. כדי לסמן סמן שאפשר לגרור, מגדירים את המאפיין 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

הערה: מומלץ לקרוא את המדריך בנושא השימוש ב-TypeScript ובמפות Google.

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 מוגדר, הטקסט גלוי לקוראי מסך ומופיע כשמעבירים את העכבר מעל הסמן.

הגדרת קנה המידה של הסמנים

הגדלת הסמנים מפחיתה את רמת הדיוק הנדרשת לביצוע אינטראקציה בכל המכשירים, במיוחד עם מסך מגע, ומשפרת את הנגישות. סמני ברירת המחדל עומדים בתקן גודל מינימלי של WCAG AA, אבל עבור מפתחים שרוצים לעמוד בסטנדרט גודל היעד של WCAG AAA, יש להגדיל את גודל הסמן. במאמר התאמה אישית בסיסית של סמנים מוסבר איך להשתמש ב-PinElement ולשנות את קנה המידה של הסמן כדי להגדיל אותו.

דוגמה ליצירת סמן גדול יותר באמצעות PinElement מוגדל:

    const pinScaled = new PinElement({
        scale: 2,
    });
    const markerScaled = new AdvancedMarkerElement({
        map,
        position: { lat: 37.419, lng: -122.02 },
        content: pinScaled.element,
    });