शुरू करना

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

अगले चरण

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