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

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

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

कीबोर्ड की मदद से मार्कर को खींचने के लिए:

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

कोड देखना

TypeScript

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

async function initMap() {
    // 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.addListener('dragend', () => {
        const position = draggableMarker.position!;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void initMap();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

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

async function initMap() {
    // 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.addListener('dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void 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 एट्रिब्यूट सेट होने पर, टेक्स्ट स्क्रीन रीडर को दिखता है. साथ ही, मार्कर पर माउस घुमाने पर यह दिखेगा.