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

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

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

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

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

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

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

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

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

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

    • बिना कॉम्पोज़ की गई गतिविधि का टेंप्लेट टाइप. यह टेंप्लेट, Jetpack Compose के लिए ज़रूरी डिपेंडेंसी जोड़ता है.
    • SDK टूल का कम से कम वर्शन, एपीआई 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.2.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 भी बनाया और उपलब्ध कराया जाता है.

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

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

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

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

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

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)
    }
  )
}

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