वेब कॉम्पोनेंट एक लोकप्रिय W3C स्टैंडर्ड हैं. ये कस्टम और फिर से इस्तेमाल किए जा सकने वाले एचटीएमएल एलिमेंट में एचटीएमएल, सीएसएस, और JS को एन्क्रिप्ट करते हैं. फिर से इस्तेमाल किए जा सकने वाले इन कॉम्पोनेंट में कई तरह के फ़ंक्शन हो सकते हैं. जैसे, किसी जगह की स्टार रेटिंग दिखाना या कारोबार के लिहाज़ से ज़्यादा जटिल कॉम्पोनेंट. इस गाइड में, Maps JavaScript API में उपलब्ध वेब कॉम्पोनेंट के बारे में जानकारी दी गई है.
स्टैंडर्ड के बारे में ज़्यादा जानकारी के लिए, वेब कॉम्पोनेंट देखें.
दर्शक
यह दस्तावेज़ इस तरह से डिज़ाइन किया गया है कि आप वेब कॉम्पोनेंट वाले ऐप्लिकेशन को तेज़ी से एक्सप्लोर और डेवलप करना शुरू कर सकें. आपको एचटीएमएल और सीएसएस प्रोग्रामिंग के कॉन्सेप्ट की जानकारी होनी चाहिए.
मैप दिखाएं
वेब कॉम्पोनेंट के बारे में सीखना शुरू करने का सबसे आसान तरीका है, एक उदाहरण देखना. यहां दिए गए उदाहरण में सैन होज़े इलाके का मैप दिखाया गया है.
TypeScript
// This example adds a map using web components. function initMap(): void { console.log('Maps JavaScript API loaded.'); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a map using web components. function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
सीएसएस
/* * 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; } gmp-map { height: 400px; }
एचटीएमएल
<html> <head> <title>Add a Map Web Component</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" ></gmp-map> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta" defer ></script> </body> </html>
सैंपल आज़माएं
इस उदाहरण में, ध्यान देने वाली कुछ बातें बताई गई हैं:
- Maps JavaScript API को एसिंक्रोनस रूप से कहा जाता है. कॉलबैक फ़ंक्शन का इस्तेमाल यह जानने के लिए किया जाता है कि एपीआई कब लोड हुआ है.
- मैप के प्रज़ेंटेशन को
<gmp-map>
कस्टम एलिमेंट से तय किया गया है. - मैप के प्रॉपर्टी तय करने के लिए,
<gmp-map>
कस्टम एलिमेंट में एट्रिब्यूट तय किए जाते हैं. - स्टाइल, कस्टम एलिमेंट पर इनलाइन लागू की जा सकती है या उसका एलान किसी अलग सीएसएस फ़ाइल में किया जा सकता है.
बुनियादी मैप को नया स्टाइल दें
मैप आईडी, किसी मैप की खास स्टाइल या सुविधा से जुड़ा आइडेंटिफ़ायर होता है. क्लाउड कॉन्फ़िगरेशन की वैकल्पिक सुविधाओं का फ़ायदा पाने के लिए, क्लाउड-आधारित मैप स्टाइलिंग DEMO_MAP_ID
को अपने मैप आईडी से बदलें.
मैप का आईडी बनाने और पसंद के मुताबिक स्टाइल कॉन्फ़िगर करने का तरीका जानने के लिए,
क्लाउड-आधारित मैप स्टाइलिंग पर जाएं.
मैप में मार्कर जोड़ें
जैसे, कॉन्टेंट की हैरारकी बनाने के लिए, पहले से मौजूद एचटीएमएल टैग को नेस्ट किया जा सकता है, उसी तरह एक या उससे ज़्यादा मैप मार्कर दिखाने के लिए, किसी एलिमेंट में <gmp-advanced-marker>
को नेस्ट किया जा सकता है.
TypeScript
// This example adds a map with markers, using web components. function initMap(): void { console.log('Maps JavaScript API loaded.'); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a map with markers, using web components. function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
सीएसएस
/* * 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; } gmp-map { height: 400px; }
एचटीएमएल
<html> <head> <title>Add a Map with Markers using Web Components</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID"> <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta" defer ></script> </body> </html>
सैंपल आज़माएं
यहां हमने <gmp-map>
कस्टम एलिमेंट में दो <gmp-advanced-marker>
एलिमेंट जोड़े हैं. title
के टेक्स्ट से, दिए गए एलिमेंट के लिए अतिरिक्त कर्सर घुमाने पर दिखने वाला टेक्स्ट और सुलभता लेबल मिलता है.
JavaScript ईवेंट
वेब कॉम्पोनेंट का एक बड़ा फ़ायदा यह है कि इसे आसानी से इस्तेमाल किया जा सकता है. कोड की कुछ लाइनों की मदद से, JavaScript या ऐडवांस प्रोग्रामिंग की सीमित जानकारी वाले मैप को दिखाया जा सकता है. लागू होने के बाद, कोड अन्य एचटीएमएल एलिमेंट के जाने-पहचाने पैटर्न का पालन करता है. उदाहरण के लिए, मैप या मार्कर क्लिक जैसी बेहतर मार्कर कार्रवाइयों पर प्रतिक्रिया देने के लिए, नेटिव ब्राउज़र इवेंटिंग सिस्टम का इस्तेमाल किया जा सकता है.
अपने एचटीएमएल में, मार्कर को क्लिक करने लायक बनाने के लिए, gmp-advanced-marker
एलिमेंट पर gmp-clickable
एट्रिब्यूट सेट करें. क्लिक इवेंट को मैनेज करने के लिए,
advancedMarker.addEventListener
का इस्तेमाल करें.
TypeScript
// This example adds a map using web components. function initMap(): void { console.log('Maps JavaScript API loaded.'); const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker"); for (const advancedMarker of advancedMarkers) { customElements.whenDefined(advancedMarker.localName).then(async () => { advancedMarker.addEventListener('gmp-click', async () => { const infoWindow = new google.maps.InfoWindow({ //@ts-ignore content: advancedMarker.title, }); infoWindow.open({ //@ts-ignore anchor: advancedMarker }); }); }); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a map using web components. function initMap() { console.log("Maps JavaScript API loaded."); const advancedMarkers = document.querySelectorAll( "#marker-click-event-example gmp-advanced-marker", ); for (const advancedMarker of advancedMarkers) { customElements.whenDefined(advancedMarker.localName).then(async () => { advancedMarker.addEventListener("gmp-click", async () => { const infoWindow = new google.maps.InfoWindow({ //@ts-ignore content: advancedMarker.title, }); infoWindow.open({ //@ts-ignore anchor: advancedMarker, }); }); }); } } window.initMap = initMap;
सीएसएस
/* * 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; } gmp-map { height: 400px; }
एचटीएमएल
<html> <head> <title>Add a Map Web Component with Events</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map id="marker-click-event-example" center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" gmp-clickable ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" gmp-clickable ></gmp-advanced-marker> </gmp-map> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta" defer ></script> </body> </html>
सैंपल आज़माएं
इस उदाहरण में, Maps JavaScript API के पूरी तरह लोड हो जाने पर, initMap
ज़रूरी कॉलबैक फ़ंक्शन के बारे में बताता है. कोड, हर मार्कर के लिए लिसनर को सेट करता है और हर मार्कर पर क्लिक करने पर, एक जानकारी विंडो दिखाता है.
आगे क्या करना है
- Maps JavaScript API समस्या को ट्रैक करने वाले टूल में सुविधाओं का अनुरोध करें और गड़बड़ियों की रिपोर्ट करें.
- जगह की खास जानकारी जैसे हाई-लेवल वेब कॉम्पोनेंट के लिए, एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी को एक्सप्लोर करें.