संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
मार्कर को ज़्यादा सुलभ बनाया जा सकता है. इसके लिए, क्लिक इवेंट हैंडलिंग की सुविधा चालू करें, स्क्रीन रीडर के लिए जानकारी देने वाला टेक्स्ट जोड़ें, और मार्कर के स्केल में बदलाव करें.
जब मार्कर पर क्लिक किया जा सकता है, तब वह कीबोर्ड और माउस के इनपुट का जवाब दे सकता है.
टाइटल विकल्प में दिया गया टेक्स्ट, स्क्रीन रीडर पढ़ सकते हैं. साथ ही, जब कोई व्यक्ति माउस पॉइंटर को मार्कर पर ले जाता है, तब यह टेक्स्ट दिखता है.
मार्कर का साइज़ बढ़ाने से, सभी डिवाइसों — खासकर टचस्क्रीन डिवाइसों — पर मार्कर के साथ इंटरैक्ट करने के लिए, सटीक तरीके से टैप करने की ज़रूरत कम हो जाती है. साथ ही, इससे सुलभता बेहतर होती है. डिफ़ॉल्ट मार्कर, WCAG AA के तय किए गए कम से कम साइज़
स्टैंडर्ड के मुताबिक होते हैं. हालांकि, अगर डेवलपर को WCAG AAA के तय किए गए टारगेट साइज़
स्टैंडर्ड का पालन करना है, तो मार्कर का साइज़ बढ़ाना होगा.
यहां दिए गए उदाहरण में, क्लिक किए जा सकने वाले और फ़ोकस किए जा सकने वाले पांच मार्कर वाला मैप दिखाया गया है. इनमें टाइटल टेक्स्ट शामिल है और इन्हें 1.5x स्केल पर सेट किया गया है:
JavaScript
asyncfunctioninitMap(){const{Map3DElement,Marker3DInteractiveElement,PopoverElement}=awaitgoogle.maps.importLibrary("maps3d");const{PinElement}=awaitgoogle.maps.importLibrary("marker");constmap=newMap3DElement({center:{lat:34.8405,lng:-111.7909,altitude:1322.70},range:13279.50,tilt:67.44,heading:0.01,mode:'SATELLITE'});// 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.consttourStops=[{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",},];tourStops.forEach(({position,title},i)=>{constpin=newPinElement({glyph:`${i+1}`,scale:1.5,glyphColor:"#FFFFFF"});constpopover=newPopoverElement();constcontent=`${i+1}. ${title}`;constheader=document.createElement('span');// Include the label for screen readers.header.ariaLabel=`This is marker ${i+1}. ${title}`;header.slot='header';popover.append(header);popover.append(content);constinteractiveMarker=newMarker3DInteractiveElement({// Include a title, used for accessibility text for use by screen readers.title,position,gmpPopoverTargetElement:popover});interactiveMarker.append(pin);map.append(interactiveMarker);map.append(popover);});document.body.append(map);}initMap();
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */html,map{height:100%;}body{height:100%;margin:0;padding:0;}
पहले मार्कर पर फ़ोकस करने के लिए, Tab कुंजी का इस्तेमाल करें. अगर एक ही मैप पर कई मार्कर हैं, तो मार्कर के बीच साइकल करने के लिए, ऐरो कुंजियों का इस्तेमाल करें.
अगर मार्कर पर क्लिक किया जा सकता है, तो "क्लिक" करने के लिए, Enter कुंजी दबाएं. अगर किसी मार्कर में जानकारी वाली विंडो है, तो उस पर क्लिक करके या Enter कुंजी या स्पेस बार दबाकर उसे खोला जा सकता है. जानकारी वाली विंडो बंद होने पर, फ़ोकस उससे जुड़े मार्कर पर वापस चला जाएगा.
मैप के बाकी कंट्रोल पर जाने के लिए, टैब को फिर से दबाएं.
सुलभता को बेहतर बनाने के लिए:
Marker3DInteractiveElement.title
विकल्प का इस्तेमाल करके, मार्कर के लिए जानकारी देने वाला टेक्स्ट सेट करें.
PopoverElement के header स्लॉट में कॉन्टेंट जोड़ें.
PinElement.scale प्रॉपर्टी का इस्तेमाल करके, मार्कर का साइज़ बढ़ाएं.
[null,null,["आखिरी बार 2025-08-26 (UTC) को अपडेट किया गया."],[],[],null,["\u003cbr /\u003e\n\n| This product or feature is in Preview (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by the [Google\n| Maps Platform Service Specific Terms](https://cloud.google.com/maps-platform/terms/maps-service-terms). For more information, see the [launch stage\n| descriptions](/maps/launch-stages).\n\n\u003cbr /\u003e\n\nYou can make markers more accessible by enabling click event handling, adding\ndescriptive text for screen readers, and adjusting the marker scale.\n\n- When a marker is clickable, it can respond to keyboard and mouse input.\n- Text specified in the title option is readable by screen readers, and will display when a user holds the mouse pointer over the marker.\n- Increasing the size of markers reduces the precision required to interact with it across all devices --- especially touchscreen devices --- and improves accessibility. Default markers meet the [WCAG AA minimum\n size](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) standard but for developers aiming to comply with the [WCAG AAA\n target](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) size standard the marker size should be increased.\n\nSee [basic marker\ncustomization](/maps/documentation/javascript/3d/marker-customization) to learn\nhow to change marker scale, add title text, and more.\n\nThe following example shows a map with five clickable, focusable markers that\ninclude title text, and have been set to 1.5x scale:\n\n\nJavaScript \n\n```javascript\nasync function initMap() {\n const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = await google.maps.importLibrary(\"maps3d\");\n const { PinElement } = await google.maps.importLibrary(\"marker\");\n const map = new Map3DElement({\n center: { lat: 34.8405, lng: -111.7909, altitude: 1322.70 }, range: 13279.50, tilt: 67.44, heading: 0.01,\n mode: 'SATELLITE'\n });\n // Set LatLng and title text for the markers. The first marker (Boynton Pass)\n // receives the initial focus when tab is pressed. Use arrow keys to move\n // between markers; press tab again to cycle through the map controls.\n const tourStops = [\n {\n position: { lat: 34.8791806, lng: -111.8265049 },\n title: \"Boynton Pass\",\n },\n {\n position: { lat: 34.8559195, lng: -111.7988186 },\n title: \"Airport Mesa\",\n },\n {\n position: { lat: 34.832149, lng: -111.7695277 },\n title: \"Chapel of the Holy Cross\",\n },\n {\n position: { lat: 34.823736, lng: -111.8001857 },\n title: \"Red Rock Crossing\",\n },\n {\n position: { lat: 34.800326, lng: -111.7665047 },\n title: \"Bell Rock\",\n },\n ];\n tourStops.forEach(({ position, title }, i) =\u003e {\n const pin = new PinElement({\n glyph: `${i + 1}`,\n scale: 1.5,\n glyphColor: \"#FFFFFF\"\n });\n const popover = new PopoverElement();\n const content = `${i + 1}. ${title}`;\n const header = document.createElement('span');\n // Include the label for screen readers.\n header.ariaLabel = `This is marker ${i + 1}. ${title}`;\n header.slot = 'header';\n popover.append(header);\n popover.append(content);\n const interactiveMarker = new Marker3DInteractiveElement({\n // Include a title, used for accessibility text for use by screen readers.\n title,\n position,\n gmpPopoverTargetElement: popover\n });\n interactiveMarker.append(pin);\n map.append(interactiveMarker);\n map.append(popover);\n });\n document.body.append(map);\n}\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/5f4e6decfaf59cd69918bbf4e6338de03a63a5ba/dist/samples/3d-accessibility-features/docs/index.js#L9-L67\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \n\n```css\n/* * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\nhtml,\nmap {\n height: 100%;\n}\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}https://github.com/googlemaps-samples/js-api-samples/blob/5f4e6decfaf59cd69918bbf4e6338de03a63a5ba/dist/samples/3d-accessibility-features/docs/style.css#L7-L18\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eMap\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- prettier-ignore --\u003e\n \u003cscript\u003e(g=\u003e{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=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+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=()=\u003eh=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)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})\n ({key: \"AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8\", v: \"beta\",});\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps-samples/js-api-samples/blob/5f4e6decfaf59cd69918bbf4e6338de03a63a5ba/dist/samples/3d-accessibility-features/docs/index.html#L8-L22\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/3d-accessibility-features/jsfiddle)\n\n\u003cbr /\u003e\n\nTo navigate markers using the keyboard:\n\n1. Use the tab key to focus on the first marker; if there are multiple markers on the same map, use the arrow keys to cycle through the markers.\n2. If the marker is clickable, press the enter key to \"click\". If a marker has an info window, you can open it by clicking, or by pressing the enter key or space bar. When the info window closes, focus will return to the associated marker.\n3. Press tab again to continue moving through the rest of the map controls.\n\nTo enhance accessibility:\n\n- Set descriptive text for a marker using `Marker3DInteractiveElement.title` option.\n- Add content to the `header` slot of `PopoverElement`.\n- Increase marker scale using the `PinElement.scale` property."]]
