आरंभ करें

बेहतर मार्कर सेट अप करने के लिए, यह तरीका अपनाएं.

एपीआई पासकोड पाएं और Maps JavaScript API को चालू करें

बेहतर मार्कर का इस्तेमाल करने से पहले, आपको क्लाउड की ज़रूरत होगी बिलिंग खाते वाला प्रोजेक्ट और Maps JavaScript API चालू किया गया. ज़्यादा जानने के लिए, Google Cloud प्रोजेक्ट सेट अप करना लेख पढ़ें.

एपीआई पासकोड पाएं

मैप आईडी बनाएं

नया मैप आईडी बनाने के लिए, Cloud को पसंद के मुताबिक बनाने में दिया गया तरीका अपनाएं. मैप प्रकार को JavaScript पर सेट करें और वेक्टर या रास्टर विकल्प.

मैप को शुरू करने के लिए कोड अपडेट करना

इसके लिए वह मैप आईडी ज़रूरी है जो आपने अभी-अभी बनाया है. यह आपके Maps पर मिल सकता है मैनेजमेंट पेज.

1. Maps JavaScript API लोड करें.

2. ज़रूरत पड़ने पर, async फ़ंक्शन में जाकर बेहतर मार्कर लाइब्रेरी लोड करें:

   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

3. mapId प्रॉपर्टी का इस्तेमाल करके मैप को इंस्टैंशिएट करते समय, मैप आईडी दें. यह आपका दिया गया मैप आईडी या DEMO_MAP_ID हो सकता है.

   const map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'YOUR_MAP_ID'
   });

मैप की सुविधाएं देखना (ज़रूरी नहीं)

बेहतर मार्कर के लिए मैप आईडी ज़रूरी है. अगर मैप आईडी मौजूद नहीं है, तो बेहतर मार्कर लोड नहीं हो सकते. समस्या हल करने के लिए, मैप की सुविधाओं में होने वाले बदलावों की सदस्यता लेने के लिए, mapcapabilities_changed लिसनर जोड़ा जा सकता है. मैप की क्षमताओं का इस्तेमाल करना ज़रूरी नहीं है. साथ ही, इसका सुझाव सिर्फ़ जांच के लिए दिया जाता है या रनटाइम फ़ॉलबैक के मकसद से शामिल किया जा सकता है.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

अगले चरण

डिफ़ॉल्ट ऐडवांस मार्कर बनाना