Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

शुरू करना

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

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

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

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

वेक्टर मैप आईडी बनाना

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

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

मैप लेयर चुनना

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

मैप लेयर मैनेज करने के लिए

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

इस स्क्रीनशॉट में ड्रॉप-डाउन दिखाया गया है.

मैप को शुरू करने के लिए इस्तेमाल होने वाले कोड को अपडेट करना

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

अपने ऐप्लिकेशन कोड में इनलाइन बूटस्ट्रैप लोडर जोड़कर, 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>

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 Console में चालू की जाती हैं और मैप आईडी से जुड़ी होती हैं. मैप आईडी कुछ समय के लिए होते हैं और इनमें बदलाव हो सकता है. इसलिए, किसी सुविधा (उदाहरण के लिए, डेटा-ड्रिवन स्टाइलिंग) को कॉल करने से पहले, 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.
  }
});