शुरू करना

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

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

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

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

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

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

एक्सपेरिमेंट के तौर पर उपलब्ध: यह सुविधा सिर्फ़ हल्के रंग वाले मैप स्टाइल के लिए सेट की जा सकती है. जब इस सुविधा के साथ काम करने वाले लाइट मैप स्टाइल को मैप आईडी से लिंक किया जाता है, तो चालू की गई लेयर, डार्क मैप स्टाइल के लिए भी उपलब्ध होती हैं.

फ़ీचर लेयर चुनें

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

अहम जानकारी: बेहतर परफ़ॉर्मेंस के लिए, सिर्फ़ उन लेयर को चुनें जिनकी आपको ज़रूरत है.

फ़ीचर लेयर मैनेज करने के लिए

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

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

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

अहम जानकारी: आपका मैप आईडी और एपीआई पासकोड, एक ही Google Cloud Console प्रोजेक्ट से जुड़ा होना चाहिए. इसी तरह, मैप आईडी को ऐसी मैप स्टाइल से जोड़ा जाना चाहिए जिसमें एक या उससे ज़्यादा फ़ीचर लेयर चालू हों.

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>

ध्यान दें: Maps JavaScript API ऐप्लिकेशन के डेवलपर के तौर पर, यह आपकी ज़िम्मेदारी है कि आपका ऐप्लिकेशन स्थानीय कानूनों का पालन करता हो. इसके लिए, आपको यह पुष्टि करनी होगी कि ऐप्लिकेशन को जिस देश में होस्ट किया गया है उसके लिए, क्षेत्र के हिसाब से सही भाषा का इस्तेमाल किया गया हो.

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 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.
  }
});

अगले चरण

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