अपने ऐप्लिकेशन में 3D मैप जोड़ना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

न्यूयॉर्क शहर को दिखाने वाला 3D मैप

इस पेज पर, Android के लिए Maps 3D SDK का इस्तेमाल करके, Android ऐप्लिकेशन में बुनियादी 3D मैप जोड़ने का उदाहरण दिया गया है. इस पेज पर दिए गए निर्देशों के मुताबिक, यह माना जाता है कि आपने सेटअप पेज पर दिए गए चरणों को पहले ही पूरा कर लिया है. साथ ही, आपके पास ये चीज़ें हैं:

  • ऐसा Google Cloud प्रोजेक्ट जिसमें Android के लिए Maps 3D SDK चालू हो
  • Android के लिए Maps 3D SDK के साथ इस्तेमाल करने के लिए कॉन्फ़िगर किया गया एपीआई पासकोड
  • Android के लिए Maps 3D SDK के साथ इस्तेमाल करने के लिए सेट अप किया गया Android Studio प्रोजेक्ट

इन ज़रूरी शर्तों के बारे में ज़्यादा जानने के लिए, सेटअप देखें.

पहला चरण: Map3DView कॉम्पोनेंट जोड़ने के लिए, लेआउट फ़ाइल (activity_main.xml) को अपडेट करना

Map3DView कॉम्पोनेंट, ऐप्लिकेशन में 3D मैप को रेंडर करता है. यहां दिए गए चरणों को पूरा करके, कॉम्पोनेंट को जोड़ें और मैप की शुरुआती सेटिंग कॉन्फ़िगर करें. इसमें कैमरे की पोज़िशन और उससे जुड़े एट्रिब्यूट शामिल हैं:

  1. अपनी मुख्य गतिविधि की लेआउट फ़ाइल खोलें. यह आम तौर पर, app/src/main/res/layout/activity_main.xml पर मौजूद होती है.

  2. रूट ConstraintLayout (या अपने रूट लेआउट एलिमेंट) में, map3d एक्सएमएल नेमस्पेस जोड़ें:

    xmlns:map3d="http://schemas.android.com/apk/res-auto"
    
  3. "नमस्ते, दुनिया के लोगों!" दिखाने वाले डिफ़ॉल्ट <TextView> को मिटाएं.

  4. अपने लेआउट में Map3DView कॉम्पोनेंट जोड़ें. कैमरे की पोज़िशन और अन्य एट्रिब्यूट को पसंद के मुताबिक बनाया जा सकता है:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:map3d="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/main"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity">
    
      <com.google.android.gms.maps3d.Map3DView
        android:id="@+id/map3dView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        map3d:mapMode="hybrid"
        map3d:centerLat="38.544012"
        map3d:centerLng="-107.670428"
        map3d:centerAlt="2427.6"
        map3d:heading="310"
        map3d:tilt="63"
        map3d:range="8266"
        map3d:roll="0"
        map3d:minAltitude="0"
        map3d:maxAltitude="1000000"
        map3d:minHeading="0"
        map3d:maxHeading="360"
        map3d:minTilt="0"
        map3d:maxTilt="90"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    

दूसरा चरण: MainActivity.kt को अपडेट करना

यहां दिए गए चरणों से, पहले हिस्से में activity_main.xml फ़ाइल में जोड़े गए Map3DView कॉम्पोनेंट को शुरू किया जाता है. साथ ही, कॉम्पोनेंट के लाइफ़साइकल इवेंट को मैनेज किया जाता है.

ध्यान दें कि Android के लिए Maps 3D SDK, एक समय में Map3DView का सिर्फ़ एक चालू इंस्टेंस इस्तेमाल कर सकता है. एक साथ कई Map3DView इंस्टेंस दिखाने की सुविधा काम नहीं करती. उदाहरण के लिए, एक ही लेआउट या अलग-अलग दिखने वाली गतिविधियों या फ़्रैगमेंट में. इससे रेंडरिंग से जुड़ी समस्याएं हो सकती हैं. जैसे, सेकंडरी व्यू पर ब्लैक स्क्रीन दिखना.

इसके अलावा, सभी Map3DView एक ही मैप की स्थिति (जैसे, कैमरे की पोज़िशन, जोड़े गए मार्कर, पॉलीगॉन वगैरह) को शेयर और दिखाएंगे. यह स्थिति तब भी बनी रहेगी, जब एक Map3DView को (onDestroy का इस्तेमाल करके) खत्म कर दिया जाए और दूसरा बनाया जाए. हालांकि, ऐसा तब तक होगा, जब तक उसे मैन्युअल तरीके से हटाया न जाए. उदाहरण के लिए, अगर आपने Map3DView1 में मार्कर जोड़े हैं, तो उसे मिटाकर Map3DView2 बनाएं. इसके बाद, वे मार्कर Map3DView2 पर अब भी मौजूद रहेंगे.

डेवलपर की ज़िम्मेदारियां:

  • एक बार में एक व्यू: पक्का करें कि किसी भी समय, व्यू हैरारकी (व्यू और व्यू ग्रुप के लेआउट का क्रम) के चालू हिस्से में सिर्फ़ एक Map3DView हो.
  • मैन्युअल तरीके से क्लीनअप करना: एक Map3DView (जैसे, Map3DView1) से दूसरे (जैसे, Map3DView2) पर स्विच करते समय, आपको पुराने इंस्टेंस (Map3DView1) पर onDestroy() को कॉल करना होगा. ऐसा इसलिए, क्योंकि मैप की मौजूदा स्थिति शेयर की जाती है. यह पक्का करने के लिए कि Map3DView2 नई या किसी खास स्थिति से शुरू हो, आपको Map3DView1 से सेट की गई किसी भी स्थिति को मैन्युअल तरीके से हटाना होगा. इसमें मार्कर, ओवरले वगैरह हटाना और OnMap3DViewReadyCallback में मिले GoogleMap3D ऑब्जेक्ट का इस्तेमाल करके, कैमरे की पोज़िशन को रीसेट करना शामिल है.
  1. अपनी MainActivity.kt फ़ाइल खोलें. आम तौर पर, यह फ़ाइल app/src/main/java/com/example/yourpackagename/MainActivity.kt पर मौजूद होती है.

  2. Android के लिए Maps 3D SDK के लिए ज़रूरी इंपोर्ट जोड़ें:

    import android.util.Log
    import com.google.android.gms.maps3d.GoogleMap3D
    import com.google.android.gms.maps3d.Map3DView
    import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
    
  3. OnMap3DViewReadyCallback को लागू करने के लिए, MainActivity क्लास में बदलाव करें:

    class MainActivity : AppCompatActivity(), OnMap3DViewReadyCallback {
    
  4. Map3DView और GoogleMap3D के लिए वैरिएबल तय करें:

    private lateinit var map3DView: Map3DView
    private var googleMap3D: GoogleMap3D? = null
    
  5. onCreate तरीके में, setContentView(...) और ViewCompat.setOnApplyWindowInsetsListener ब्लॉक के बाद, map3DView को शुरू करें. इसके बाद, इसके onCreate लाइफ़साइकल तरीके को कॉल करें और एसिंक्रोनस तरीके से मैप का अनुरोध करें:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
    
        map3DView = findViewById(R.id.map3dView)
        map3DView.onCreate(savedInstanceState)
        map3DView.getMap3DViewAsync(this)
    }
    
  6. onMap3DViewReady और onError तरीकों को बदलें. ये कॉलबैक तब ट्रिगर होते हैं, जब मैप इस्तेमाल के लिए तैयार हो जाता है या शुरू होने के दौरान कोई गड़बड़ी होती है:

    override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
        // Interact with the googleMap3D object here
        this.googleMap3D = googleMap3D
        // You can now make calls to the googleMap3D object, e.g.,
        // googleMap3D.flyTo(camera { ... })
    }
    
    override fun onError(error: Exception) {
        // Handle the error gracefully here (for example, show an error dialog or log the error).
        Log.e("MainActivity", "Error loading 3D map", error)
    }
    
  7. अपनी ऐक्टिविटी से लाइफ़साइकल इवेंट को Map3DView पर फ़ॉरवर्ड करें. इसके लिए, MainActivity में ये बदलाव जोड़ें:

    override fun onStart() {
        super.onStart()
        map3DView.onStart()
    }
    
    override fun onResume() {
        super.onResume()
        map3DView.onResume()
    }
    
    override fun onPause() {
        map3DView.onPause()
        super.onPause()
    }
    
    override fun onStop() {
        map3DView.onStop()
        super.onStop()
    }
    
    override fun onDestroy() {
        map3DView.onDestroy()
        super.onDestroy()
    }
    
    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        map3DView.onSaveInstanceState(outState)
    }
    
    override fun onLowMemory() {
        super.onLowMemory()
        map3DView.onLowMemory()
    }
    

तीसरा भाग: Gradle को सिंक करना और चलाना

ऐप्लिकेशन के लेआउट और गतिविधि को अपडेट करने के बाद, ऐप्लिकेशन को बनाएं और चलाएं. इससे आपको 3D मैप व्यू दिखेगा.

  1. अपने प्रोजेक्ट को Gradle के साथ सिंक करने के लिए, File > Sync Project with Gradle Files को चुनें.

  2. किसी एम्युलेटर या फ़िज़िकल डिवाइस पर अपना ऐप्लिकेशन बनाने और चलाने के लिए, Run > Run को चुनें.

अगर सब कुछ सही तरीके से कॉन्फ़िगर किया गया है, तो आपको अपने ऐप्लिकेशन में 3D मैप दिखेगा. यह मैप, activity_main.xml में बताए गए निर्देशांकों के आस-पास दिखेगा.

मैप लोड होने और गड़बड़ी वाले पेज की स्थितियां

Android के लिए Maps 3D एसडीके, मैप की स्थिति को मैनेज करते समय, पहले से मौजूद विज़ुअल फ़ीडबैक को अपने-आप दिखाता है:

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

अपने OnMap3DViewReadyCallback लागू करने के तरीके में onError(error: Exception) को बदलकर, प्रोग्राम के हिसाब से, शुरू करने या लोड करने से जुड़ी इन गड़बड़ियों को कैप्चर किया जा सकता है.

मैप पर क्लिक इवेंट को मॉनिटर करना

मैप पर क्लिक इवेंट सुनने के लिए, GoogleMap3D पर setMap3DClickListener कॉल करें. जब कोई उपयोगकर्ता मैप पर क्लिक करता है, तो onMap3DClick कॉलबैक को एक Map3DClickEvent ऑब्जेक्ट मिलता है. यह ऑब्जेक्ट, क्लिक किए गए पॉइंट का location और placeId उपलब्ध कराता है. साथ ही, यह Boolean दिखाता है (डिफ़ॉल्ट Places यूज़र इंटरफ़ेस (यूआई) विजेट को छिपाने के लिए true या उसे दिखाने के लिए false). ज़्यादा जानकारी के लिए, दिलचस्पी की जगहों के साथ इंटरैक्ट करना लेख पढ़ें.

यहां दिए गए उदाहरण में, मैप क्लिक लिसनर को सेट करने का तरीका बताया गया है:

googleMap3D.setMap3DClickListener { event: Map3DClickEvent ->
    Log.d(
        "MainActivity",
        "Clicked at ${event.location}, placeId: ${event.placeId}"
    )
    false
}

अगले चरण

अब आपने अपने ऐप्लिकेशन में एक बेसिक 3D मैप जोड़ लिया है. इसके बाद, Maps 3D SDK for Android की ज़्यादा ऐडवांस सुविधाएं एक्सप्लोर की जा सकती हैं. जैसे, कैमरा पाथ ऐनिमेशन, 3D मार्कर या पॉलीगॉन.