शुरू करें

सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग का इस्तेमाल करने के लिए, आपको एक ऐसा मैप आईडी बनाना होगा जो JavaScript वेक्टर मैप. इसके बाद, आपको मैप की नई स्टाइल बनानी होगी. इसके बाद, अपनी पसंद का मैप चुनना होगा सीमा सुविधा लेयर का इस्तेमाल करें, और स्टाइल को अपने मैप आईडी से जोड़ें.

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

नया मैप आईडी बनाने के लिए, क्लाउड को पसंद के मुताबिक बनाना. मैप के टाइप को JavaScript पर सेट करें और वेक्टर विकल्प चुनें. मैप पर झुकाने और घुमाने की सुविधा चालू करने के लिए, झुकाएं और/या रोटेट करें. अगर आपने झुकाने या हेडिंग का इस्तेमाल करने से आपके ऐप्लिकेशन पर प्रतिकूल असर पड़ेगा. झुकाएं छोड़ें और रोटेट से सही का निशान हटाया गया, ताकि उपयोगकर्ता, झुकाव और घुमाव को अडजस्ट नहीं कर पाएं.

मैप की नई स्टाइल बनाना

मैप की नई स्टाइल बनाने के लिए, मैप स्टाइल मैनेज करें में ��िए गए निर्देशों का पालन करें शैली बनाने के लिए, और स्टाइल को अभी-अभी बनाए गए मैप आईडी से जोड़ें.

सुविधा परतें चुनें

Google API कंसोल में आप प्रदर्शित करने के लिए सुविधा परतें चुन सकते हैं. यह तय करता है कि मैप पर किस तरह की सीमाएं दिखेंगी (उदाहरण के लिए शहर, राज्य वगैरह).

सुविधाओं की लेयर मैनेज करने के लिए

1. Google API कंसोल में, मैप की स्टाइल पेज पर जाएं.
2. अनुरोध किए जाने पर कोई प्रोजेक्ट चुनें.
3. मैप की कोई स्टाइल चुनें.
4. लेयर जोड़ने या हटाने के लिए, सुविधा लेयर ड्रॉप-डाउन पर क्लिक करें.
5. अपने बदलावों को सेव करने और उन्हें अपने मैप पर उपलब्ध कराने के लिए, सेव करें पर क्लिक करें.

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

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

1. इनलाइन बूटस्ट्रैप जोड़कर Maps JavaScript API को लोड करें लोड करने की अनुमति दें, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

1. mapId प्रॉपर्टी का इस्तेमाल करके मैप इंस्टैंशिएट करते समय, मैप आईडी दें. यह वह मैप आईडी होना चाहिए जिसे आपने फ़ीचर के साथ मैप स्टाइल का इस्तेमाल करके कॉन्फ़िगर किया था परतें सक्षम की गईं.

   map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
   });

Maps JavaScript API को लोड करने के बारे में ज़्यादा जानें.

मैप में सुविधा परतें जोड़ें

अपने मैप पर किसी फ़ीचर लेयर का रेफ़रंस पाने के लिए, map.getFeatureLayer() पर कॉल करें जब मैप शुरू होता है:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

मैप की क्षमताएं देखें

सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग के लिए, ऐसी क्षमताएं होनी चाहिए जो Google API कंसोल और मैप आईडी से जुड़ा होता है. क्योंकि मैप आईडी अल्पकालिक होते हैं इनमें बदलाव भी हो सकता है. इसलिए, map.getMapCapabilities() को कॉल किया जा सकता है का इस्तेमाल करके यह पुष्टि करें कि कोई खास सुविधा (जैसे कि डेटा-ड्रिवन स्टाइलिंग) है या नहीं उपलब्ध कराने के लिए किया जा सकता है. इस जांच का होना ज़रूरी नहीं है.

इस उदाहरण में, मैप की सुविधा की सदस्यता लेने के लिए, लिसनर जोड़ने का तरीका दिखाया गया है बदलाव:

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

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});

अगले चरण

• बाउंड्री पॉलीगॉन को स्टाइल करना
• एक कोरोप्लेथ मैप बनाएं
• माउस इवेंट मैनेज करना
• किसी क्षेत्र के लिए जगह का आईडी पाना
• सीमाओं के लिए डेटा-ड्रिवन स्टाइल के साथ Geocoding और Places API का इस्तेमाल करना