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

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