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

'खींचें और छोड़ें' सुविधा चालू होने पर, उपयोगकर्ता माउस या ऐरो बटन का इस्तेमाल करके, मैप पर मार्कर खींच सकते हैं और छोड़ सकते हैं. मार्कर को खींचकर छोड़ने लायक बनाने के लिए, 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

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();

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();

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

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

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

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