मार्कर को ड्रैग करने योग्य बनाएं

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

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