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

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

32 मिनट बाकी हैं

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

पिछली बार मई 11, 2022 को अपडेट किया गया

Angela Yu ने लिखा

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

iOS ऐप्लिकेशन में मार्कर के साथ मैप

ज़रूरी बातें

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

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

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

आपको इनकी ज़रूरत होगी

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

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

2. सेट अप करें

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

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

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

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

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

क्विकस्टार्ट

इसे शुरू करने में आपकी मदद करने के लिए, यहां कुछ # कोड दिया गया है, ताकि इस कोडलैब के साथ आपको मदद मिल सके.

अगर आपने git इंस्टॉल किया हुआ है, तो रिपॉज़िटरी क्लोन करें.

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

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

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

पूरा समाधान कोड चलाने के लिए, /solution/SolutionApp डायरेक्ट्री में पूरा हो चुका कोड देखें.

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

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

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

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

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

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

SDK टूल के सबसे नए वर्शन और रखरखाव के दिशा-निर्देश के लिए, 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

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

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

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

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

import GoogleMaps

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 को उस API (एपीआई) कुंजी से बदलें जिसे आपने Cloud Console में बनाया है.

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

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

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

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

ViewController.swift खोलें.

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

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

import GoogleMaps

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

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

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

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

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

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

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

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

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

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

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

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

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

class ViewController: UIViewController, GMSMapViewDelegate

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

    mapView.delegate = self

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

iOS ऐप्लिकेशन, जिस पर Google मैप दिख रहा है

पहला डायग्राम. iOS ऐप्लिकेशन के लिए Google Maps.

खास जानकारी के लिए, आपने ऑस्ट्रेलिया के सिडनी शहर का मैप दिखाने के लिए 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. मैप की शैली (वैकल्पिक)

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

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

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

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

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

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

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. मैप में मार्कर जोड़ें

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

लाल मार्कर वाला मैप

दूसरा डायग्राम. लाल मार्कर वाला मैप.

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

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

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)

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

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

    let marker = GMSMarker(position: mapCenter)

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

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

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

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

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

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

    marker.map = mapView

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

iOS ऐप्लिकेशन, जिसके बीच में लाल मार्कर वाला Google Maps है

चित्र 3. iOS ऐप्लिकेशन, जिसके बीच में लाल मार्कर वाला Google Maps है.

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

  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. मार्कर क्लस्टर चालू करना

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

दो मार्कर एक-दूसरे के बहुत करीब हैं

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

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

एक आइकॉन में क्लस्टर किए गए मार्कर का उदाहरण

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

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

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

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

अपने मैप में मार्कर की कोई खास संख्या जोड़ने के लिए, व्यू कंट्रोलर's 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
    }

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

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

import GoogleMapsUtils

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

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

अगर आप चाहें, तो इन सभी को शुरुआत से लिख सकते हैं. हालांकि, 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)

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)

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

अब जब आपका मार्कर क्लस्टर कॉन्फ़िगर हो गया है, तो क्लस्टर मैनेजर को add(items:) का कॉल करके क्लस्टर की कैटगरी पास करें, और फिर cluster को कॉल करके क्लस्टर का इस्तेमाल करें.

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

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

Google Maps और क्लस्टर मार्कर के साथ iOS ऐप्लिकेशन

चित्र 6. iOS मैप, Google मैप और क्लस्टर किए गए मार्कर.

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

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

इस कदम में, उपयोगकर्ता को जिस मार्कर से टैप किया जाता है उसे मैप पर सेंटर में रखें.

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

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

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

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

    return false
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

class ViewController: UIViewController, GMSMapViewDelegate {

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

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

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)

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

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

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

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

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

    circle?.map = mapView

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

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

    // Clear previous circles
    circle?.map = nil

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

टैप किए गए मार्कर के चारों ओर बना सर्कल

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

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

आपने #39;एक iOS ऐप्लिकेशन बनाया है, जिसमें इंटरैक्टिव Google मैप है.

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

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

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

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

आप कौनसे अन्य कोडलैब देखना चाहते हैं?

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

क्या वह कोडलैब ऊपर सूची में दिया गया है जो आप ऊपर नहीं देना चाहते हैं? नई समस्या के लिए, यहां अनुरोध करें.

गलती की शिकायत करें