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

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

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