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

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

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

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

  1. जब तक मार्कर पर फ़ोकस न आ जाए, तब तक Tab कुंजी दबाएं.
  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') as google.maps.MapElement;

 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 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', (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

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await 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', (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 एट्रिब्यूट सेट होने पर, टेक्स्ट स्क्रीन रीडर को दिखता है. साथ ही, मार्कर पर माउस घुमाने पर यह दिखेगा.