इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

शुरू करने से पहले: वेब कॉम्पोनेंट का इस्तेमाल शुरू करने से पहले, एक ऐसा प्रोजेक्ट होना चाहिए जिसमें बिलिंग खाता हो और Maps JavaScript API चालू हो. हम एक से ज़्यादा प्रोजेक्ट के मालिक और बिलिंग एडमिन बनाने का सुझाव देते हैं, ताकि आपकी टीम के पास इन भूमिकाओं के लिए हमेशा कोई न कोई उपलब्ध हो. ज़्यादा जानने के लिए, Cloud Console में सेट अप करना देखें.

वेब कॉम्पोनेंट एक लोकप्रिय 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;index.ts

JavaScript

// This example adds a map using web components.
function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = initMap;index.js

सीएसएस

/* 
 * 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;
}
style.css

एचटीएमएल

<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>index.html

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

JSFiddle.net Google क्लाउड शेल

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

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

JavaScript

// This example adds a map with markers, using web components.
function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = initMap;index.js

सीएसएस

/* 
 * 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;
}
style.css

एचटीएमएल

<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>index.html

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

JSFiddle.net Google क्लाउड शेल

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

JavaScript ईवेंट

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

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

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

सीएसएस

/* 
 * 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;
}
style.css

एचटीएमएल

<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-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>index.html

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

JSFiddle.net Google क्लाउड शेल

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

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

Maps JavaScript API समस्या को ट्रैक करने वाले टूल में सुविधाओं का अनुरोध करें और गड़बड़ियों की शिकायत करें.
जगह की खास जानकारी जैसे हाई-लेवल वेब कॉम्पोनेंट के लिए एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी को एक्सप्लोर करें.