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

इस पेज का अनुवाद Cloud Translation API से किया गया है.

शुरू करना

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

मैप्स 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 कंसोल में सक्षम हों, और मानचित्र ID से संबद्ध हों. चूंकि मैप आईडी अस्थायी होती हैं और उनमें बदलाव हो सकता है, इसलिए आप 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.
  }
});