शुरू करना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

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

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

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

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

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

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

अहम जानकारी: टेस्टिंग के लिए, अपने ऐप्लिकेशन कोड में mapId: 'DEMO_MAP_ID' का इस्तेमाल करके, मैप आईडी बनाने और कॉन्फ़िगर करने का चरण छोड़ा जा सकता है.

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

इसके लिए, आपको वह मैप आईडी डालना होगा जो आपने अभी-अभी बनाया है. यह आपको अपने 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'
   });

चेतावनी: ऐडवांस मार्कर के उदाहरण के तौर पर दिए गए मैप में, ऐसे मैप आईडी का इस्तेमाल किया गया है जो कम लोकप्रिय जगहों वाले मैप स्टाइल से जुड़े हैं. अगर उदाहरण के तौर पर दिए गए कोड का फिर से इस्तेमाल किया जाता है, तो हमारा सुझाव है कि आप इन मैप आईडी को DEMO_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.
  }
});

अगले चरण

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