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

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

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

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

ज़रूरी बातें

नीचे दी गई चीज़ों के बारे में जानकारी:

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

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

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

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

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

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

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

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

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

  1. प्रोजेक्ट को Wander नाम दें.
  2. कम से कम एपीआई लेवल को एपीआई 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 किसी ऐप्लिकेशन में मैप डालने का सबसे आसान तरीका है. यह मैप के व्यू के चारों ओर मौजूद रैपर है, जो लाइफ़साइकल की ज़रूरी ज़रूरतों को अपने-आप पूरा करता है.

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

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

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

दूसरा चरण: एपीआई कुंजी पाना

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

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

MapsActivity का mMap नाम का एक निजी lateinit var है, जो GoogleMap प्रकार का है. Kotlin को नाम देने के लिए, mMap के नाम को map में बदलें.

  1. MapsActivity में, mMap पर दायां क्लिक करें. इसके बाद, रेफ़रर &gt पर क्लिक करें; नाम बदलें...

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

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

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

सामान्य मैप

सैटेलाइट मैप

हाइब्रिड मैप

इलाके का मैप

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

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

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

मैप किस तरह का है, इसके लिए मेन्यू जोड़ें

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

  1. नई मेन्यू एक्सएमएल फ़ाइल बनाने के लिए, अपनी res डायरेक्ट्री पर दायां क्लिक करें और नई > Android रिसॉर्स फ़ाइल को चुनें.
  2. डायलॉग बॉक्स में, फ़ाइल को map_options नाम दें.
  3. संसाधन प्रकार के लिए मेन्यू चुनें.
  4. ठीक है पर क्लिक करें.
  5. मैप कोड के विकल्प बनाने के लिए, कोड टैब में जाकर, नीचे दी गई कोड से नई फ़ाइल में कोड बदलें. "none" मैप प्रकार को हटा दिया गया है क्योंकि "none&कोटेशन; किसी भी मैप की कमी है. इस चरण में गड़बड़ी होती है, लेकिन आपको अगले चरण में इसे ठीक करना होगा.
<?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. मैप किस तरह का है, यह बदलने के लिए, पर क्लिक करें. ध्यान दें कि अलग-अलग मोड के बीच, मैप के दिखने का तरीका कैसे बदलता है.

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

इस टास्क में, आप मैप और #31 कैमरे को अपने घर में ले जाते हैं, उस लेवल पर ज़ूम करते हैं, जो आप चुनते हैं, और वहाँ एक मार्कर रखते हैं.

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

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

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

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

  • 1: दुनिया
  • 5: ज़मीन/महाद्वीप
  • 10: शहर
  • 15: सड़कें
  • 20: इमारतें
  1. map ऑब्जेक्ट पर moveCamera() फ़ंक्शन को कॉल करके कैमरे को homeLatLng पर ले जाएं और 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. अपना ऐप्लिकेशन चलाएं. मैप आपके घर पर पैन करना चाहिए, आपके मनचाहे लेवल पर ज़ूम करना चाहिए, और आपके घर पर मार्कर लगा देना चाहिए.

चरण 2: उपयोगकर्ताओं को लंबे क्लिक का इस्तेमाल करके मार्कर जोड़ने दें

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

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

चरण 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. जानकारी विंडो दिखाने के लिए मार्कर पर टैप करें.

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

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

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

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

   }
}
  1. setOnPoiClickListener() में, मार्कर के लिए val poiMarker बनाएं .
  2. इसे MarkerOptions का इस्तेमाल करके, map.addMarker() पर सेट करें. इसके लिए, 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. लोकप्रिय जगह पर मार्कर लगाने और जानकारी विंडो में पीओआई{0}#39; का नाम दिखाने के लिए टैप करें.

आप Google Maps को कई तरीकों से कस्टमाइज़ कर सकते हैं. इससे आपका मैप अलग दिखता है.

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

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

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

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

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

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

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

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

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

  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 ब्लॉक में, अगर फ़ाइल को लोड नहीं किया जा सकता ##3, तो 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 मोड पर सेट करें. साथ ही, पुरानी स्टाइल वाली और नई शैली के साथ नई स्टाइलिंग दिखनी चाहिए.

चरण 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() तरीके से स्टाइल नहीं जोड़ा है.

Google मैप को अपने हिसाब से बनाने का एक तरीका है, इस पर ड्रॉइंग करना. यह तकनीक तब काम आती है, जब आप किसी खास तरह की जगह को हाइलाइट करना चाहते हैं, जैसे कि मछली पकड़ने की मशहूर जगहें.

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

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

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

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

  1. onMapReady() में कॉल के बाद, कैमरे को अपने होम और #39; की पोज़िशन पर ले जाने के लिए, 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 पर सेट करें.

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

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

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

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

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

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

  1. AndroidManifest.xml फ़ाइल में, पुष्टि करें कि FINE_LOCATION की अनुमति पहले से मौजूद है. जब आपने Google Maps टेंप्लेट चुना, तो Android Studio ने यह अनुमति दी. 
<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() कहा जाता है. इसमें कोई आर्ग्युमेंट नहीं होते और कुछ भी नहीं होता और #33; नहीं होता. अंदर, 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. अपना ऐप्लिकेशन चलाएं. डिवाइस की जगह की जानकारी के ऐक्सेस का अनुरोध करने वाला एक डायलॉग होना चाहिए. अनुमति दें.

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

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

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


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

पिन डाउनलोड करें
  • Maps API का इस्तेमाल करने के लिए, आपको Google API (एपीआई) कंसोल से एपीआई कुंजी की ज़रूरत होगी.
  • Android Studio में, Google Maps गतिविधि टेंप्लेट के इस्तेमाल से ऐप्लिकेशन में ActivityएकSupportMapFragment होता है. टेंप्लेट, ऐप्लिकेशन मेनिफ़ेस्ट में भी ACCESS_FINE_PERMISSION जोड़ता है और आपकी गतिविधि में OnMapReadyCallback को लागू करता है. साथ ही, ज़रूरी onMapReady() तरीके को बदलता है.

रनटाइम के दौरान, GoogleMap का मैप टाइप बदलने के लिए, GoogleMap.setMapType() तरीके का इस्तेमाल करें. Google Maps, इनमें से कोई एक मैप हो सकता है:

  • सामान्य: सड़क का सामान्य मैप. नदियों जैसी खास प्राकृतिक विशेषताओं और सड़कों के बारे में बताएं. कुछ सुविधाएं इंसानों ने बनाई हैं. सड़क और सुविधा के लेबल भी दिखते हैं.
  • हाइब्रिड: सड़क मैप के साथ उपग्रह फ़ोटो डेटा. सड़क और सुविधा के लेबल भी दिखते हैं.
  • सैटलाइट: फ़ोटो का डेटा. सड़क और सुविधा के लेबल नहीं दिख रहे हैं.
  • इलाका: भौगोलिक डेटा. मैप में रंग, कंटूर लाइनें और लेबल, और पर्पज़ शेडिंग शामिल हैं. कुछ सड़कें और लेबल भी दिखते हैं.
  • कोई नहीं: मूल आधार टाइल नहीं है.

Google Maps के बारे में जानकारी:

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

अन्य अहम जानकारी:

  • किसी भौगोलिक जगह पर इमेज को ठीक करने के लिए, ग्राउंड ओवरले का इस्तेमाल करें.
  • इमेज, इमेज का साइज़ मीटर में, और इमेज की पोज़िशन के बारे में बताने के लिए, GroundOverlayOptions ऑब्जेक्ट का इस्तेमाल करें. इस ऑब्जेक्ट को GoogleMap.addGroundOverlay() मैथड में पास करें, ताकि मैप पर ओवरले सेट किया जा सके.
  • बशर्ते आपके ऐप्लिकेशन के पास ACCESS_FINE_LOCATION की अनुमति हो, आप map.isMyLocationEnabled = true सेट करके, जगह की जानकारी को ट्रैक करने की सुविधा चालू कर सकते हैं.
  • यह इस कोडलैब में शामिल नहीं है, लेकिन आप Google स्ट्रीट व्यू का इस्तेमाल करके, किसी जगह के बारे में ज़्यादा जानकारी दे सकते हैं. यह किसी खास जगह की नेविगेट की जा सकने वाली फ़ोटो होती है.

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

रेफ़रंस दस्तावेज़:

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