अपने iOS ऐप्लिकेशन (Objective-C) में मैप जोड़ना

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

खास जानकारी

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

आपको क्या बनाना है

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

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

आपको क्या सीखने को मिलेगा

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

ज़रूरी शर्तें

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

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

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

• iOS के लिए Maps SDK टूल
• iOS के लिए 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 खाता
• Maps SDK for iOS की सुविधा वाला Google Maps Platform API पासकोड
• Objective-C की बुनियादी जानकारी
• Xcode 12.0, जिसमें टारगेट SDK 12.0 या उसके बाद का वर्शन हो

2. सेट अप करें

नीचे दिए गए तरीके को चालू करने के लिए, आपको iOS के लिए Maps SDK चालू करना होगा.

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

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

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

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

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

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

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

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

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

3. iOS के लिए Maps SDK इंस्टॉल करना

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

1. Maps SDK for iOS और Maps SDK for iOS Utility Library को Podfile में जोड़ें.

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

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

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

2. iOS के लिए Maps SDK और iOS के लिए Maps SDK Utility Library पॉड इंस्टॉल करें.

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

डिपेंडेंसी इंस्टॉल हो जाने के बाद, एसडीके को अपना एपीआई पासकोड दें. पहला चरण, 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

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

4. मैप डिसप्ले करना

अब बारी है अपना पहला मैप डिसप्ले करने की!

Maps SDK for iOS का सबसे ज़्यादा इस्तेमाल किया जाने वाला क्लास GMSMapView है. यह क्लास, कई ऐसे तरीके उपलब्ध कराता है जिनकी मदद से मैप इंस्टेंस बनाए और उनमें बदलाव किए जा सकते हैं. ऐसा करने का तरीका यहां बताया गया है.

1. ViewController.m खोलें.

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

@import GoogleMaps;

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

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

@implementation ViewController {
  GMSMapView *_mapView;
}

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

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

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

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

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

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

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

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

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

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

@interface ViewController ()<GMSMapViewDelegate>

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

_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 पर मैप आईडी का इस्तेमाल करने से एक मैप लोड शुरू हो जाता है. इसके लिए, Dynamic Maps एसकेयू के तहत शुल्क देना पड़ता है. ज़्यादा जानकारी के लिए, Google Maps के लिए बिलिंग की जानकारी देखें.

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

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

ViewController.m

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

यह प्रोसेस पूरी करने के बाद, ऐप्लिकेशन चलाएं और अपने चुने गए स्टाइल में मैप देखें!

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

Maps SDK for iOS का इस्तेमाल करते समय, डेवलपर कई काम करते हैं, लेकिन मैप पर मार्कर लगाना उनके अहम कामों में से एक है. मार्कर की मदद से, मैप पर खास जगहों को हाइलाइट किया जा सकता है. साथ ही, यह एक ऐसा यूज़र इंटरफ़ेस (यूआई) एलिमेंट है जिससे बहुत ज़्यादा उपयोगकर्ता इंटरैक्ट करते हैं. अगर आपने पहले Google Maps का इस्तेमाल किया है, तो आपको शायद डिफ़ॉल्ट मार्कर के बारे में पता होगा. यह इस तरह दिखता है:

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

ध्यान दें कि व्यू कंट्रोलर के loadView लाइफ़साइकल इवेंट में, मैप लोड होने के बाद ही मैप पर मार्कर लगाए जा सकते हैं. इसलिए, आपको ये चरण 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 ऑब्जेक्ट पास किया जाता है, ताकि एसडीके को यह पता चल सके कि मैप पर मार्कर कहां रखना है.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

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

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

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

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

4. मार्कर को मैप पर रेंडर करें.

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

marker.map = _mapView;

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

कम शब्दों में कहा जाए, तो इस सेक्शन में आपने GMSMarker क्लास का एक इंस्टेंस बनाया और उसे मैप व्यू पर लागू किया, ताकि मैप पर एक मार्कर दिखाया जा सके. 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;
}

7. मार्कर क्लस्टरिंग की सुविधा चालू करना

कई बार बहुत सारे मार्कर का इस्तेमाल किए जाने पर या कई मार्कर का एक-दूसरे के बहुत करीब होने पर, आपको समस्याओं का सामना करना पड़ सकता है. आपके मार्कर ओवरलैप हो सकते हैं या एक-दूसरे के ऊपर चढ़े हुए दिख सकते हैं. इससे उपयोगकर्ता का अनुभव भी खराब होता है. उदाहरण के लिए, अगर दो मार्कर एक-दूसरे के बहुत करीब हैं, तो आपको इस तरह की समस्या का सामना करना पड़ सकता है:

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

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

1. मैप में कई और मार्कर जोड़ें.

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

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

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

2. iOS के लिए 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];

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

कम शब्दों में समझें, तो इस चरण में आपने Google Maps SDK for iOS Utility Library से मार्कर क्लस्टरर के इंस्टेंस को कॉन्फ़िगर किया. इसके बाद, इसका इस्तेमाल करके मैप पर 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 का इस्तेमाल करके, उपयोगकर्ता के इंटरैक्शन से जुड़ी कुछ और सुविधाएं जोड़नी होंगी. आपने इसे पहले व्यू कंट्रोलर पर सेट किया था, ताकि आपके मैप पर उपयोगकर्ताओं को बेहतर अनुभव मिल सके.

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

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

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

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

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

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

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

  return NO;
}

2. मार्कर या मार्कर क्लस्टर पर टैप किए जाने पर, टैप इवेंट को हैंडल करें और मैप को रीसेंटर करने के लिए कैमरे को ऐनिमेट करें.

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

[_mapView animateToLocation:marker.position];

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

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

जैसा कि पहले बताया गया है, मार्कर क्लस्टर आइकॉन, कस्टम आइकॉन के साथ 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. मैप पर जानकारी देने के लिए ड्रॉ करना

फ़िलहाल, आपने सिडनी का एक मैप बना लिया है. इसमें 100 रैंडम पॉइंट पर मार्कर मौजूद हैं और जिस पर उपयोगकर्ता के इंटरैक्शन को भी मैनेज किया जाता है. इस कोडलैब के आखिरी चरण में, आपको Maps SDK for iOS की ड्रॉइंग सुविधाओं का इस्तेमाल करके, अपने मैप में एक और मददगार सुविधा जोड़ने का मौका मिलेगा.

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

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

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

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

इसके लिए, ViewController को इस तरह से लागू करें:

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

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

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

_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 का इंस्टेंस बनाने से, वह मैप पर नहीं दिखता. इसके लिए, मैप व्यू इंस्टेंस को सर्कल की map प्रॉपर्टी पर असाइन करें.

_circ.map = _mapView;

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

जैसा कि हमने पहले बताया था, मैप में सिर्फ़ सर्कल जोड़ते रहने से, उपयोगकर्ता को अच्छा अनुभव नहीं मिलेगा. पिछली बार टैप करने पर रेंडर किए गए सर्कल को हटाने के लिए, mapView:didTapMarker के सबसे ऊपर मौजूद _circ की map प्रॉपर्टी को 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 for iOS लोड करना, मैप लोड करना, मार्कर इस्तेमाल करना, मैप पर ड्रॉइंग करना, उसे कंट्रोल करना, और उपयोगकर्ता के इंटरैक्शन जोड़ना सीखा.

पूरा कोड देखने के लिए, /solution डायरेक्ट्री में जाकर देखें.

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

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

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

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

• iOS के लिए Maps SDK का दस्तावेज़
• Google Maps Platform का YouTube चैनल
• Google Maps Platform का कोडलैब
• Google Maps Platform के लिए, GitHub पर मौजूद ओपन सोर्स प्रोजेक्ट