Maps JavaScript API में वेब कॉम्पोनेंट (झलक)

वेब कॉम्पोनेंट एक लोकप्रिय W3C स्टैंडर्ड है. इसमें एचटीएमएल, सीएसएस, और JS को कस्टम और फिर से इस्तेमाल किए जा सकने वाले एचटीएमएल एलिमेंट में शामिल किया जाता है. फिर से इस्तेमाल किए जा सकने वाले इन कॉम्पोनेंट में कई तरह के काम हो सकते हैं. जैसे, किसी जगह के लिए स्टार रेटिंग दिखाना, कारोबार के लिहाज़ से ज़्यादा जटिल कारोबारी नियम दिखाना. इस गाइड में, Maps JavaScript API में उपलब्ध वेब कॉम्पोनेंट के बारे में बताया गया है.

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

दर्शक

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

मैप दिखाएं

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

सैन होज़े इलाके का मैप

एचटीएमएल

<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

इस उदाहरण में ध्यान रखने वाली कुछ बातें बताई गई हैं:

  1. Maps JavaScript API को एसिंक्रोनस कहा जाता है. कॉलबैक फ़ंक्शन का इस्तेमाल यह जानने के लिए किया जाता है कि एपीआई कब लोड हुआ.
  2. मैप का प्रज़ेंटेशन <gmp-map> कस्टम एलिमेंट से तय किया गया है.
  3. मैप प्रॉपर्टी, <gmp-map> कस्टम एलिमेंट में एट्रिब्यूट तय करके तय की जाती हैं.
  4. स्टाइलिंग को, कस्टम एलिमेंट पर इनलाइन लागू किया जा सकता है या किसी अलग सीएसएस फ़ाइल में उसका एलान किया जा सकता है.

बुनियादी मैप को नया स्टाइल दें

मैप आईडी एक आइडेंटिफ़ायर होता है जो किसी खास मैप की स्टाइल या सुविधा से जुड़ा होता है. क्लाउड कॉन्फ़िगरेशन की वैकल्पिक सुविधाओं का फ़ायदा पाने के लिए, क्लाउड-आधारित मैप की स्टाइल वाले DEMO_MAP_ID को अपने मैप आईडी से बदलें. मैप आईडी बनाने और पसंद के मुताबिक स्टाइल कॉन्फ़िगर करने का तरीका जानने के लिए, क्लाउड-आधारित मैप स्टाइलिंग पर जाएं.

मैप पर मार्कर जोड़ें

जटिल कॉन्टेंट हैरारकी बनाने के लिए, उसी तरह पहले से मौजूद एचटीएमएल टैग को नेस्ट किया जा सकता है जिस तरह एक या ज़्यादा मैप मार्कर दिखाने के लिए, किसी एलिमेंट के अंदर <gmp-advanced-marker> को नेस्ट किया जा सकता है.

मार्कर के साथ मैप

एचटीएमएल

<html>
  <head>
    <title>Simple Map with Markers</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </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>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

यहां हमने <gmp-map> कस्टम एलिमेंट में दो <gmp-advanced-marker> एलिमेंट जोड़े हैं. title के लिए टेक्स्ट, तय किए गए एलिमेंट के लिए एक और होवर टेक्स्ट और सुलभता लेबल देता है.

JavaScript ईवेंट

वेब कॉम्पोनेंट का एक बड़ा फ़ायदा यह है कि वे आसानी से इस्तेमाल किए जा सकते हैं. कोड की कुछ लाइनों की मदद से, JavaScript या बेहतर प्रोग्रामिंग की सीमित जानकारी वाले मैप को दिखाया जा सकता है. एक बार लागू होने के बाद, कोड दूसरे एचटीएमएल एलिमेंट के जाने-पहचाने पैटर्न का पालन करता है. उदाहरण के लिए, मैप या बेहतर मार्कर कार्रवाइयों पर प्रतिक्रिया देने के लिए, कोई भी नेटिव ब्राउज़र इवेंटिंग सिस्टम का इस्तेमाल कर सकता है, जैसे कि मार्कर क्लिक.

मार्कर क्लिक इवेंट

एचटीएमएल

<html>
<head>
  <title>Google Maps - Marker Click Example</title>
  <link rel="stylesheet" href="style.css" type="text/css">

  <script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
  </script>

  <script>
    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} = await google.maps.importLibrary("maps");
            const infoWindow = new InfoWindow({
              content: advancedMarker.title
            });
            infoWindow.open({
              anchor: advancedMarker
            });
          });
        });
      }
    }
  </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-advanced-marker>
  <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
</gmp-map>

</body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

इस उदाहरण में, जब Maps JavaScript API पूरी तरह लोड हो जाए, तो initMap ज़रूरी कॉलबैक फ़ंक्शन के बारे में बताता है. कोड, हर मार्कर के लिए लिसनर सेट करता है और हर मार्कर पर क्लिक करने पर, एक जानकारी विंडो दिखाता है.

आगे क्या करना है