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

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

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

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

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

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

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

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

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

  • Android Studio में, Google Maps प्रोजेक्ट बनाएं. इसके लिए:

    • Empty Compose Activity टेंप्लेट टाइप. यह टेंप्लेट, Jetpack Compose के लिए ज़रूरी डिपेंडेंसी जोड़ता है.
    • कम से कम एसडीके को एपीआई 21: Android 5.0 (Lollipop) या उसके बाद के वर्शन पर सेट किया गया हो.
    • भाषा को Kotlin पर सेट किया गया हो.

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

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

इंस्टॉल करना

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

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

      dependencies {

    // Android Maps Compose composables for the Maps SDK for Android
    implementation("com.google.maps.android:maps-compose:6.4.1")
}

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

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

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

val singapore = LatLng(1.35, 103.87)
val singaporeMarkerState = rememberMarkerState(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)
    }
  )
}

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