अपने iOS ऐप्लिकेशन में एक मैप जोड़ें (मकसद-सी)

1. शुरू करने से पहले

खास जानकारी

इस कोडलैब में आपको #39;Google Maps Platform का इस्तेमाल करके ऑब्जेक्टिव-C में iOS ऐप्लिकेशन बनाने से जुड़ी सारी जानकारी मिलेगी. आपको iOS के लिए Maps SDK टूल लोड करने, अपना पहला मैप दिखाने, मार्कर और मार्कर क्लस्टरिंग के साथ काम करने, मैप पर ड्रॉइंग करने, और उपयोगकर्ता के इंटरैक्शन को मैनेज करने से जुड़ी सभी बुनियादी बातें पता चलेंगी.

आप क्या बनाएंगे #39;

इस कोडलैब में आप एक iOS ऐप्लिकेशन बनाएंगे, जो ये काम करेगा:

• iOS के लिए मैप SDK और iOS यूटिलिटी लाइब्रेरी के लिए Maps SDK लोड करता है
• ऑस्ट्रेलिया के ऑस्ट्रेलिया वाले इलाके का मैप दिखाता है
• सिडनी के आस-पास 100 पॉइंट के लिए कस्टम मार्कर दिखाता है
• मार्कर क्लस्टर लागू करता है
• उपयोगकर्ता के इंटरैक्शन को चालू करता है, जो फिर से सेंटर में आता है और मार्कर पर क्लिक किए जाने पर मैप पर एक गोला बनाता है

आप इन चीज़ों के बारे में जानेंगे

• Google Maps Platform का इस्तेमाल शुरू करना
• iOS के लिए Maps SDK और iOS उपयोगिता लाइब्रेरी के लिए Google Maps SDK लोड करना
• कोई मैप लोड कर रहा है
• मार्कर, कस्टम मार्कर, और मार्कर क्लस्टर का इस्तेमाल करना
• iOS इवेंट सिस्टम के लिए Maps SDK के साथ काम करना, ताकि उपयोगकर्ता को इंटरैक्शन मिल सके
• मैप को प्रोग्राम के हिसाब से कंट्रोल करना
• मैप पर ड्रॉइंग बनाना

ज़रूरी बातें

इस कोडलैब को पूरा करने के लिए, आपको नीचे दिए गए आइटम के बारे में जानना होगा. अगर आप Google Maps Platform के साथ काम करने के बारे में पहले से जानते हैं, तो कोडलैब का इस्तेमाल करें!

Google Maps Platform के लिए ज़रूरी प्रॉडक्ट

इस कोडलैब में आप इन Google Maps Platform प्रॉडक्ट का इस्तेमाल करेंगे:

• iOS के लिए Maps SDK टूल
• iOS Utility Library के लिए Google Maps SDK टूल

Google Maps Platform का इस्तेमाल शुरू करें

अगर आपने पहले Google Maps Platform का इस्तेमाल नहीं किया है, तो Google Maps Platform गाइड का इस्तेमाल शुरू करें या नीचे दिया गया तरीका अपनाने के लिए, Google Maps Platform प्लेलिस्ट का इस्तेमाल शुरू करें:

1. बिलिंग खाता बनाएं.
2. प्रोजेक्ट बनाएं.
3. Google Maps Platform API और SDK टूल चालू करें (पिछले सेक्शन में दी गई है).
4. एपीआई कुंजी जनरेट करें.

ध्यान दें: साइन अप करने के दौरान, आपको किसी मौजूदा Google खाते में साइन इन करना होगा या नया खाता बनाना होगा.

इस कोडलैब के लिए अन्य ज़रूरी शर्तें

इस कोडलैब को पूरा करने के लिए, आपको इन खातों, सेवाओं, और टूल की ज़रूरत होगी:

• बिलिंग की सुविधा वाला Google Cloud Platform खाता
• iOS के लिए Maps SDK टूल वाली Google Maps Platform API कुंजी
• Objective-C के बारे में बुनियादी जानकारी
• 12.0 या उसके बाद के टारगेट SDK टूल के साथ Xcode 12.0

2. सेट अप करें

नीचे दी गई सुविधा चालू करने के लिए, आपको iOS के लिए Maps SDK टूल को चालू करना होगा.

Google Maps Platform सेट अप करना

अगर आपके पास पहले से Google Cloud Platform खाता नहीं है और बिलिंग की सुविधा चालू की गई है, तो कृपया बिलिंग खाता और प्रोजेक्ट बनाने के लिए, Google Maps Platform का इस्तेमाल शुरू करना गाइड देखें.

1. Cloud Console में, प्रोजेक्ट ड्रॉप-डाउन मेन्यू पर क्लिक करें और वह प्रोजेक्ट चुनें जिसे आप इस कोडलैब के लिए इस्तेमाल करना चाहते हैं.

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

प्रोजेक्ट स्टार्टर टेंप्लेट सेट अप

इस कोडलैब का इस्तेमाल शुरू करने से पहले, स्टार्टर प्रोजेक्ट टेंप्लेट के साथ-साथ पूरा सॉल्यूशन कोड डाउनलोड करने के लिए, यह तरीका अपनाएं:

1. https://github.com/googlecodelabs/maps-platform-101-objc पर, इस कोडलैब के लिए GitHub repo डाउनलोड या फ़ोर्क करें.

StarterApp प्रोजेक्ट, /starter डायरेक्ट्री में मौजूद है और इसमें वह बेसिक फ़ाइल स्ट्रक्चर शामिल है जिसे आपको #39; कोडलैब (कोड बनाना सीखना) पूरा करना होगा. आपको जिस भी चीज़ के साथ काम करना है वह /starter/StarterApp निर्देशिका में मौजूद है.

अगर आप पूरी तरह से सॉल्यूशन कोड देखना चाहते हैं, तो ऊपर दिया गया तरीका अपनाएं और /solution/SolutionApp डायरेक्ट्री में सॉल्यूशन देखें.

3. iOS के लिए मैप SDK टूल इंस्टॉल करें

iOS के लिए Maps SDK टूल का इस्तेमाल करने के लिए पहला कदम है, ज़रूरी डिपेंडेंसी इंस्टॉल करना. इस प्रक्रिया को दो चरणों में पूरा किया जा सकता है: iOS के लिए Maps SDK टूल और Cocoapods डिपेंडेंसी मैनेजर के ज़रिए Maps SDK टूल के लिए Maps SDK टूल और एपीआई एपीआई, SDK टूल को उपलब्ध कराना.

1. Podfile के लिए, iOS के लिए Maps SDK टूल और iOS Utility लाइब्रेरी के लिए Maps SDK टूल जोड़ें.

इस कोडलैब में आप iOS के लिए Maps SDK टूल, दोनों का इस्तेमाल कर सकते हैं. इसमें Google Maps से जुड़ी सभी ज़रूरी सुविधाएं मौजूद हैं. साथ ही, Maps iOS Utility लाइब्रेरी भी है, जो आपके मैप को बेहतर बनाने के लिए कई तरह की सुविधाएं देती है. इसमें मार्कर क्लस्टर बनाना भी शामिल है.

शुरू करने के लिए, Xcode (या आपके पसंदीदा टेक्स्ट एडिटर) में Pods > Podfile खोलें और use_frameworks! के तहत iOS और Utility लाइब्रेरी के लिए Maps SDK टूल को शामिल करने के लिए फ़ाइल को अपडेट करें:

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

2. iOS के लिए Maps SDK टूल और iOS यूटिलिटी लाइब्रेरी पॉड के लिए Maps SDK टूल इंस्टॉल करें.

डिपेंडेंसी इंस्टॉल करने के लिए, /starter डायरेक्ट्री में कमांड लाइन से pod install चलाएं. Cocoapods डिपेंडेंसी को अपने-आप डाउनलोड करेगा और StarterApp.xcworkspace बनाएगा. 3. डिपेंडेंसी इंस्टॉल होने के बाद, Xcode में StarterApp.xcworkspace खोलें. इसके बाद, Command+R दबाकर ऐप्लिकेशन को iPhone सिम्युलेटर में चलाएं. अगर सब कुछ सही तरीके से सेट अप किया गया है, तो सिम्युलेटर लॉन्च होगा और एक काली स्क्रीन दिखाएगा. चिंता न करें, आपने अभी तक कुछ भी नहीं बनाया है, इसलिए उम्मीद की जाती है! 4. SDK टूल को AppDelegate.h में इंपोर्ट करें.

आपकी डिपेंडेंसी इंस्टॉल हो गई है, इसलिए अब SDK टूल को अपनी एपीआई कुंजी दें. पहला कदम है, iOS के लिए Maps SDK टूल को डिपेंडेंसी के तौर पर इंपोर्ट करना. इसके लिए, यहां दी गई जानकारी को #import "AppDelegate.h" इंपोर्ट स्टेटमेंट के नीचे रखें:

@import GoogleMaps;

5. iOS SDK टूल के इंपोर्ट स्टेटमेंट के नीचे, अपनी एपीआई कुंजी पर सेट की गई वैल्यू के साथ NSString कॉन्सटेंट तय करें:

static NSString *const kMapsAPIKey = @"YOUR API KEY";

6. application: didFinishLaunchingWithOptions: में GMSServices पर provideAPIKey को कॉल करके, iOS SDK टूल को एपीआई कुंजी भेजें

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

आपकी अपडेट की गई AppDelegate.m फ़ाइल अब कुछ ऐसी दिखेगी:

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

आपका Podfile ऐसा दिखना चाहिए:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'

target 'StarterApp' do
  use_frameworks!

pod 'GoogleMaps', '5.1.0.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

end

अब आपकी डिपेंडेंसी इंस्टॉल हो गई हैं और आपकी एपीआई कुंजी दी गई है, इसलिए आप iOS के लिए Maps SDK टूल को कॉल करने के लिए तैयार हैं.

4. एक मैप दिखाएं

अपना पहला मैप दिखाने का समय हो गया है!

iOS के लिए मैप SDK का सबसे ज़्यादा इस्तेमाल होने वाला हिस्सा GMSMapView क्लास है, जो कई तरीके देता है. इन तरीकों से आप मैप के इंस्टेंस बना सकते हैं और उनमें बदलाव कर सकते हैं. इसे इस्तेमाल करने का तरीका #39; है.

1. ViewController.m खोलें.

इसी कोडलैब के बाकी बचे काम आप यहां करेंगे. आपके लिए व्यू कंट्रोलर के loadView और viewDidLoad लाइफ़साइकल इवेंट पहले से ही छिपे हुए हैं. 2. फ़ाइल के सबसे ऊपर इन्हें जोड़कर, iOS के लिए Maps SDK टूल को इंपोर्ट करें:

@import GoogleMaps;

3. GMSMapView को स्टोर करने के लिए, ViewController इंस्टेंस वैरिएबल का एलान करें.

GMSMapView का इंस्टेंस वह मुख्य ऑब्जेक्ट है जिसके साथ आप इस कोडलैब के दौरान काम करेंगे. साथ ही, आप अलग-अलग व्यू कंट्रोलर लाइफ़साइकल के तरीकों से इसका इस्तेमाल करेंगे और उन पर कार्रवाई करेंगे. इसे उपलब्ध कराने के लिए, ViewController के लागू करने की जानकारी को अपडेट करके, इसे इंस्टेंस वैरिएबल के तौर पर सेव करें:

@implementation ViewController {
  GMSMapView *_mapView;
}

4. loadView में GMSCameraPosition का इंस्टेंस बनाएं.

GMSCameraPosition से पता चलता है कि मैप को कहां फ़ोकस किया जाएगा और ज़ूम का लेवल क्या दिखेगा. यह कोड cameraWithLatitude:longitude:zoom: के कॉल को सिडनी, ऑस्ट्रेलिया, -33.86 के अक्षांश और 151.20 के देशांतर के साथ 12 के ज़ूम लेवल पर केंद्रित करता है:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

5. मैप में loadView को इंस्टैंशिएट करने के लिए, GMSMapView में एक इंस्टेंस बनाएं.

मैप का नया इंस्टेंस बनाने के लिए, mapWithFrame:camera: पर कॉल करें. ध्यान दें कि फ़्रेम को CGRectZero पर सेट कैसे किया जाता है. यह iOS CGGeometry लाइब्रेरी का एक ग्लोबल वैरिएबल है जो व्यू कंट्रोलर के अंदर 0, 0, 0 पर मौजूद 0 चौड़ाई, 0 ऊंचाई,और एक फ़्रेम को तय करता है. कैमरा, कैमरे की उस स्थिति पर सेट है जो आपने अभी-अभी बनाई है.

मैप को असल में दिखाने के लिए, आगे आपको ##39;व्यू कंट्रोलर के रूट व्यू को _mapview पर सेट करना होगा. ऐसा करने से मैप, फ़ुलस्क्रीन दिखेगा.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

6. व्यू कंट्रोलर पर GMSMapViewDelegate सेट करें.

लागू करने पर, 'मैप व्यू डेलिगेट' की मदद से आप GMSMapView इंस्टेंस पर उपयोगकर्ता इंटरैक्शन के इवेंट हैंडल कर सकते हैं. आपको बाद के चरणों में इसकी ज़रूरत होगी.

सबसे पहले, GMSMapViewDelegate: के प्रोटोकॉल के मुताबिक ViewController के इंटरफ़ेस को अपडेट करें

@interface ViewController ()<GMSMapViewDelegate>

इसके बाद, ViewController पर GMSMapViewDelegate सेट करने के लिए ये चीज़ें जोड़ें.

_mapView.delegate = self;

अब iOS सिम्युलेटर (Command+R) में ऐप्लिकेशन को फिर से लोड करें और मैप दिखने लगेगा!

खास जानकारी के लिए, आपने ऑस्ट्रेलिया के सिडनी शहर का मैप दिखाने के लिए GMSMapView का एक इंस्टेंस बनाया है.

आपकी ViewController.m फ़ाइल अब कुछ ऐसी दिखेगी:

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5. क्लाउड-आधारित मैप स्टाइलिंग (ज़रूरी नहीं)

क्लाउड पर आधारित मैप स्टाइल का इस्तेमाल करके आप अपने मैप की शैली को पसंद के मुताबिक बना सकते हैं.

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

अगर आपने अभी तक मैप शैली के साथ कोई मैप आईडी नहीं बनाया है, तो नीचे दिए गए चरणों को पूरा करने के लिए मैप आईडी गाइड देखें:

1. एक मैप आईडी बनाएं.
2. किसी मैप आईडी को किसी मैप शैली से जोड़ें.

ध्यान दें: Android के लिए Maps SDK पर मैप या iOS के लिए Maps SDK का इस्तेमाल करने से, डाइनैमिक मैप SKU के हिसाब से लगाए गए मैप लोड को ट्रिगर करता है. ज़्यादा जानकारी के लिए Google Maps Billing देखें.

अपने ऐप्लिकेशन में मैप आईडी जोड़ना

पिछले चरण में बनाए गए मैप आईडी का इस्तेमाल करने के लिए, ViewController.m फ़ाइल खोलें और loadView तरीके में एक GMSMapID ऑब्जेक्ट बनाएं और उसे मैप आईडी दें. इसके बाद, GMSMapID ऑब्जेक्ट को पैरामीटर के तौर पर देकर, GMSMapView इंस्टैंशिएशन में बदलाव करें.

ViewController.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

जब आप इसे पूरा कर लें, तब आगे बढ़ें और अपनी चुनी हुई शैली में अपना मैप देखने के लिए ऐप्लिकेशन चलाएं!

6. मैप में मार्कर जोड़ें

iOS के लिए Maps SDK टूल की मदद से डेवलपर बहुत से काम करते हैं, लेकिन मैप पर मार्कर लगाना सबसे लोकप्रिय है. मार्कर आपको मैप पर विशिष्ट बिंदु दिखाने देते हैं और उपयोगकर्ता इंटरैक्शन को प्रबंधित करने के लिए एक सामान्य UI तत्व हैं. अगर आपने पहले Google Maps का इस्तेमाल #39;किया है, तो शायद आप डिफ़ॉल्ट मार्कर के बारे में जानते होंगे. यह ऐसा दिखता है:

इस चरण में, आप मैप पर मार्कर लगाने के लिए GMSMarker क्लास को इस्तेमाल करने का तरीका जानेंगे.

ध्यान दें कि व्यू कंट्रोलर के #loadView3 लाइफ़साइकल इवेंट में, मैप के पिछले कदम से लोड होने तक, मार्कर को मैप पर नहीं रखा जा सकता. इसलिए, आप इन चरणों को viewDidLoad के लाइफ़साइकल इवेंट में पूरा करेंगे, जिसे व्यू (और मैप) के लोड होने के बाद कहा जाता है.

1. CLLocationCoordinate2D ऑब्जेक्ट के बारे में बताएं.

CLLocationCoordinate2D, iOS CoreLocation लाइब्रेरी की ओर से उपलब्ध कराया गया एक स्ट्रक्चर है, जो सेट किए गए अक्षांश और देशांतर की भौगोलिक जगह के बारे में बताता है. अपना पहला मार्कर बनाना शुरू करने के लिए, CLLocationCoordinate2D ऑब्जेक्ट तय करें और मैप के बीच में अक्षांश और देशांतर सेट करें. camera.target.latitude और camera.target.longitude प्रॉपर्टी का इस्तेमाल करके, मैप के बीच वाले निर्देशांक को मैप व्यू से ऐक्सेस किया जा सकता है.

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);

2. GMSMarker का इंस्टेंस बनाएं.

iOS के लिए Maps SDK टूल, GMSMarker क्लास की सुविधा देता है. GMSMarker के हर इंस्टेंस में मैप पर एक मार्कर होता है. इसे बनाने के लिए markerWithPosition: को कॉल किया जाता है और CLLocationCoordinate2D को ऑब्जेक्ट के तौर पर दिखाया जाता है. इससे, SDK टूल को यह पता चलता है कि मैप पर मार्कर को कहां रखना है.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

3. कस्टम मार्कर आइकॉन सेट करें.

Google Maps के लिए डिफ़ॉल्ट लाल पिन मार्कर बढ़िया है, लेकिन इससे आपका मैप पसंद के मुताबिक बनाया जा रहा है! सबसे अच्छी बात यह है कि iOS के लिए Maps SDK टूल की मदद से, कस्टम मार्कर का इस्तेमाल करना बहुत आसान है. आप देख सकते हैं कि StarterApp प्रोजेक्ट में {0}custom_pin.png' नाम की इमेज शामिल है, लेकिन आप किसी भी इमेज का इस्तेमाल कर सकते हैं.

कस्टम मार्कर सेट करने के लिए, मार्कर की icon प्रॉपर्टी को UIImage के इंस्टेंस पर सेट करें.

marker.icon = [UIImage imageNamed:@"custom_pin.png"];

4. चिह्नक को मैप पर रेंडर करें.

आपका मार्कर बनाया गया है, लेकिन आपको दिखेगा कि #39; मैप पर नहीं है. ऐसा करने के लिए, GMSMarker इंस्टेंस की map प्रॉपर्टी को GMSMapView के इंस्टेंस पर सेट करें.

marker.map = _mapView;

अब ऐप्लिकेशन को फिर से लोड करें और मार्कर के साथ अपना पहला मैप देखें!

संक्षिप्त करने के लिए, इस सेक्शन में आपने GMSमार्कर क्लास का एक इंस्टेंस बनाया और मैप पर मार्कर दिखाने के लिए उसे मैप व्यू पर लागू किया. ViewController.m में आपका अपडेट किया गया viewDDLoad लाइफ़साइकल इवेंट, अब कुछ ऐसा दिखेगा:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

7. मार्कर क्लस्टर चालू करना

बहुत ज़्यादा मार्कर या मार्कर का इस्तेमाल करते समय, आपको एक समस्या हो सकती है. उदाहरण के लिए, अगर दो मार्कर बहुत पास-पास हैं, तो आप इस तरह की स्थिति पैदा कर सकते हैं:

मार्कर क्लस्टर में यह डेटा शामिल होता है. मार्कर क्लस्टरिंग, आम तौर पर लागू की जाने वाली एक और सुविधा है, जो आस-पास के मार्कर को एक आइकॉन में बांट देती है. यह आइकॉन, ज़ूम लेवल के हिसाब से बदलता है, जैसे कि:

मार्कर क्लस्टरिंग का एल्गोरिदम, मैप के दिखाई देने वाले इलाके को ग्रिड में बांटता है, फिर उसी सेल में मौजूद क्लस्टर आइकॉन को अलग करता है. खुशी की बात यह है कि आपको इनमें से किसी के बारे में चिंता करने की ज़रूरत नहीं है. इसकी वजह यह है कि Google Maps Platform टीम ने iOS उपयोगिता लाइब्रेरी के लिए, Google Maps SDK टूल नाम की एक मददगार ओपन सोर्स लाइब्रेरी बनाई है. कई और चीज़ों के साथ-साथ, यह लाइब्रेरी आपके लिए मार्कर क्लस्टरिंग अपने-आप हैंडल करती है. आप Google Maps Platform दस्तावेज़ में मार्कर क्लस्टर के बारे में ज़्यादा पढ़ सकते हैं या GitHub पर iOS यूटिलिटी लाइब्रेरी का स्रोत देख सकते हैं.

1. मैप पर और भी ज़्यादा मार्कर जोड़ें.

मार्कर क्लस्टरिंग को सक्रिय देखने के लिए, आपको मैप पर बहुत सारे मार्करों की आवश्यकता होगी. इसे आसान बनाने के लिए, LocationGenerator.m में स्टार्टर प्रोजेक्ट में आपको आसानी से मार्कर जनरेटर दिया जाता है.

अपने मैप में जितने चाहें उतने मार्कर जोड़ने के लिए!generateMarkersNear:count: बस पिछले चरण में मौजूद कोड के नीचे व्यू कंट्रोलर ' के viewDidLoad लाइफ़साइकल में generateMarkersNear:count: को कॉल करें. यह तरीका, CLLocationCoordinate2D ऑब्जेक्ट में बताए गए निर्देशांक के आस-पास मौजूद जगहों पर count में बताए गए मार्कर की संख्या बनाता है. इस मामले में, आप mapCenter वैरिएबल को पहले ही पास कर सकते हैं. मार्कर NSArray में दिखाए जाते हैं.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

2. iOS Utility Library के लिए Google Maps SDK टूल इंपोर्ट करें.

Maps iOS की उपयोगिता लाइब्रेरी को अपने प्रोजेक्ट में डिपेंडेंसी के तौर पर जोड़ने के लिए, ViewController.m में सबसे ऊपर मौजूद डिपेंडेंसी की सूची में इसे जोड़ें:

@import GoogleMapsUtils;

3. मार्कर क्लस्टर को कॉन्फ़िगर करें.

मार्कर क्लस्टर का इस्तेमाल करने के लिए, आपको इसके काम करने के तरीके को कॉन्फ़िगर करने के लिए तीन चीज़ें देनी होंगी: क्लस्टरिंग एल्गोरिदम, एक आइकॉन जनरेटर, और रेंडरर. एल्गोरिदम, मार्कर के क्लस्टर किए जाने का तरीका तय करता है. जैसे कि एक ही क्लस्टर में शामिल करने के लिए मार्कर के बीच की दूरी. आइकॉन जनरेटर से अलग-अलग ज़ूम लेवल पर इस्तेमाल किए जाने के लिए क्लस्टर आइकॉन मिलते हैं. रेंडरर, मैप पर क्लस्टर आइकॉन की असल रेंडरिंग को मैनेज करता है.

अगर आप चाहें, तो इन सभी को शुरुआत से लिख सकते हैं. हालांकि, Maps की iOS सुविधा की लाइब्रेरी में, डिफ़ॉल्ट रूप से लागू करने की सुविधा होती है, ताकि प्रोसेस को आसान बनाया जा सके. बस निम्न जोड़ें:

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

4. GMUClusterManager का इंस्टेंस बनाएं.

GMUClusterManager, वह क्लास है जो मार्कर के क्लस्टर को लागू करती है. यह आपके तय किए गए एल्गोरिदम, आइकॉन जनरेटर, और रेंडरर का इस्तेमाल करती है. रेंडरर बनाने और उसे मैप व्यू पर उपलब्ध कराने के लिए, सबसे पहले क्लस्टर मैनेजर इंस्टेंस को स्टोर करने के लिए, ViewController लागू करने में एक इंस्टेंस वैरिएबल जोड़ें:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

इसके बाद, viewDidLoad लाइफ़साइकल इवेंट में GMUClusterManager का इंस्टेंस बनाएं:

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

5. मार्कर जोड़ें और मार्कर क्लस्टर चलाएं.

अब जब आपके मार्कर क्लस्टर का कॉन्फ़िगरेशन कॉन्फ़िगर हो गया है, तो आपको बस addItems: को कॉल करके क्लस्टर मैनेजर के कलेक्शन को क्लस्टर करना है. इसके बाद, cluster को कॉल करके क्लस्टर का इस्तेमाल करना होगा.

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

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

खास जानकारी में, इस कदम में आपने iOS यूटिलिटी लाइब्रेरी के लिए, Google Maps SDK टूल से मार्कर क्लस्टर का इंस्टेंस कॉन्फ़िगर किया. इसके बाद, मैप पर 100 मार्कर को क्लस्टर करने के लिए इसका इस्तेमाल किया. ViewController.m में viewDidLoad लाइफ़साइकल इवेंट का डेटा अब इस तरह दिखेगा:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems:markerArray];
  [_clusterManager cluster];
}

8. उपयोगकर्ता के साथ इंटरैक्शन जोड़ें

अब आपके पास एक शानदार मैप है, जो मार्कर दिखाता है और मार्कर क्लस्टरिंग का इस्तेमाल करता है. इस कदम में, आप GMSMapViewDelegate का इस्तेमाल करके उपयोगकर्ता के इंटरैक्शन की कुछ और हैंडलिंग जोड़ेंगे. आप GMSMapViewDelegate को, व्यू कंट्रोलर पर पहले सेट कर चुके हैं. इससे आपके मैप का उपयोगकर्ता अनुभव बेहतर होगा.

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

इस चरण में, आप उपयोगकर्ता की ओर से टैप किए गए किसी भी मार्कर पर प्रोग्राम के रूप में मैप पैन करेंगे.

1. मार्कर टैप लिसनर लागू करें.

जब भी उपयोगकर्ता पहले बनाए गए किसी मार्कर पर टैप करता है, तब उन्हें mapView:didTapMarker कॉल किया जाता है. साथ ही, जब भी कोई उपयोगकर्ता मार्कर क्लस्टर पर टैप करता है (अंदरूनी मार्कर क्लस्टर GMSMarker के इंस्टेंस के रूप में लागू किए जाते हैं).

इवेंट लिसनर को लागू करने के लिए, ViewController.m के नीचे end स्टेटमेंट से पहले, इसे दबाकर शुरू करें.

आप देख पाएंगे कि यह तरीका NO को रिटर्न कर रहा है. ऐसा करने से, iOS SDK टूल, डिफ़ॉल्ट GMSMarker फ़ंक्शन को लागू करना जारी रख पाता है. जैसे, अगर कोई इवेंट कॉन्फ़िगर किया जाता है, तो आपके इवेंट हैंडलर कोड को लागू करने के बाद, जानकारी विंडो दिखती है.

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}

2. टैप वाले इवेंट को हैंडल करें. साथ ही, जब किसी मार्कर या मार्कर क्लस्टर पर टैप करें, तो कैमरे की मदद से मैप को फिर से मैप करें.

कॉल करने पर, mapView:didTapMarker टैप किए गए GMSMarker के इंस्टेंस को पास करता है. इससे आप इसे अपने कोड में हैंडल कर सकते हैं. आप इस इंस्टेंस का इस्तेमाल, इवेंट हैंडलर के अंदर मौजूद मैप व्यू पर animateToLocation: को कॉल करके और position प्रॉपर्टी में मौजूद मार्कर इंस्टेंस की स्थिति को पास करके, मैप को दोबारा सेंटर में लाने के लिए कर सकते हैं.

[_mapView animateToLocation:marker.position];

3. मार्कर क्लस्टर को टैप करने पर उसे ज़ूम इन करें.

एक आम UX पैटर्न, मार्कर क्लस्टर पर ज़ूम इन करने पर होता है. इससे उपयोगकर्ता क्लस्टर वाले मार्कर देख पाएंगे, क्योंकि क्लस्टर नीचे के ज़ूम लेवल पर बड़ा हो जाएगा.

जैसा कि पहले बताया गया है, मार्कर क्लस्टर का आइकॉन, कस्टम आइकॉन के साथ GMSMarker का सिर्फ़ लागू करना है. तो आप कैसे बता पाएंगे कि किसी मार्कर या मार्कर क्लस्टर पर टैप किया गया था या नहीं? जब मार्कर क्लस्टर का मैनेजर नया क्लस्टर आइकॉन बनाता है, तो यह GMSMarker के इंस्टेंस को लागू करता है. यह GMUCluster. नाम के प्रोटोकॉल के मुताबिक होता है. आप यह कंडीशनल इस्तेमाल करके, यह देख सकते हैं कि इवेंट हैंडलर में डाला गया मार्कर इस प्रोटोकॉल का पालन करता है या नहीं.

किसी प्रोग्राम के ज़रिए यह जानने के बाद कि ग्रुप पर टैप किया गया है, आप मैप व्यू इंस्टेंस पर animateToZoom: को कॉल कर सकते हैं और ज़ूम को मौजूदा ज़ूम लेवल और एक के लेवल पर सेट कर सकते हैं. मौजूदा ज़ूम लेवल, camera.zoom प्रॉपर्टी में मैप व्यू इंस्टेंस पर उपलब्ध है.

साथ ही, यह भी देखें कि नीचे दिया गया कोड YES कैसे दिखाता है. इससे इवेंट हैंडलर यह बताता है कि आपने इवेंट को हैंडल करना पूरा कर लिया है और हैंडलर में कोई और कोड लागू नहीं किया है. ऐसा करने की एक वजह यह है कि शामिल किए गए GMSMarker ऑब्जेक्ट को डिफ़ॉल्ट तौर पर मौजूद व्यवहार को लागू करने से रोका जा सकता है. जैसे, जानकारी विंडो दिखाना, जो क्लस्टर आइकॉन पर टैप करने के दौरान सही जानकारी नहीं देता.

if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

अब ऐप्लिकेशन को फिर से लोड करें और मार्कर और मार्कर क्लस्टर पर टैप करें. दोनों पर टैप करने पर, मैप टैप किए गए एलिमेंट पर फिर से फ़ोकस करेगा. जब मार्कर क्लस्टर पर टैप किया जाता है, तो मैप एक लेवल तक ज़ूम इन भी करेगा. साथ ही, मार्कर क्लस्टर बड़ा करके नीचे क्लस्टर मार्कर दिखेंगे.

खास जानकारी के लिए, इस चरण में आपने मार्कर टैप लिसनर को लागू किया और इवेंट को टैप किए गए एलिमेंट पर फ़ोकस करने के लिए हैंडल किया. साथ ही, अगर वह एलिमेंट मार्कर क्लस्टर का आइकॉन है, तो ज़ूम इन करें.

आपका mapView:didTapMarker तरीका कुछ ऐसा दिखना चाहिए:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

9. मैप पर ड्रॉ करें

अब तक आपने{2/} इस कोडलैब के आखिरी चरण में, आप iOS के लिए Maps SDK टूल की ड्रॉइंग सुविधा का इस्तेमाल करके, मैप के अनुभव के बारे में ज़्यादा उपयोगी जानकारी जोड़ पाएंगे.

मान लें कि इस मैप का इस्तेमाल उन उपयोगकर्ताओं के पास किया जाएगा जो सिडनी शहर को एक्सप्लोर करना चाहते हैं. मार्कर को क्लिक करने पर उसके आस-पास का दायरा विज़ुअलाइज़ करना एक उपयोगी सुविधा होगी. इसकी मदद से उपयोगकर्ता आसानी से समझ सकते हैं कि क्लिक किए गए मार्कर से पैदल आसानी से कौन-कौनसी मंज़िलें भेजी जा सकती हैं.

iOS SDK में मैप पर आकार बनाने के लिए फ़ंक्शन का सेट शामिल होता है, जैसे कि वर्ग, पॉलीगॉन, रेखाएं, और गोले. इसके बाद, क्लिक किए जाने पर मार्कर के आस-पास 800 मीटर (करीब आधा मील) का दायरा दिखाने के लिए एक गोले का रेंडर होगा.

1. ViewController लागू करने के लिए _circ इंस्टेंस वैरिएबल जोड़ें.

इस इंस्टेंस वैरिएबल का इस्तेमाल, हाल ही में ड्रॉ किए गए सर्कल को सेव करने के लिए किया जाता है, ताकि दूसरा ऑब्जेक्ट बनने से पहले उसे नुकसान पहुंचाया जा सके. आखिर में, यह उपयोगकर्ता के लिए बहुत मददगार नहीं होगा और अगर हर बार टैप किया हुआ कोई मार्कर गोल घेरा बना हो, तो वह बहुत खराब दिखेगा!

ऐसा करने के लिए, ViewController के लागू किए जाने के इस तरीके को अपडेट करें:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}

2. मार्कर पर टैप किए जाने पर सर्कल बनाएं.

mapView:didTapMarker तरीके के नीचे, iOS SDK's GMSCircle क्लास का इंस्टेंस बनाने के लिए, नीचे दिया गया कोड जोड़ें. इससे circleWithPosition:radius: को कॉल करके, 800 मीटर के दायरे वाला नया सर्कल बनाया जा सकता है. साथ ही, टैप किए गए मार्कर की पोज़िशन को पास किया जा सकता है, जैसा कि आपने मैप को हाल ही में हाल ही में किया था.

_circ = [GMSCircle circleWithPosition:marker.position radius:800];

3. गोले के स्टाइल को बनाएं.

GMSCircle डिफ़ॉल्ट रूप से, काले रंग का स्ट्रोक और पारदर्शी फ़िल वाला सर्कल बनाता है. यह त्रिज्या दिखाने के लिए काम करेगा, लेकिन यह बहुत अच्छा नहीं लगता, और देखने में थोड़ा मुश्किल है. इसके बाद, सर्कल की fillColor प्रॉपर्टी को UIColor असाइन करके, स्टाइल को बेहतर बनाने के लिए सर्कल को फ़िल कलर दें. नीचे दिए गए कोड में, स्लेटी रंग का फ़िल 50% पारदर्शिता वाला दिखेगा:

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

4. मैप पर गोले को रेंडर करें.

जिस तरह आप पहले मार्कर बनाते हैं, उसी तरह GMSCircle'ध्यान देंगे कि सिर्फ़ GMSCircle का इंस्टेंस बनाने से वह मैप पर दिखाई नहीं देता है. ऐसा करने के लिए, बस सर्कल की map प्रॉपर्टी को मैप व्यू इंस्टेंस असाइन करें.

_circ.map = _mapView;

5. पहले से रेंडर की गई सभी मंडलियां हटाएं.

जैसा कि पहले बताया गया है, मैप में मंडलियों को शामिल करते रहना एक अच्छा उपयोगकर्ता अनुभव नहीं होता है. किसी पिछले टैप इवेंट से रेंडर किए गए सर्कल को हटाने के लिए, _circ की map प्रॉपर्टी को mapView:didTapMarker के ऊपर nil पर सेट करें.

_circ.map = nil;

ऐप्लिकेशन को फिर से लोड करें और मार्कर पर टैप करें. जब भी कोई मार्कर टैप किया जाए और पहले से रेंडर किया गया कोई भी सर्कल हटाया जाए, तो आपको एक नया सर्कल दिखता है.

खास जानकारी के लिए, इस चरण में किसी मार्कर पर टैप करके, आप सर्कल को रेंडर करने के लिए GMSCircle क्लास का इस्तेमाल करते हैं.

mapView:didTapMarker तरीके को कुछ इस तरह दिखना चाहिए:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10. बधाई हो

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

पूरा हो चुका कोड देखने के लिए, देखें कि तैयार किया गया प्रोजेक्ट /solution डायरेक्ट्री है या नहीं.

आगे क्या करना है?

इस कोडलैब में, हमने सिर्फ़ उन बुनियादी बातों को शामिल किया है जो आप iOS के लिए Maps SDK टूल से कर सकते हैं. इसके बाद, मैप में इनमें से कुछ सुविधाएं जोड़ने की कोशिश करें:

• सैटलाइट, हाइब्रिड, और इलाके के मैप दिखाने के लिए मैप का टाइप बदलें.
• ज़ूम और मैप कंट्रोल जैसे दूसरे उपयोगकर्ता इंटरैक्शन को पसंद के मुताबिक बनाएं.
• मार्कर पर क्लिक होने पर जानकारी दिखाने के लिए जानकारी विंडो जोड़ें.
• अपने ऐप्लिकेशन में रिच Google Maps Platform स्थान सुविधाएं और डेटा जोड़ने के लिए iOS के लिए स्थल SDK देखें.

वेब पर Google Maps Platform के साथ काम करने के ज़्यादा तरीकों के बारे में जानने के लिए, ये लिंक देखें:

• iOS दस्तावेज़ के लिए Maps SDk
• Google Maps Platform YouTube चैनल
• Google Maps Platform कोडलैब (कोड बनाना सीखना)
• GitHub पर Google Maps Platform ओपन सोर्स प्रोजेक्ट