मार्कर को खींचकर छोड़ने की सुविधा चालू करना

खींचने और छोड़ने की सुविधा चालू होने पर, उपयोगकर्ता माउस या ऐरो बटन का इस्तेमाल करके, मैप पर मार्कर को खींचकर छोड़ सकते हैं. मार्कर को खींचने और छोड़ने लायक बनाने के लिए, AdvancedMarkerElement.gmpDraggable प्रॉपर्टी को true पर सेट करें.

यहां दिए गए उदाहरण में, खींचने और छोड़ने लायक मार्कर दिखाया गया है. मार्कर को खींचने और छोड़ने के बाद, उसकी अपडेट की गई जगह दिखती है. इसके लिए, gmp-dragend इवेंट ट्रिगर होता है:

कीबोर्ड का इस्तेमाल करके मार्कर को खींचने और छोड़ने के लिए:

  1. जब तक मार्कर फ़ोकस में न आ जाएं, तब तक Tab बटन दबाएं.
  2. अपनी पसंद के मार्कर पर जाने के लिए, ऐरो बटन का इस्तेमाल करें.
  3. खींचने और छोड़ने की सुविधा चालू करने के लिए, Mac पर Option + Space या Option + Enter और Windows पर Alt + Space या Alt + Enter दबाएं.
  4. मार्कर को एक जगह से दूसरी जगह ले जाने के लिए, ऐरो बटन का इस्तेमाल करें.
  5. मार्कर को नई जगह पर छोड़ने के लिए, Space या Enter दबाएं. इससे, खींचकर छोड़ने की सुविधा भी बंद हो जाएगी.
  6. खींचकर छोड़ने की सुविधा को बंद करने और मार्कर को उसकी पिछली पोज़िशन पर वापस लाने के लिए, Esc दबाएं.

कोड देखें

TypeScript

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

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

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position as google.maps.LatLngAltitude;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();

JavaScript

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

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

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();

जानकारी देने वाला टेक्स्ट सेट करना

किसी मार्कर के लिए जानकारी देने वाला ऐसा टेक्स्ट सेट करने के लिए जिसे स्क्रीन रीडर पढ़ सकें, AdvancedMarkerElement.title एट्रिब्यूट का इस्तेमाल करें. इसके बारे में यहां बताया गया है:

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

title एट्रिब्यूट सेट होने पर, टेक्स्ट स्क्रीन रीडर को दिखता है. साथ ही, मार्कर पर माउस घुमाने पर यह टेक्स्ट दिखेगा.