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

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