मार्कर को क्लिक करने और ऐक्सेस करने लायक बनाएं

जब कोई मार्कर क्लिक करने लायक या खींचकर छोड़ने लायक होता है, तो वह कीबोर्ड और माउस इनपुट का जवाब दे सकता है. मार्कर के बीच जाने और मार्कर को खींचकर छोड़ने लायक बनाने के लिए, माउस या कीबोर्ड का इस्तेमाल करें. title विकल्प में दिया गया टेक्स्ट, स्क्रीन रीडर की मदद से पढ़ा जा सकता है.

• किसी मार्कर को क्लिक करने की सुविधा देने के लिए, एक क्लिक इवेंट हैंडलर जोड़ें.
• मार्कर को खींचने लायक बनाने के लिए, AdvancedMarkerElement.gmpDraggable प्रॉपर्टी को true पर सेट करें.
• किसी मार्कर के लिए ज़्यादा जानकारी देने वाला टेक्स्ट सेट करने के लिए, AdvancedMarkerElement.title विकल्प का इस्तेमाल करें.

मार्कर को क्लिक करने लायक बनाएं

नीचे दिए गए उदाहरण में पांच क्लिक करने लायक, फ़ोकस करने लायक मार्कर वाला मैप दिखाया गया है:

कीबोर्ड का इस्तेमाल करके मार्कर पर जाने के लिए:

1. पहले मार्कर पर फ़ोकस करने के लिए Tab का इस्तेमाल करें. अगर एक ही मैप पर कई मार्कर हैं, तो मार्कर से जाने के लिए ऐरो बटन का इस्तेमाल करें.
2. अगर मार्कर क्लिक करने लायक है, तो "क्लिक" करने के लिए enter बटन दबाएं. अगर मार्कर पर कोई जानकारी विंडो है, तो उसे क्लिक करके या Enter बटन या स्पेस बार दबाकर उसे खोला जा सकता है. जानकारी विंडो बंद होने पर, फ़ोकस उससे जुड़े मार्कर पर वापस आ जाएगा.
3. बाकी मैप कंट्रोल से आगे बढ़ने के लिए, टैब को दोबारा दबाएं.

कोड देखें

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // Set LatLng and title text for the markers. The first marker (Boynton Pass)
    // receives the initial focus when tab is pressed. Use arrow keys to
    // move between markers; press tab again to cycle through the map controls.
    const tourStops = [
        {
            position: { lat: 34.8791806, lng: -111.8265049 }, 
            title: "Boynton Pass"
        },
        {
            position: { lat: 34.8559195, lng: -111.7988186 }, 
            title: "Airport Mesa"
        },
        {
            position: { lat: 34.832149, lng: -111.7695277 }, 
            title: "Chapel of the Holy Cross"
        },
        {
            position: { lat: 34.823736, lng: -111.8001857 }, 
            title: "Red Rock Crossing"
        },
        {
            position: { lat: 34.800326, lng: -111.7665047 }, 
            title: "Bell Rock"
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pin = new PinElement({
            glyph: `${i + 1}`,
        });

        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker"
  );
  const map = new Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapId: "4504f8b37365c3d0",
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    {
      position: { lat: 34.8791806, lng: -111.8265049 },
      title: "Boynton Pass",
    },
    {
      position: { lat: 34.8559195, lng: -111.7988186 },
      title: "Airport Mesa",
    },
    {
      position: { lat: 34.832149, lng: -111.7695277 },
      title: "Chapel of the Holy Cross",
    },
    {
      position: { lat: 34.823736, lng: -111.8001857 },
      title: "Red Rock Crossing",
    },
    {
      position: { lat: 34.800326, lng: -111.7665047 },
      title: "Bell Rock",
    },
  ];
  // Create an info window to share between markers.
  const infoWindow = new InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pin = new PinElement({
      glyph: `${i + 1}`,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;

      infoWindow.close();
      infoWindow.setContent(marker.title);
      infoWindow.open(marker.map, marker);
    });
  });
}

initMap();
index.js

किसी मार्कर को फिर से क्लिक न करने लायक बनाने के लिए, क्लिक इवेंट लिसनर को हटाएं:

// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});

// Removing the listener.
google.maps.event.removeListener(clickListener);

मार्कर को खींचने लायक बनाएं

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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