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

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