סמנים שניתן לגרור

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