मार्कर को क्लिक किया जा सकने वाला और ऐक्सेस किया जा सकने वाला बनाना

क्लिक इवेंट मैनेजमेंट की सुविधा चालू करके, स्क्रीन रीडर के लिए जानकारी देने वाला टेक्स्ट जोड़कर, और मार्कर के स्केल में बदलाव करके, मार्कर को ज़्यादा ऐक्सेस किया जा सकता है.

• जब मार्कर पर क्लिक किया जा सकता है (या खींचा और छोड़ा जा सकता है), तो वह कीबोर्ड और माउस इनपुट का जवाब दे सकता है.
• title विकल्प में दिया गया टेक्स्ट, स्क्रीन रीडर पढ़ सकते हैं. यह टेक्स्ट तब दिखेगा, जब उपयोगकर्ता मार्कर पर माउस पॉइंटर को रखेगा.
• मार्कर का साइज़ बढ़ाने पर, सभी डिवाइसों पर, खास तौर पर टचस्क्रीन डिवाइसों पर, उससे इंटरैक्ट करने के लिए ज़्यादा सटीक होने की ज़रूरत नहीं पड़ती. साथ ही, मार्कर को ऐक्सेस करना भी आसान हो जाता है. डिफ़ॉल्ट मार्कर, WCAG AA के लिए तय किए गए कम से कम साइज़ स्टैंडर्ड के मुताबिक होते हैं. हालांकि, WCAG AAA के लिए तय किए गए टारगेट साइज़ स्टैंडर्ड का पालन करने के लिए, डेवलपर को मार्कर का साइज़ बढ़ाना होगा.

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

इस उदाहरण में, क्लिक किए जा सकने वाले और फ़ोकस किए जा सकने वाले पांच मार्कर वाला एक मैप दिखाया गया है. इन मार्कर में टाइटल टेक्स्ट शामिल है और इन्हें 1.5x स्केल पर सेट किया गया है:

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

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

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

इस सेक्शन में, मार्कर को क्लिक इवेंट के हिसाब से काम करने का तरीका बताया गया है. मार्कर को क्लिक करने लायक बनाने के लिए:

• gmpClickable प्रॉपर्टी को true पर सेट करें.

TypeScript

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

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

JavaScript

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

• उपयोगकर्ता के इनपुट का जवाब देने के लिए, क्लिक इवेंट लिसनर जोड़ें.

TypeScript

// 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);
});
index.ts

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

JavaScript

// 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);
});
index.js

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

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

सुलभता को और बेहतर बनाने के लिए:

• AdvancedMarkerElement.title विकल्प का इस्तेमाल करके, मार्कर के लिए जानकारी देने वाला टेक्स्ट सेट करें.
• PinElement की scale प्रॉपर्टी का इस्तेमाल करके, मार्कर का स्केल बढ़ाएं.

पूरा कोड का उदाहरण

उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखना

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}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
            gmpClickable: true,
        });
        // 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}`,
      scale: 1.5,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
      gmpClickable: true,
    });

    // 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

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

सीएसएस

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Advanced Marker Accessibility</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell