क्लाउड-आधारित मैप की स्टाइल

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

Google Maps Platform, क्लाउड-आधारित मैप की स्टाइलिंग से जुड़ी सुविधाएं उपलब्ध कराता है. इन सुविधाओं की मदद से, Google Cloud Console का इस्तेमाल करके, अपने मैप को स्टाइल, कस्टमाइज़, और मैनेज किया जा सकता है. इसकी मदद से, उपयोगकर्ताओं के लिए उनकी पसंद के मुताबिक मैप अनुभव बनाया जा सकता है. साथ ही, हर बार स्टाइल में बदलाव करने पर, आपको ऐप्लिकेशन का कोड अपडेट नहीं करना पड़ता.

15 सितंबर, 2020 से पहले बनाई गई स्टाइल में, Google Maps की नैचुरल सुविधाएं नहीं दिखेंगी. अपनी मैप स्टाइल के लिए Google Maps की बेहतर नैचुरल सुविधाओं के इस्तेमाल के लिए, आपको मैप स्टाइल बनाना होगा.

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

इन सुविधाओं में ये शामिल हैं:

  • क्लाउड-आधारित मैप स्टाइल: JSON का इस्तेमाल करके, अपने मैप को कोड में स्टाइल करने के बजाय, मैप आईडी और मैप स्टाइल का इस्तेमाल करके, Cloud Console में अपने डाइनैमिक या स्टैटिक मैप को मैनेज करें और उन्हें स्टाइल दें.
  • वेक्टर मैप: JavaScript JavaScript इस्तेमाल करने वाला उपयोगकर्ता, Google के प्लैटफ़ॉर्म पर उपलब्ध वेक्टर पर आधारित उसी मैप को इस्तेमाल कर सकता है जो Maps.google.com पर सीधे उसके वेब ऐप्लिकेशन पर उपलब्ध है.
  • कारोबार के लिए पीओआई फ़िल्टर करना: कारोबार की जगहों की पांच कैटगरी को विकल्प के तौर पर मैप पर दिखाया जा सकता है.
  • पीओआई डेंसिटी कंट्रोल: बेसमैप पर दिखने वाली जगहों की डेंसिटी को इस तरह बदला जा सकता है कि वे डिफ़ॉल्ट रूप से, ज़्यादा या कम पॉइंट दिखाएं.

क्लाउड-आधारित मैप की स्टाइलिंग Android के लिए Maps SDK टूल1, iOS के लिए Maps SDK टूल, JavaScript, और Maps स्टैटिक एपीआई पर उपलब्ध है. हालांकि, सभी सुविधाएं सभी प्लैटफ़ॉर्म पर नहीं दिखेंगी.

शुरू करने से पहले इन बातों का ध्यान रखें

  • मैप आईडी बनाएं
    मैप की स्टाइल का इस्तेमाल करने के लिए, आपका मैप मैप आईडी का इस्तेमाल करके लोड किया जाना चाहिए.
  • हार्ड-कोड्ड स्टाइल से माइग्रेट करें
    JSON या यूआरएल क्वेरी पैरामीटर जैसे हार्ड-कोडेड स्टाइल के साथ कस्टमाइज़ किए गए किसी मौजूदा मैप पर मैप-आधारित स्टाइल का इस्तेमाल करने के लिए मैप आईडी जोड़ने से पहले, हम आपको हार्ड-कोड की गई स्टाइल हटाने का सुझाव देते हैं, ताकि आने वाले समय में फ़ंक्शन के साथ संभावित टकराव से बचा जा सके. अपनी JSON स्टाइल को मैप की नई स्टाइल में इंपोर्ट किया जा सकता है.
* Android के लिए Maps SDK टूल को अपग्रेड करना
क्लाउड-आधारित मैप स्टाइल का इस्तेमाल करने के लिए, आपको Android के लिए Maps SDK टूल के 18.0.0 या उसके बाद के वर्शन का इस्तेमाल करना होगा. साथ ही, Android रेंडरर के लिए सबसे नए Maps SDK टूल का इस्तेमाल करना होगा.

बिलिंग

क्लाउड-आधारित मैप स्टाइल का इस्तेमाल करने के लिए मैप आईडी ज़रूरी है. Android के लिए Maps SDK टूल, iOS के लिए Maps SDK टूल, और JavaScript आईडी का इस्तेमाल करने पर, डाइनैमिक Maps SKU के लिए, आपसे शुल्क लिया जाता है. मैप स्टैटिक एपीआई में, मैप आईडी का इस्तेमाल करने पर, स्टैटिक मैप SKU पर शुल्क लगाया जाता है.

उदाहरण

Android

ApiDemos नमूना ऐप्लिकेशन चलाएं

ApiDemos सैंपल ऐप्लिकेशन चलाने के लिए, GitHub का सैंपल देखें (Java | Kotlin) और CloudBasedMapStylingDemoActivity डेमो देखें (Java | Kotlin).

Java और Kotlin ऐप्लिकेशन का नमूना देखें. इसमें, क्लाउड से अपने Android मैप को स्टाइल करने का तरीका बताया गया है.

समस्याएं जिनके बारे में जानकारी है

ग्राहकों को आपका ऐप्लिकेशन डिलीवर हो जाने के बाद, मैप आईडी वाले मैप के लिए पसंद के मुताबिक बनाई गई स्टाइल को Google Cloud Console से अपडेट किया जा सकता है. नई स्टाइल आपके ऐप्लिकेशन में कुछ ही घंटों में दिखने लगेंगी.

यह पक्का करने के लिए कि टेस्टिंग के लिए नई कस्टम स्टाइलें तुरंत दिखें, अपने टेस्ट डिवाइस से ऐप्लिकेशन का डेटा मिटाएं. अपने डिवाइस से डेटा मिटाने के बारे में ज़्यादा जानकारी के लिए, Android सहायता - जगह खाली करें देखें.

ध्यान रखें कि हर फ़ोन की सेटिंग अलग हो सकती हैं. ज़्यादा जानकारी के लिए, डिवाइस बनाने वाली कंपनी से संपर्क करें.

iOS

ApiDemos नमूना ऐप्लिकेशन चलाएं

ApiDemos नमूना ऐप्लिकेशन चलाने के लिए, GitHub नमूना देखें GoogleMap सैंपल ऐप्लिकेशन और CloudBasedMapStylingViewController प्रोजेक्ट देखें (Swift | Objective-C के लिए GitHub नमूना).

वैकल्पिक Cloud Styling CocoaPod या GitHub डेमो

स्क्रैच से शुरू करने के बजाय, आप हमारा उद्देश्य-सी नमूना ऐप्लिकेशन आज़मा सकते हैं, जो क्लाउड से आपके iOS मैप को शैली देने का तरीका यहां दिखाता है.

बीटा डेमो ऐप्लिकेशन बनाना

Xcode में, कंपाइल बटन दबाएं और फिर मौजूदा स्कीम चलाएं. बिल्ड में गड़बड़ी का मैसेज दिखता है. इसकी वजह से, SDKDemoAPIKey.h फ़ाइल में आपकी एपीआई कुंजी डालने की कोशिश की जाती है.

अगर आपके पास एपीआई कुंजी नहीं है, तो Cloud Console पर प्रोजेक्ट सेट अप करने और एपीआई कुंजी पाने के लिए, इन निर्देशों का पालन करें. Cloud Console पर कुंजी को कॉन्फ़िगर करते समय, आप अपने ऐप्लिकेशन का बंडल आइडेंटिफ़ायर तय कर सकते हैं, ताकि यह पक्का हो सके कि सिर्फ़ आपका ऐप्लिकेशन कुंजी का इस्तेमाल कर सकता है. SDK टूल के नमूने ऐप्लिकेशन का डिफ़ॉल्ट बंडल आइडेंटिफ़ायर com.example.GoogleMapsDemos होता है.

SDKDemoAPIKey.h फ़ाइल में बदलाव करें और अपनी एपीआई कुंजी को kAPIKey कॉन्सटेंट की परिभाषा में चिपकाएं:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

अगर Xcode आपको बदलाव करने के लिए SDKDemoAPIKey.h फ़ाइल को अनलॉक करने का संकेत देता है, तो अनलॉक करें को चुनें.

नीचे दी गई लाइन हटाएं:

```
#error Register for API Key and insert here.
```

प्रोजेक्ट बनाएं और उसे चलाएं.

क्लाउड-आधारित मैप स्टाइलिंग मैप डेमो

CloudStyling डेमो में, Google Cloud Console पर सेट की गई स्टाइल का इस्तेमाल करके, मैप को स्टाइल करने का तरीका दिखाया गया है.

डेमो ऐप्लिकेशन लॉन्च होने पर, सूची के शीर्ष पर बीटा नमूना अनुभाग में मैप कस्टमाइज़ेशन डेमो पर क्लिक करें.

अलग-अलग मैप आईडी लोड करने के असर देखने के लिए, स्टाइल मैप पर क्लिक करें.

आप अपने स्टाइल में भी स्टाइल जोड़ सकते हैं "स्टाइल मैप" > "नया मैप आईडी जोड़ें" और अपनी पसंद के मुताबिक बनाए गए मैप के साथ मैप अपडेट देखें.

JavaScript

यह मैप आईडी का इस्तेमाल करके, पसंद के मुताबिक बनाए गए मैप को लोड करने का बुनियादी उदाहरण है. इस मामले में, Maps JavaScript, मैप के लोड होने पर, मैप आईडी 8e0a97af9386fef का रेफ़रंस देता है. साथ ही, उस मैप आईडी से जुड़े मैप के स्टाइल को अपने-आप लागू कर देता है.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js
उदाहरण देखें

सैंपल आज़माएं

Maps स्टैटिक एपीआई

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

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

  2. हमारे वेब एपीआई में से किसी एक का इस्तेमाल करके, नए या मौजूदा मैप में मैप आईडी जोड़ने के लिए, map_id यूआरएल पैरामीटर जोड़ें और इसे अपने मैप आईडी पर सेट करें. इस उदाहरण में बताया गया है कि Maps स्टैटिक एपीआई का इस्तेमाल करके, मैप पर मैप आईडी जोड़ना.

    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

  1. क्लाउड-आधारित मैप शैली Android के लाइट मोड पर उपलब्ध नहीं है.↩