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

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

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

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

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

• Swift और iOS डेवलपमेंट की बुनियादी जानकारी.

आपको क्या करना होगा

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

आपको किन चीज़ों की ज़रूरत होगी

इस कोडलैब को पूरा करने के लिए, आपके पास ये खाते, सेवाएं, और टूल होने चाहिए:

• Xcode 12.0 या उसके बाद का वर्शन, जिसमें टारगेट एसडीके 12.0 या उसके बाद का वर्शन हो.
• Cocoapods इंस्टॉल हो.
• बिलिंग की सुविधा वाला Google Cloud Platform खाता (अगला चरण देखें).
• Cloud Console में ऐसा प्रोजेक्ट जिसमें iOS के लिए Maps SDK चालू हो. इसके बारे में अगले चरण में बताया गया है.

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. अगर आपने git इंस्टॉल किया है, तो रिपॉज़िटरी को क्लोन करें.

git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

इसके अलावा, सोर्स कोड डाउनलोड करने के लिए, मुझे कोड दें पर क्लिक करें.

मुझे कोड दें

2. कोड डाउनलोड करने के बाद, /starter डायरेक्ट्री में StarterApp प्रोजेक्ट खोलें. इस प्रोजेक्ट में, वह बेसिक फ़ाइल स्ट्रक्चर शामिल है जो कोडलैब को पूरा करने के लिए ज़रूरी है. काम करने के लिए आपको जो भी चीज़ें चाहिए वे सब /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 या अपने पसंदीदा टेक्स्ट एडिटर में Podfile खोलें. इसके बाद, फ़ाइल को अपडेट करके, # Pods for StarterApp टिप्पणी में Maps SDK for iOS और Utility Library की डिपेंडेंसी शामिल करें:

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

एसडीके के नए वर्शन और रखरखाव से जुड़ी गाइड के लिए, iOS के लिए Maps SDK के वर्शन का दस्तावेज़ देखें.

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

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

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end

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

ज़रूरी सॉफ़्टवेयर इंस्टॉल करने के लिए, कमांड लाइन से /starter डायरेक्ट्री में pod install चलाएं. Cocoapods, डिपेंडेंसी को अपने-आप डाउनलोड कर लेता है और StarterApp.xcworkspace बना देता है.

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

डिपेंडेंसी इंस्टॉल हो जाने के बाद, एसडीके को अपना एपीआई पासकोड दें. पहला चरण, iOS के लिए Maps SDK को डिपेंडेंसी के तौर पर इंपोर्ट करना है. इसके लिए, import UIKit इंपोर्ट स्टेटमेंट के नीचे यह कोड डालें:

import GoogleMaps

5. application: didFinishLaunchingWithOptions: में GMSServices पर provideAPIKey को कॉल करके, iOS SDK को अपना एपीआई पासकोड पास करें

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

अपडेट की गई आपकी AppDelegate.swift फ़ाइल अब ऐसी दिखनी चाहिए:

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

YOUR_API_KEY को उस एपीआई पासकोड से बदलें जिसे आपने Cloud Console में बनाया है.

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

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

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

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

1. ViewController.swift खोलें.

इस कोडलैब का बाकी काम यहीं किया जाएगा. व्यू कंट्रोलर के लिए, सूचना loadView और viewDidLoad लाइफ़साइकल इवेंट पहले से ही स्टब किए गए हैं.

2. फ़ाइल में सबसे ऊपर यह कोड जोड़कर, iOS के लिए Maps SDK इंपोर्ट करें:

import GoogleMaps

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

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

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

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

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

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)

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

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

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

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView

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

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

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

class ViewController: UIViewController, GMSMapViewDelegate

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

    mapView.delegate = self

अब iOS सिम्युलेटर (Command+R) में ऐप्लिकेशन को फिर से लोड करें. इसके बाद, मैप को नीचे दिए गए स्क्रीनशॉट में दिखाए गए तरीके से दिखना चाहिए:

पहली इमेज. iOS ऐप्लिकेशन में Google मैप दिखाया गया है.

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

आपकी ViewController.swift फ़ाइल अब ऐसी दिखनी चाहिए:

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5. मैप की स्टाइल तय करना (ज़रूरी नहीं)

क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करके, अपने मैप में मनमुताबिक स्टाइल जोड़े जा सकते हैं.

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

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

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

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

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

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

ViewController.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

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

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

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

दूसरी इमेज. लाल मार्कर वाला मैप.

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

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

1. CLLocationCoordinate2D ऑब्जेक्ट तय करें.

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

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)

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

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

    let marker = GMSMarker(position: mapCenter)

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

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

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

    marker.icon = UIImage(named: "custom_pin.png")

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

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

    marker.map = mapView

अब ऐप्लिकेशन को फिर से लोड करें और तीसरी इमेज में दिखाए गए तरीके से, मार्कर के साथ अपना पहला मैप देखें!

तीसरी इमेज. iOS ऐप्लिकेशन में Google Maps दिख रहा है. इसके बीच में लाल रंग का मार्कर है.

कम शब्दों में कहा जाए, तो इस सेक्शन में आपने GMSMarker क्लास का एक इंस्टेंस बनाया और उसे मैप व्यू पर लागू किया, ताकि मैप पर एक मार्कर दिखाया जा सके. ViewController.swift में अपडेट किया गया viewDidLoad लाइफ़साइकल इवेंट अब ऐसा दिखना चाहिए:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

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

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

चौथी इमेज. दो मार्कर एक-दूसरे के बहुत करीब हैं.

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

पांचवीं इमेज. एक ही आइकॉन में क्लस्टर किए गए मार्कर का उदाहरण.

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

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

मार्कर क्लस्टरिंग की सुविधा का इस्तेमाल करने के लिए, मैप पर कई मार्कर होने चाहिए. इस प्रोसेस को आसान बनाने के लिए, MarkerGenerator.swift में दिए गए स्टार्टर प्रोजेक्ट में मौजूद मार्कर जनरेटर का इस्तेमाल करें.

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

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

markerArray की परिभाषा के बाद इन लाइनों को जोड़कर, यह जांच की जा सकती है कि इतने मार्कर कैसे दिखते हैं. इसके बाद, ऐप्लिकेशन चलाएं. अगले चरणों पर जाने से पहले, इन लाइनों को टिप्पणी के तौर पर मार्क करना न भूलें. अगले चरणों में, मार्कर दिखाने की सुविधा को मैनेज करने के लिए, मार्कर क्लस्टरर का इस्तेमाल किया जाता है:

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }

2. iOS के लिए Google Maps SDK की यूटिलिटी लाइब्रेरी इंपोर्ट करें.

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

import GoogleMapsUtils

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

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

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

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)

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

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

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

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

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

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

मार्कर क्लस्टरर इंस्टेंस कॉन्फ़िगर हो जाने के बाद, क्लस्टर मैनेजर को मार्कर का वह ऐरे पास करें जिसे क्लस्टर करना है. इसके लिए, add(items:) को कॉल करें. इसके बाद, क्लस्टरर को चलाने के लिए cluster को कॉल करें.

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

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

छठी इमेज. Google Maps और क्लस्टर किए गए मार्कर के साथ iOS ऐप्लिकेशन.

कम शब्दों में समझें, तो इस चरण में आपने Google Maps SDK for iOS Utility Library से मार्कर क्लस्टरर के इंस्टेंस को कॉन्फ़िगर किया. इसके बाद, इसका इस्तेमाल करके मैप पर 100 मार्कर को क्लस्टर किया. ViewController.swift में आपका viewDidLoad लाइफ़साइकल इवेंट अब ऐसा दिखेगा:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

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

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

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

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

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

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

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

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

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

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

कॉल किए जाने पर, mapView(_:didTap:) उस GMSMarker का इंस्टेंस पास करता है जिस पर टैप किया गया था, ताकि आप इसे अपने कोड में मैनेज कर सकें. इस इंस्टेंस का इस्तेमाल करके, मैप को रीसेंटर किया जा सकता है. इसके लिए, इवेंट हैंडलर में जाकर मैप व्यू पर animate(toLocation:) को कॉल करें. साथ ही, position प्रॉपर्टी से मार्कर इंस्टेंस की पोज़िशन पास करें.

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

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

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

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

जब आपको प्रोग्राम के हिसाब से यह पता चल जाए कि किसी क्लस्टर पर टैप किया गया है, तब मैप व्यू इंस्टेंस पर animate(toZoom:) को कॉल किया जा सकता है. साथ ही, ज़ूम लेवल को मौजूदा ज़ूम लेवल से एक ज़्यादा पर सेट किया जा सकता है. ज़ूम का मौजूदा लेवल, mapView इंस्टेंस पर camera.zoom प्रॉपर्टी में उपलब्ध होता है.

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

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

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

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

आपका mapView(_:didTap:) तरीका ऐसा दिखना चाहिए:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

9. मैप पर जानकारी देने के लिए ड्रॉ करना

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

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

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

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

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

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

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}

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

return false स्टेटमेंट से ठीक ऊपर मौजूद mapView(_:didTap:) तरीके के सबसे नीचे, यहां दिखाया गया कोड जोड़ें. इससे iOS SDK की GMSCircle क्लास का एक इंस्टेंस बनाया जा सकेगा. इससे GMSCircle(position:radius:) को कॉल करके, 800 मीटर के दायरे वाला एक नया सर्कल बनाया जा सकेगा. साथ ही, टैप किए गए मार्कर की पोज़िशन को पास किया जा सकेगा. ऐसा ही आपने मैप को फिर से सेंटर में लाने के दौरान किया था.

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)

3. सर्कल को स्टाइल करें.

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

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)

4. मैप पर सर्कल रेंडर करें.

जैसे आपने पहले मार्कर बनाए थे, वैसे ही GMSCircle का इंस्टेंस बनाने से, वह मैप पर नहीं दिखता. इसके लिए, मैप व्यू इंस्टेंस को सर्कल की map प्रॉपर्टी असाइन करें.

    circle?.map = mapView

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

जैसा कि हमने पहले बताया था, मैप में लगातार सर्कल जोड़ने से उपयोगकर्ता अनुभव अच्छा नहीं रहेगा. पिछली बार टैप करने पर रेंडर किए गए सर्कल को हटाने के लिए, mapView(_:didTap:) के सबसे ऊपर मौजूद circle की map प्रॉपर्टी को nil पर सेट करें.

    // Clear previous circles
    circle?.map = nil

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

सातवीं इमेज. टैप किए गए मार्कर के चारों ओर एक सर्कल बनाया गया है.

कम शब्दों में समझें, तो इस चरण में आपने GMSCircle क्लास का इस्तेमाल किया. इससे, मार्कर पर टैप करने पर एक सर्कल रेंडर होता है.

mapView(_:didTap:) तरीका कुछ ऐसा दिखना चाहिए:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. बधाई हो

आपने इंटरैक्टिव Google मैप की सुविधा वाला iOS ऐप्लिकेशन बना लिया है.

आपने क्या सीखा

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

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

• ज़्यादा प्रेरणा पाने के लिए, maps-sdk-for-ios-samples GitHub रिपॉज़िटरी में मौजूद सैंपल और डेमो देखें या उसे फ़ोर्क करें
• Google Maps Platform की मदद से iOS ऐप्लिकेशन बनाने के लिए, ज़्यादा Swift कोडलैब से सीखें
• नीचे दिए गए सर्वे के सवालों के जवाब दें, ताकि हम आपके लिए सबसे काम का कॉन्टेंट बना सकें:

आपको और कौनसे कोडलैब देखने हैं?

मैप पर डेटा विज़ुअलाइज़ेशन अपने मैप की स्टाइल को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानकारी मैप में 3D इंटरैक्शन के लिए बिल्डिंग

क्या आपको अपनी पसंद का कोडलैब नहीं मिल रहा है? यहां नई समस्या के साथ इसका अनुरोध करें.