शुरू करना

प्लैटफ़ॉर्म चुनें: 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.
  }
});

अगले चरण

किसी मैप में मार्कर जोड़ना