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 लेवल 23 ("Marshmallow"; Android 6.0) या इसके बाद के वर्शन पर सेट हो.
    • Language को 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 कंपोज़ेबल को कॉल किया जाता है, ताकि मैप में मार्कर जोड़ा जा सके.

इस उदाहरण की तुलना, व्यू का इस्तेमाल करके मैप जोड़ने वाले उदाहरण से करने के लिए, 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)
    }
  )
}

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