Kotlin 04.1 में बेहतर Android: Android Google Maps

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

Google Maps की मदद से ऐप्लिकेशन बनाने से, आपको अपने ऐप्लिकेशन में सैटलाइट से ली गई तस्वीरों, मैप के लिए बेहतरीन यूज़र इंटरफ़ेस (यूआई) कंट्रोल, जगह की जानकारी को ट्रैक करने, और जगह की जानकारी मार्कर की सुविधाएं मिलती हैं. अपने डेटासेट से जानकारी दिखाकर, स्टैंडर्ड Google Maps को बेहतर बनाया जा सकता है. इस जानकारी में मछली पकड़ने या चढ़ाई करने के लिए मशहूर जगहें शामिल हैं. इसमें ऐसे गेम भी बनाए जा सकते हैं जिनमें खिलाड़ी असली दुनिया को एक्सप्लोर करे. जैसे, ख़ज़ाने की खोज या ऑगमेंटेड रिएलिटी (एआर) वाले गेम.

इस लेसन में, वॉन्डर नाम का Google Maps ऐप्लिकेशन बनाया गया है. यह ऐप्लिकेशन, पसंद के मुताबिक बनाए गए मैप दिखाता है और उपयोगकर्ता की जगह की जानकारी दिखाता है.

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

इनके बारे में जानकारी:

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

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

  • Google API कंसोल से API कुंजी पाने और अपने ऐप्लिकेशन के लिए कुंजी रजिस्टर करने का तरीका
  • अपने ऐप्लिकेशन में Google Maps जोड़ने का तरीका
  • अलग-अलग तरह के मैप दिखाने का तरीका
  • Google Maps की स्टाइल तय करने का तरीका
  • अपने मैप पर मार्कर जोड़ने का तरीका
  • उपयोगकर्ता को लोकप्रिय जगह (पीओआई) पर मार्कर लगाने की सुविधा कैसे दें
  • जगह की जानकारी ट्रैक करने की सुविधा चालू करने का तरीका
  • Wander ऐप्लिकेशन बनाने का तरीका, जिसमें Google Maps एम्बेड किया गया है
  • अपने ऐप्लिकेशन के लिए पसंद के मुताबिक सुविधाएं बनाने का तरीका. जैसे, मार्कर और स्टाइलिंग
  • अपने ऐप्लिकेशन में जगह की जानकारी ट्रैक करने की सुविधा चालू करने का तरीका

2. ऐप्लिकेशन की खास जानकारी

इस कोडलैब में, Wander ऐप्लिकेशन बनाया जाता है, जो पसंद के मुताबिक स्टाइल के साथ Google मैप दिखाता है. Wander ऐप्लिकेशन आपको जगहों पर मार्कर लगाने, ओवरले जोड़ने, और रीयल टाइम में अपनी जगह देखने की सुविधा देता है.

5b12eda7f467bc2f.png

3. टास्क: प्रोजेक्ट सेट अप करें और एपीआई पासकोड पाएं

Android के लिए Maps SDK टूल इस्तेमाल करने के लिए, एपीआई पासकोड ज़रूरी है. एपीआई पासकोड पाने के लिए, अपना प्रोजेक्ट एपीआई और सेवाओं वाला पेज. एपीआई पासकोड ऐसे डिजिटल सर्टिफ़िकेट से जुड़ा होता है जो ऐप्लिकेशन को उसके लेखक से लिंक करता है. डिजिटल सर्टिफ़िकेट का इस्तेमाल करने और अपने ऐप्लिकेशन पर हस्ताक्षर करने के बारे में ज़्यादा जानकारी के लिए, अपने ऐप्लिकेशन पर हस्ताक्षर करना देखें.

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

Android Studio में Google Maps पर की गई गतिविधि का टेंप्लेट शामिल है, जो मददगार टेंप्लेट कोड जनरेट करता है. टेंप्लेट कोड में google_maps_api.xml फ़ाइल शामिल होती है. इसमें एक लिंक होता है, जिससे एपीआई पासकोड हासिल करने की प्रोसेस आसान हो जाती है.

पहला चरण: मैप टेंप्लेट की मदद से वॉन्डर प्रोजेक्ट बनाना

  1. नया Android Studio प्रोजेक्ट बनाएं.
  2. Google Maps गतिविधि टेंप्लेट चुनें.

d6b874bb19ea68cd.png

  1. प्रोजेक्ट को Wander नाम दें.
  2. एपीआई लेवल के कम से कम लेवल को API 19 पर सेट करें. पक्का करें कि भाषा Kotlin हो.
  3. पूरा करें पर क्लिक करें.
  4. ऐप्लिकेशन बनाने के बाद, अपने प्रोजेक्ट और Android Studio से आपके लिए बनाई गई मैप से जुड़ी इन फ़ाइलों पर एक नज़र डालें:

google_maps_api.xml—इस कॉन्फ़िगरेशन फ़ाइल का इस्तेमाल, अपने एपीआई पासकोड को होल्ड करने के लिए किया जाता है. टेंप्लेट दो google_maps_api.xml फ़ाइलें जनरेट करता है: एक डीबग के लिए और दूसरी रिलीज़ के लिए. डीबग सर्टिफ़िकेट के लिए, एपीआई पासकोड की फ़ाइल src/debug/res/values में मौजूद होती है. रिलीज़ सर्टिफ़िकेट के लिए एपीआई पासकोड की फ़ाइल, src/release/res/values में मौजूद होती है. इस कोडलैब में, सिर्फ़ डीबग सर्टिफ़िकेट का इस्तेमाल किया जाता है.

activity_maps.xml—इस लेआउट फ़ाइल में एक फ़्रैगमेंट होता है, जो पूरी स्क्रीन पर मौजूद होता है. SupportMapFragment क्लास, Fragment क्लास की सब-क्लास है. SupportMapFragment किसी ऐप्लिकेशन में मैप रखने का सबसे आसान तरीका है. यह एक रैपर होता है, जो मैप के व्यू के चारों ओर मौजूद होता है. इससे लाइफ़साइकल की ज़रूरी ज़रूरतों को अपने-आप पूरा किया जा सकता है.

किसी भी ViewGroup में <fragment> टैग का इस्तेमाल करके, लेआउट फ़ाइल में SupportMapFragment को शामिल किया जा सकता है. इसके लिए, name एट्रिब्यूट का इस्तेमाल भी किया जा सकता है.

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java—MapsActivity.java फ़ाइल, onCreate() तरीके में SupportMapFragment को इंस्टैंशिएट करती है और क्लास का इस्तेमाल करती है मैप सिस्टम और व्यू को अपने-आप शुरू करने के लिए, getMapAsync(). SupportMapFragment वाली गतिविधि के लिए, OnMapReadyCallback इंटरफ़ेस और उस इंटरफ़ेस के onMapReady() तरीके को लागू करना ज़रूरी है. मैप लोड होने पर, onMapReady() तरीके को कॉल किया जाता है.

दूसरा चरण: एपीआई पासकोड पाना

  1. google_maps_api.xml फ़ाइल का डीबग वर्शन खोलें.
  2. फ़ाइल में, लंबे यूआरएल वाली टिप्पणी ढूंढें. यूआरएल के पैरामीटर में आपके ऐप्लिकेशन के बारे में खास जानकारी शामिल होती है.
  3. यूआरएल को कॉपी करके किसी ब्राउज़र में चिपकाएं.
  4. एपीआई और एपीआई पर प्रोजेक्ट बनाने के लिए, एपीआई और सेवाओं वाला पेज. दिए गए यूआरएल में दिए गए पैरामीटर की वजह से, यह पेज Android के लिए Maps SDK टूल को अपने-आप चालू कर लेता है.
  5. एपीआई पासकोड बनाएं पर क्लिक करें.
  6. अगले पेज पर, एपीआई पासकोड सेक्शन पर जाएं और उस पासकोड पर क्लिक करें जिसे आपने अभी-अभी बनाया है.
  7. कुंजी का इस्तेमाल Android ऐप्लिकेशन तक सीमित करने के लिए, कुंजी पर पाबंदी लगाएं पर क्लिक करें और Android के लिए Maps SDK टूल चुनें.
  8. जनरेट की गई एपीआई पासकोड कॉपी करें. यह "AIza" से शुरू होता है.
  9. google_maps_api.xml फ़ाइल में, कुंजी को google_maps_key स्ट्रिंग में वहां चिपकाएं जहां YOUR_KEY_HERE लिखा हो.
  10. अपना ऐप्लिकेशन चलाएं. आपको अपनी गतिविधि में एम्बेड किया गया एक मैप दिखेगा, जिसमें सिडनी, ऑस्ट्रेलिया में मार्कर सेट किया गया होगा. (सिडनी मार्कर टेम्प्लेट का हिस्सा है और आप इसे बाद में बदल सकते हैं.)

34dc9dd877c90996.png

तीसरा चरण: mMap का नाम बदलें

MapsActivity में mMap नाम का एक निजी lateinit var है, जो GoogleMap टाइप का है. Kotlin में नाम रखने के कन्वेंशन फ़ॉलो करने के लिए, mMap का नाम बदलकर map करें.

  1. MapsActivity में, mMap पर राइट क्लिक करें. इसके बाद, रिफ़ैक्टर पर क्लिक करें > नाम बदलें...

e713ccb3384450c6.png

  1. वैरिएबल का नाम बदलकर map करें.

ध्यान दें कि onMapReady() फ़ंक्शन में mMap के सभी रेफ़रंस, map में कैसे बदलते हैं.

4. टास्क: मैप के टाइप जोड़ें

Google Maps में कई तरह के मैप होते हैं: सामान्य, हाइब्रिड, सैटलाइट, इलाके, और "कोई नहीं" (किसी भी मैप के न होने के लिए).

सामान्य मैप

सैटलाइट मैप

हाइब्रिड मैप

इलाके का मैप

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

इस टास्क में आपको:

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

मैप टाइप के लिए मेन्यू जोड़ें

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

  1. नई मेन्यू एक्सएमएल फ़ाइल बनाने के लिए, अपनी res डायरेक्ट्री पर राइट क्लिक करें और नई > चुनें Android संसाधन फ़ाइल.
  2. डायलॉग में, फ़ाइल को map_options नाम दें.
  3. रिसॉर्स टाइप के लिए, मेन्यू चुनें.
  4. ठीक है पर क्लिक करें.
  5. मैप मेन्यू के विकल्प बनाने के लिए, कोड टैब में, नई फ़ाइल में कोड को नीचे दिए गए कोड से बदलें. "कोई भी नहीं" मैप प्रकार छोड़ दिया गया है क्योंकि "कोई नहीं" इसका कोई भी मैप मौजूद नहीं है. इस चरण की वजह से गड़बड़ी होती है, लेकिन आप अगले चरण में इसे ठीक कर लेते हैं.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never" />
</menu>
  1. strings.xml में, गड़बड़ियों को ठीक करने के लिए title एट्रिब्यूट के लिए संसाधन जोड़ें.
<resources>
   ...
   <string name="normal_map">Normal Map</string>
   <string name="hybrid_map">Hybrid Map</string>
   <string name="satellite_map">Satellite Map</string>
   <string name="terrain_map">Terrain Map</string>
   <string name="lat_long_snippet">Lat: %1$.5f, Long: %2$.5f</string>
   <string name="dropped_pin">Dropped Pin</string>
   <string name="poi">poi</string>
</resources>
  1. MapsActivity में, onCreateOptionsMenu() तरीके को बदलें और map_options रिसॉर्स फ़ाइल से मेन्यू को बड़ा करें.
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
   val inflater = menuInflater
   inflater.inflate(R.menu.map_options, menu)
   return true
}
  1. MapsActivity.kt में, onOptionsItemSelected() तरीके को बदलें. उपयोगकर्ता के चुने गए विकल्प को दिखाने के लिए, मैप-टाइप कॉन्सटेंट का इस्तेमाल करके, मैप टाइप बदलें.
override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
   // Change the map type based on the user's selection.
   R.id.normal_map -> {
       map.mapType = GoogleMap.MAP_TYPE_NORMAL
       true
   }
   R.id.hybrid_map -> {
       map.mapType = GoogleMap.MAP_TYPE_HYBRID
       true
   }
   R.id.satellite_map -> {
       map.mapType = GoogleMap.MAP_TYPE_SATELLITE
       true
   }
   R.id.terrain_map -> {
       map.mapType = GoogleMap.MAP_TYPE_TERRAIN
       true
   }
   else -> super.onOptionsItemSelected(item)
}
  1. ऐप्लिकेशन चलाएं.
  2. मैप का टाइप बदलने के लिए, 428da163b831115b.png पर क्लिक करें. ध्यान दें कि अलग-अलग मोड में, मैप का लुक कैसे बदलता है.

6fa42970d87f5dc7.png

5. टास्क: मार्कर जोड़ें

डिफ़ॉल्ट रूप से, onMapReady() कॉलबैक में ऐसा कोड शामिल होता है जो ऑस्ट्रेलिया के सिडनी में एक मार्कर लगाता है, जहां Google Maps बनाया गया था. डिफ़ॉल्ट कॉलबैक, मैप को सिडनी में पैन करने के लिए भी ऐनिमेट करता है.

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

पहला चरण: अपने घर पर ज़ूम करें और मार्कर जोड़ें

  1. MapsActivity.kt फ़ाइल में, onMapReady() तरीका ढूंढें. इसमें मौजूद वह कोड हटाएं जो सिडनी में मार्कर लगाता है और कैमरे को दूसरी जगह ले जाता है. अब आपका तरीका कुछ ऐसा दिखना चाहिए.
override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

}
  1. इन निर्देशों का पालन करके, अपने घर का अक्षांश और देशांतर पता करें.
  2. अक्षांश और देशांतर के लिए एक वैल्यू बनाएं और उनकी फ़्लोट वैल्यू डालें.
val latitude = 37.422160
val longitude = -122.084270
  1. एक नया LatLng ऑब्जेक्ट बनाएं, जिसका नाम homeLatLng हो. homeLatLng ऑब्जेक्ट में, अभी-अभी बनाई गई वैल्यू पास करें.
val homeLatLng = LatLng(latitude, longitude)
  1. मैप पर कितना ज़ूम इन होना है, यह तय करने के लिए val बनाएं. ज़ूम लेवल 15f का इस्तेमाल करें.
val zoomLevel = 15f

ज़ूम लेवल से यह कंट्रोल होता है कि मैप पर आपने कितना ज़ूम इन किया है. यहां दी गई सूची से आपको पता चलता है कि ज़ूम का हर लेवल किस लेवल की जानकारी दिखाता है:

  • 1: दुनिया
  • 5: भूखंड/महाद्वीप
  • 10: शहर
  • 15: सड़कें
  • 20: इमारतें
  1. कैमरे को homeLatLng पर ले जाने के लिए, map ऑब्जेक्ट पर moveCamera() फ़ंक्शन को कॉल करें और CameraUpdateFactory.newLatLngZoom() का इस्तेमाल करके CameraUpdate ऑब्जेक्ट को पास करें. homeLatLng ऑब्जेक्ट और zoomLevel को पास करें.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))
  1. homeLatLng पर मैप में एक मार्कर जोड़ें.
map.addMarker(MarkerOptions().position(homeLatLng))

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

override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

   //These coordinates represent the latitude and longitude of the Googleplex.
   val latitude = 37.422160
   val longitude = -122.084270
   val zoomLevel = 15f

   val homeLatLng = LatLng(latitude, longitude)
   map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))
   map.addMarker(MarkerOptions().position(homeLatLng))
}
  1. अपना ऐप्लिकेशन चलाएं. मैप को आपके घर तक पैन करना चाहिए, मनचाहे लेवल पर ज़ूम करना चाहिए, और आपके घर पर मार्कर लगाना चाहिए.

fc939024778ee76.png

दूसरा चरण: उपयोगकर्ताओं को देर तक क्लिक करके मार्कर जोड़ने की अनुमति देना

इस चरण में, जब कोई उपयोगकर्ता मैप पर किसी जगह को छूता है और उसे दबाकर रखता है, तब एक मार्कर जोड़ा जाता है.

  1. MapsActivity में setMapLongClick() नाम का एक मेथड स्टब बनाएं, जो GoogleMap को आर्ग्युमेंट के तौर पर लेता है.
  2. मैप ऑब्जेक्ट में setOnMapLongClickListener लिसनर अटैच करें.
private fun setMapLongClick(map:GoogleMap) {
   map.setOnMapLongClickListener { }
}
  1. setOnMapLongClickListener() में, addMarker() तरीके को कॉल करें. नए MarkerOptions ऑब्जेक्ट को पास करें, जिसकी पोज़िशन पास की गई LatLng पर सेट की गई है.
private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}
  1. onMapReady() तरीके का इस्तेमाल करने के बाद, setMapLongClick() को map के साथ कॉल करें.
override fun onMapReady(googleMap: GoogleMap) {
   ...
  
   setMapLongClick(map)
}
  1. अपना ऐप्लिकेशन चलाएं.
  2. किसी जगह पर मार्कर लगाने के लिए, मैप को दबाकर रखें.
  3. मार्कर पर टैप करें, ताकि वह स्क्रीन के बीच में आ जाए.

4ff8d1c1db3bca9e.png

चरण 3: मार्कर के लिए जानकारी विंडो जोड़ें

इस चरण में, एक InfoWindow जोड़ा जाता है, जो मार्कर टैप किए जाने पर मार्कर के निर्देशांक दिखाता है.

  1. setMapLongClick()setOnMapLongClickListener() में, snippet के लिए val बनाएं. शीर्षक के बाद दिखाया जाने वाला अतिरिक्त टेक्स्ट स्निपेट होता है. आपका स्निपेट किसी मार्कर का अक्षांश और देशांतर दिखाता है.
private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A snippet is additional text that's displayed after the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}
  1. addMarker() में, R.string.dropped_pin स्ट्रिंग रिसॉर्स का इस्तेमाल करके, मार्कर के title को 'शामिल किए गए पिन' पर सेट करें.
  2. मार्कर के snippet को snippet पर सेट करें.

पूरा हो चुका फ़ंक्शन ऐसा दिखता है:

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A Snippet is Additional text that's displayed below the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet)
              
       )
   }
}
  1. अपना ऐप्लिकेशन चलाएं.
  2. जगह का मार्कर छोड़ने के लिए मैप को दबाकर रखें.
  3. जानकारी विंडो दिखाने के लिए मार्कर पर टैप करें.

63f210e6e47dfa29.png

चौथा चरण: पीओआई लिसनर जोड़ना

डिफ़ॉल्ट रूप से, मैप पर लोकप्रिय जगहें (पीओआई), उनसे जुड़े आइकॉन के साथ दिखती हैं. लोकप्रिय जगहों में पार्क, स्कूल, सरकारी इमारतें वगैरह शामिल हैं. जब मैप टाइप को normal पर सेट किया जाता है, तो मैप पर कारोबार की लोकप्रिय जगहें भी दिखती हैं. कारोबार से जुड़ी लोकप्रिय जगहों में दुकानें, रेस्टोरेंट, और होटल जैसे कारोबार होते हैं.

इस चरण में, आप मैप में GoogleMap.OnPoiClickListener जोड़ते हैं. जब कोई उपयोगकर्ता किसी लोकप्रिय जगह पर क्लिक करता है, तो यह क्लिक लिसनर मैप पर तुरंत एक मार्कर लगा देता है. क्लिक लिसनर एक जानकारी विंडो भी दिखाता है जिसमें POI का नाम होता है.

  1. MapsActivity में setPoiClick() नाम का एक मेथड स्टब बनाएं, जो GoogleMap को आर्ग्युमेंट के तौर पर लेता है.
  2. setPoiClick() तरीके में, पास-इन GoogleMap पर OnPoiClickListener सेट करें.
private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->

   }
}
  1. setOnPoiClickListener() में, मार्कर के लिए एक val poiMarker बनाएं .
  2. map.addMarker() का इस्तेमाल करके, इसे एक मार्कर पर सेट करें. MarkerOptions में, लोकप्रिय जगह के नाम के लिए title सेट करें.
private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
   }
}
  1. जानकारी विंडो को तुरंत दिखाने के लिए, setOnPoiClickListener() फ़ंक्शन में, poiMarker पर showInfoWindow() को कॉल करें.
poiMarker.showInfoWindow()

setPoiClick() फ़ंक्शन के लिए आपका फ़ाइनल कोड ऐसा दिखना चाहिए.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
       poiMarker.showInfoWindow()
   }
}
  1. onMapReady() खत्म होने पर, setPoiClick() को कॉल करें और map पास करें.
override fun onMapReady(googleMap: GoogleMap) {
   ...

   setPoiClick(map)
}
  1. अपना ऐप्लिकेशन चलाएं और कोई लोकप्रिय जगह ढूंढें, जैसे कि पार्क या कॉफ़ी शॉप.
  2. लोकप्रिय जगह पर मार्कर लगाने के लिए, उस पर टैप करें. इसके बाद, जानकारी वाली विंडो में लोकप्रिय जगह का नाम दिखाएं.

f4b0972c75d5fa5f.png

6. टास्क: अपने मैप को स्टाइल दें

आप Google Maps को कई तरीकों से पसंद के मुताबिक बना सकते हैं, ताकि आपके मैप को एक अनोखा लुक मिल सके.

उपलब्ध एक्सएमएल एट्रिब्यूट का इस्तेमाल करके, MapFragment ऑब्जेक्ट को पसंद के मुताबिक बनाया जा सकता है, जैसा कि किसी दूसरे फ़्रैगमेंट को पसंद के मुताबिक किया जाता है. हालांकि, इस चरण में GoogleMap ऑब्जेक्ट के लिए दिए गए तरीकों का इस्तेमाल करके, MapFragment के कॉन्टेंट का लुक और स्टाइल पसंद के मुताबिक बनाया जाता है.

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

पहला चरण: अपने मैप के लिए स्टाइल बनाना

  1. अपने ब्राउज़र में https://mapstyle.withgoogle.com/ पर जाएं.
  2. स्टाइल बनाएं चुनें.
  3. रेट्रो चुनें.

208b3d3aeab0d9b6.png

  1. ज़्यादा विकल्प पर क्लिक करें.

4a35faaf9535ee82.png

  1. सड़क चुनें > भरें.
  2. सड़कों के रंग को अपने चुने हुए किसी भी रंग (जैसे कि गुलाबी) में बदलें.

92c3293749293a4c.png

  1. पूरा करें पर क्लिक करें.

f1bfe8585eb69480.png

  1. मिलने वाले डायलॉग बॉक्स से JSON कोड कॉपी करें. अगर आप चाहें, तो इसे सादे टेक्स्ट वाले नोट में छिपाएं, ताकि अगले चरण में उसका इस्तेमाल किया जा सके.

3c32168b299d6420.png

दूसरा चरण: अपने मैप में स्टाइल जोड़ना

  1. Android Studio में, res डायरेक्ट्री में जाकर एक रिसॉर्स डायरेक्ट्री बनाएं और उसे raw नाम दें. JSON कोड जैसे, raw डायरेक्ट्री रिसॉर्स का इस्तेमाल किया जाता है.
  2. res/raw में map_style.json नाम की फ़ाइल बनाएं.
  3. नई रिसॉर्स फ़ाइल में, सेव किया गया JSON कोड चिपकाएं.
  4. MapsActivity में, onCreate() तरीके के ऊपर एक TAG क्लास वैरिएबल बनाएं. इसका इस्तेमाल लॉगिंग के लिए किया जाता है.
private val TAG = MapsActivity::class.java.simpleName
  1. साथ ही, MapsActivity में, एक setMapStyle() फ़ंक्शन बनाएं, जो GoogleMap में ले जाता हो.
  2. setMapStyle() में, try{} ब्लॉक जोड़ें.
  3. स्टाइल की सफलता के लिए, try{} ब्लॉक में एक val success बनाएं. (आप नीचे दिए गए कैच ब्लॉक को जोड़ते हैं.)
  4. try{} ब्लॉक में, JSON स्टाइल को मैप पर सेट करें. इसके बाद, GoogleMap ऑब्जेक्ट पर setMapStyle() को कॉल करें. MapStyleOptions ऑब्जेक्ट को पास करें, जो JSON फ़ाइल लोड करता हो.
  5. success को नतीजा असाइन करें. setMapStyle() वाला तरीका, बूलियन दिखाता है. इससे स्टाइलिंग फ़ाइल को पार्स करने और स्टाइल सेट करने की प्रोसेस पूरी होने की स्थिति का पता चलता है.
private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )
   }
}
  1. success के लिए अगर स्टेटमेंट गलत हो, तो उसे जोड़ें. अगर स्टाइलिंग पूरी नहीं हो सकी, तो उस लॉग को प्रिंट करें जिसे पार्स नहीं किया जा सका.
private fun setMapStyle(map: GoogleMap) {
   try {
       ...
       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   }
}
  1. स्टाइल फ़ाइल मौजूद न होने की स्थिति को मैनेज करने के लिए, catch{} ब्लॉक जोड़ें. अगर catch ब्लॉक में फ़ाइल लोड नहीं हो पा रही है, तो Resources.NotFoundException लगाएं.
private fun setMapStyle(map: GoogleMap) {
   try {
       ...
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

तैयार किया गया तरीका, नीचे दिए गए कोड स्निपेट की तरह दिखना चाहिए:

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )

       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}
  1. आखिर में, अपने GoogleMap ऑब्जेक्ट में पास होने वाले onMapReady() तरीके में setMapStyle() तरीके को कॉल करें.
override fun onMapReady(googleMap: GoogleMap) {
   ...
   setMapStyle(map)
}
  1. अपना ऐप्लिकेशन चलाएं.
  2. मैप को normal मोड पर सेट करें. इससे नई स्टाइल, रेट्रो थीम और अपने चुने गए रंग की सड़कों के साथ दिखनी चाहिए.

b59d6cb81f02a14f.png

चरण 3: अपने मार्कर की फ़ॉर्मैटिंग करना

आप मैप मार्कर को शैली में ढालकर अपने मैप को और भी मनमुताबिक बना सकते हैं. इस चरण में, डिफ़ॉल्ट लाल मार्कर को कुछ और बेहतर तरीके से बदला जाता है.

  1. onMapLongClick() तरीके में, डिफ़ॉल्ट मार्कर का इस्तेमाल करने के लिए कंस्ट्रक्टर के MarkerOptions() में कोड की इस लाइन को जोड़ें, लेकिन कलर को बदलकर नीला करें.
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))

अब onMapLongClickListener() ऐसा दिखेगा:

map.setOnMapLongClickListener { latLng ->
   // A snippet is additional text that's displayed after the title.
   val snippet = String.format(
       Locale.getDefault(),
       "Lat: %1$.5f, Long: %2$.5f",
       latLng.latitude,
       latLng.longitude
   )
   map.addMarker(
       MarkerOptions()
           .position(latLng)
           .title(getString(R.string.dropped_pin))
           .snippet(snippet)
         .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
   )
}
  1. ऐप्लिकेशन चलाएं. देर तक क्लिक करने के बाद दिखने वाले मार्कर अब नीले रंग के किए जाएंगे. ध्यान दें कि लोकप्रिय जगह के मार्कर अब भी लाल हैं, क्योंकि आपने onPoiClick() तरीके में स्टाइल नहीं जोड़ा है.

b9916bca3c367e3.png

7. टास्क: ओवरले जोड़ना

Google मैप के ऊपर ड्रॉइंग करके उसे पसंद के मुताबिक बनाया जा सकता है. यह तकनीक तब काम आती है, जब आपको किसी खास तरह की जगह को हाइलाइट करना हो. जैसे, मछली पकड़ने की लोकप्रिय जगहें.

  • आकार: आप मैप में पॉलीलाइन, पॉलीगॉन, और सर्कल जोड़ सकते हैं.
  • GroundOverlay ऑब्जेक्ट: ग्राउंड ओवरले, वह इमेज होती है जिसे मैप पर जोड़ा जाता है. मार्कर से अलग, ग्राउंड ओवरले स्क्रीन के बजाय पृथ्वी की सतह के मुताबिक होते हैं. मैप को घुमाने, झुकाने या ज़ूम करने से इमेज का ओरिएंटेशन बदल जाता है. ग्राउंड ओवरले तब काम आते हैं, जब आपको मैप पर किसी जगह की एक इमेज ठीक करनी हो.

चरण: ग्राउंड ओवरले जोड़ना

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

  1. यह Android इमेज डाउनलोड करें और अपने res/drawable फ़ोल्डर में सेव करें. (पक्का करें कि फ़ाइल का नाम android.png है.)

61fabd56a0841b44.png

  1. onMapReady() में, कैमरे को घर की जगह पर ले जाने के लिए कॉल करने के बाद, GroundOverlayOptions ऑब्जेक्ट बनाएं.
  2. ऑब्जेक्ट को androidOverlay नाम वाले वैरिएबल पर असाइन करें.
val androidOverlay = GroundOverlayOptions()
  1. डाउनलोड किए गए इमेज संसाधन से BitmapDescriptor ऑब्जेक्ट बनाने के लिए, BitmapDescriptorFactory.fromResource() तरीके का इस्तेमाल करें.
  2. नतीजे के तौर पर मिले BitmapDescriptor ऑब्जेक्ट को GroundOverlayOptions ऑब्जेक्ट के image() तरीके में पास करें.
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
  1. अपनी पसंद के ओवरले की मीटर में चौड़ाई के लिए float overlaySize बनाएं. इस उदाहरण के लिए, 100f की चौड़ाई सही काम करती है.

position() तरीके को कॉल करके, GroundOverlayOptions ऑब्जेक्ट के लिए position प्रॉपर्टी सेट करें. इसके बाद, homeLatLng ऑब्जेक्ट और overlaySize को पास करें.

val overlaySize = 100f
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
   .position(homeLatLng, overlaySize)
  1. GoogleMap ऑब्जेक्ट पर addGroundOverlay() को कॉल करें और अपना GroundOverlayOptions ऑब्जेक्ट पास करें.
map.addGroundOverlay(androidOverlay)
  1. ऐप्लिकेशन चलाएं.
  2. Android इमेज को ओवरले के तौर पर देखने के लिए, zoomLevel की वैल्यू को 18f में बदलें.

b1b25b0acd6a9807.png

8. टास्क: जगह की जानकारी ट्रैक करने की सुविधा चालू करना

उपयोगकर्ता, अपनी मौजूदा जगह की जानकारी देखने के लिए अक्सर Google Maps का इस्तेमाल करते हैं. अपने मैप पर डिवाइस की जगह दिखाने के लिए, जगह की जानकारी के डेटा लेयर का इस्तेमाल किया जा सकता है.

जगह-डेटा लेयर की मदद से मैप में मेरी जगह का आइकॉन जुड़ जाता है.

f317f84dcb3ac3a1.png

जब उपयोगकर्ता बटन पर टैप करता है, तो मैप डिवाइस की जगह की जगह पर दिखने लगता है. अगर डिवाइस स्थिर है, तो जगह को नीले बिंदु के तौर पर दिखाया जाता है. वहीं, अगर डिवाइस हिल रहा है, तो जगह को नीले शेवरॉन के तौर पर दिखाया जाता है.

इस टास्क में, जगह की जानकारी का डेटा लेयर चालू किया जाता है.

चरण: जगह की जानकारी की अनुमतियों का अनुरोध करें

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

इस चरण में, जगह की जानकारी की अनुमतियों का अनुरोध किया जाता है और जगह की जानकारी ट्रैक करने की सुविधा चालू की जाती है.

  1. AndroidManifest.xml फ़ाइल में, पुष्टि करें कि FINE_LOCATION की अनुमति पहले से मौजूद है. Android Studio ने यह अनुमति तब शामिल की थी, जब आपने Google Maps टेंप्लेट चुना था.
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  1. MapsActivity में, REQUEST_LOCATION_PERMISSION क्लास वैरिएबल बनाएं.
private val REQUEST_LOCATION_PERMISSION = 1
  1. अनुमतियां दी गई हैं या नहीं, यह देखने के लिए MapsActivity में isPermissionGranted() नाम का एक तरीका बनाएं. इस तरीके में देखें कि उपयोगकर्ता ने अनुमति दी है या नहीं.
private fun isPermissionGranted() : Boolean {
  return ContextCompat.checkSelfPermission(
       this,
      Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED
}
  1. अपने ऐप्लिकेशन में जगह की जानकारी ट्रैक करने की सुविधा चालू करने के लिए, MapsActivity में enableMyLocation() नाम का एक तरीका बनाएं. यह तरीका, न तो आर्ग्युमेंट होता है और न ही कोई वैल्यू दिखाता है. इसके अंदर, ACCESS_FINE_LOCATION की अनुमति देखें. अगर अनुमति दी गई है, तो जगह की जानकारी की लेयर चालू करें. अगर आपको ऐसा नहीं करना है, तो अनुमति पाने के लिए अनुरोध करें.
private fun enableMyLocation() {
   if (isPermissionGranted()) {
       map.isMyLocationEnabled = true 
   }
   else {
       ActivityCompat.requestPermissions(
           this,
           arrayOf<String>(Manifest.permission.ACCESS_FINE_LOCATION),
           REQUEST_LOCATION_PERMISSION
       )
   }
}
  1. जगह की जानकारी की लेयर चालू करने के लिए, onMapReady() कॉलबैक से enableMyLocation() को कॉल करें.
override fun onMapReady(googleMap: GoogleMap) {
   ...
   enableMyLocation()
}
  1. onRequestPermissionsResult() तरीके को बदलें. देखें कि requestCode, REQUEST_LOCATION_PERMISSION के बराबर है या नहीं. अगर जानकारी मौजूद है, तो इसका मतलब है कि अनुमति दे दी गई है. अगर अनुमति दी जाती है, तो यह भी देखें कि grantResults कलेक्शन के पहले स्लॉट में PackageManager.PERMISSION_GRANTED मौजूद है या नहीं. अगर यह सही है, तो enableMyLocation() पर कॉल करें.
override fun onRequestPermissionsResult(
   requestCode: Int,
   permissions: Array<String>,
   grantResults: IntArray) {
   if (requestCode == REQUEST_LOCATION_PERMISSION) {
       if (grantResults.contains(PackageManager.PERMISSION_GRANTED)) {
           enableMyLocation()
       }
   }
}
  1. अपना ऐप्लिकेशन चलाएं. डिवाइस की जगह की जानकारी के ऐक्सेस के लिए, एक डायलॉग बॉक्स दिखेगा. आगे बढ़ें और अनुमति दें.

da7e23e00ec762c1.png

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

5b12eda7f467bc2f.png

9. समाधान कोड

खत्म हो चुके कोडलैब के लिए कोड डाउनलोड करें.

$  git clone https://github.com/googlecodelabs/android-kotlin-geo-maps

इसके अलावा, आपके पास रिपॉज़िटरी को ZIP फ़ाइल के तौर पर डाउनलोड करने, अनज़िप करने, और Android Studio में खोलने का विकल्प भी है.

10. खास जानकारी

बधाई हो! आपने Android Kotlin ऐप्लिकेशन में Google मैप जोड़ा है और उसे स्टाइल किया है.

11. ज़्यादा जानें

Android डेवलपर के दस्तावेज़:

रेफ़रंस के लिए दस्तावेज़:

12. अगला कोडलैब

इस कोर्स में अन्य कोडलैब के लिंक के लिए, Kotlin कोडलैब में बेहतर Android का लैंडिंग पेज देखें.