Maps Compose की लाइब्रेरी

Jetpack Compose एक डिक्लेरेटिव, नेटिव यूज़र इंटरफ़ेस (यूआई) टूलकिट है. यह यूज़र इंटरफ़ेस (यूआई) डेवलपमेंट को आसान और तेज़ बनाती है. Jetpack Compose की मदद से, यह बताया जाता है कि आपको अपना ऐप्लिकेशन कैसा दिखाना है. इसके बाद, Jetpack Compose बाकी काम अपने-आप कर देता है.

Android के लिए Maps SDK की Maps Compose लाइब्रेरी, ओपन-सोर्स कंपोज़ेबल फ़ंक्शन और डेटा टाइप का एक सेट है. इसका इस्तेमाल Jetpack Compose के साथ करके, अपना ऐप्लिकेशन बनाया जा सकता है.

Maps Compose लाइब्रेरी में कंपोज़ेबल फ़ंक्शन और डेटा टाइप होते हैं. इनकी मदद से, कई सामान्य टास्क किए जा सकते हैं. सबसे ज़्यादा इस्तेमाल किए जाने वाले कुछ कंपोज़ेबल फ़ंक्शन और डेटा टाइप में ये शामिल हैं:

कंपोज़ेबल ब्यौरा
सर्कल यह कंपोज़ेबल फ़ंक्शन, मैप में सर्कल जोड़ने के लिए होता है.
GoogleMap मैप जोड़ने के लिए कंपोज़ेबल फ़ंक्शन.
GroundOverlay यह कंपोज़ेबल फ़ंक्शन, मैप में ग्राउंड ओवरले जोड़ने के लिए होता है.
MapProperties यह उन प्रॉपर्टी के लिए डेटा टाइप है जिन्हें मैप पर बदला जा सकता है.
MapUISettings मैप पर यूज़र इंटरफ़ेस (यूआई) से जुड़ी सेटिंग के लिए डेटा टाइप.
मार्कर मैप में मार्कर जोड़ने के लिए कंपोज़ेबल फ़ंक्शन.
Polygon यह कंपोज़ेबल फ़ंक्शन, मैप में पॉलीगॉन जोड़ने के लिए होता है.
पॉलीलाइन यह कंपोज़ेबल फ़ंक्शन, मैप में पॉलीलाइन जोड़ने के लिए होता है.
TileOverlay यह कंपोज़ेबल फ़ंक्शन, मैप में टाइल ओवरले जोड़ने के लिए होता है.

सभी कंपोज़ेबल फ़ंक्शन और डेटा टाइप की पूरी सूची देखने के लिए, Maps Compose लाइब्रेरी का रेफ़रंस देखें.

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

Android के लिए Maps SDK के साथ Maps Compose लाइब्रेरी का इस्तेमाल करने के लिए, आपको यह करना होगा:

  • Android Studio Arctic Fox को डाउनलोड करें और इंस्टॉल करें.

  • Android Studio में, Google Maps प्रोजेक्ट बनाएं. इसके लिए, आपको ये चीज़ें चाहिए होंगी:

    • Empty Compose Activity टेंप्लेट टाइप. यह टेंप्लेट, Jetpack Compose के लिए ज़रूरी डिपेंडेंसी जोड़ता है.
    • एसडीके का कम से कम वर्शन, Android API Level 23 ("Marshmallow"; Android 6.0) या इसके बाद का वर्शन होना चाहिए.
    • भाषा को Kotlin पर सेट किया गया हो.

  • एपीआई पासकोड पाएं और उसे अपने प्रोजेक्ट में जोड़ें.

  • अगले सेक्शन में बताए गए तरीके से, प्रोजेक्ट में Maps Compose लाइब्रेरी इंस्टॉल करें.

इंस्टॉल करना

Google Maps प्रोजेक्ट में Maps Compose लाइब्रेरी इंस्टॉल करने के लिए:

  1. मॉड्यूल-लेवल की build.gradle.kts फ़ाइल में, ये डिपेंडेंसी जोड़ें:

      dependencies {

    // Modern Android projects use version catalogs to manage dependencies. To include the Maps Compose library,
    // first add the following to your gradle/libs.versions.toml file:
    //
    // [versions]
    // mapsCompose = "8.4.0"
    //
    // [libraries]
    // maps-compose = { module = "com.google.maps.android:maps-compose", version.ref = "mapsCompose" }
    //
    // Android Maps Compose composables for the Maps SDK for Android
    implementation(libs.maps.compose)

    // If your project does not use a version catalog, you can use the following dependency instead:
    //
    //    implementation("com.google.maps.android:maps-compose:8.4.0")
}

  2. इन बदलावों को सिंक करने के लिए, Android Studio में अपने प्रोजेक्ट को फिर से बनाएं.

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

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

val singapore = LatLng(1.35, 103.87)
val singaporeMarkerState = rememberUpdatedMarkerState(position = singapore)
val cameraPositionState = rememberCameraPositionState {
  position = CameraPosition.fromLatLngZoom(singapore, 10f)
}
GoogleMap(
  modifier = Modifier.fillMaxSize(),
  cameraPositionState = cameraPositionState
) {
  Marker(
    state = singaporeMarkerState,
    title = "Singapore",
    snippet = "Marker in Singapore"
  )
}

इस उदाहरण में, मैप ने ज़्यादा से ज़्यादा जगह ली है और इसका कैमरा सिंगापुर के आस-पास केंद्रित है. कैमरे की पोज़िशन सेट करने के लिए, cameraPositionState में CameraPositionState भी बनाया जाता है और उपलब्ध कराया जाता है.

इसके बाद, उदाहरण में मैप के कॉन्टेंट में Marker कंपोज़ेबल को कॉल किया जाता है, ताकि मैप में मार्कर जोड़ा जा सके.

इस उदाहरण की तुलना, Views का इस्तेमाल करके मैप जोड़ने वाले उदाहरण से करने के लिए, QuickStart देखें. ध्यान दें कि कंपोज़ेबल फ़ंक्शन के लिए कम कोड की ज़रूरत होती है. साथ ही, आपको मैप के लाइफ़साइकल के बारे में चिंता करने की ज़रूरत नहीं होती.

मैप पर प्रॉपर्टी सेट करना

मैप पर प्रॉपर्टी सेट करने के लिए, MapProperties ऑब्जेक्ट या यूज़र इंटरफ़ेस (यूआई) से जुड़ी प्रॉपर्टी के लिए MapUiSettings ऑब्जेक्ट दें. मैप को फिर से कंपोज़ करने के लिए, इन ऑब्जेक्ट में बदलाव किया जा सकता है.

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

var uiSettings by remember { mutableStateOf(MapUiSettings()) }
var properties by remember {
  mutableStateOf(MapProperties(mapType = MapType.SATELLITE))
}

Box(Modifier.fillMaxSize()) {
  GoogleMap(
    modifier = Modifier.matchParentSize(),
    properties = properties,
    uiSettings = uiSettings
  )
  Switch(
    checked = uiSettings.zoomControlsEnabled,
    onCheckedChange = {
      uiSettings = uiSettings.copy(zoomControlsEnabled = it)
    }
  )
}

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