איך אפשר לגרור סמנים

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