kmp-maps

kmp-maps provides a unified map component for Compose Multiplatform applications, offering seamless integration with native map APIs on both Android and iOS platforms.

Check out the sample project in the /sample directory for complete usage examples.

iOS (Apple Maps)	Android (Google Maps)	Desktop (Google Maps)
Map view with circles, polygon, polylines and markers on iOS	Map view with circles, polygon, polylines and markers on Android	Map view with circles, polygon, polylines and markers on desktop

• Multi-Provider Support: Android (Google Maps), iOS (Apple Maps or Google Maps), and JVM/desktop (Google Maps JS).
• Fully Customizable Markers: Create markers using standard Compose Multiplatform code.
• GeoJSON Support: Easily render GeoJSON layers with customizable styling capabilities.
• Native Rendering: Powered by underlying native SDKs, ensuring smooth performance, correct gesture handling, and native look and feel.
• Rich Geometry Support: Draw interactive circles, polygons, and polylines with full control over colors, strokes, and fills.
• Location Services: Built-in location permission handling and user location display.
• Interactive Callbacks: Comprehensive event handling for map clicks, camera movements, POI interactions, and marker events.
• Compose Multiplatform: Built with Compose Multiplatform for modern UI development.

Choose the appropriate import based on your needs:

• Native Implementation: Uses native Google Maps on Android, native Apple Maps on iOS, and Google Maps JS API (via WebView) on desktop.

  import com.swmansion.kmpmaps.core.Map

• Universal Google Maps: Uses Google Maps SDK on Android and iOS, and Google Maps JS API on desktop.

  import com.swmansion.kmpmaps.googlemaps.Map

@Composable
fun MyMapScreen() {
    Map(
        modifier = Modifier.fillMaxSize(),
        properties = MapProperties(
            isMyLocationEnabled = true,
            mapType = MapType.NORMAL,
        ),
        uiSettings = MapUISettings(
            myLocationButtonEnabled = true,
            compassEnabled = true
        ),
        cameraPosition = CameraPosition(
            coordinates = Coordinates(latitude = 50.0619, longitude = 19.9373),
            zoom = 13f
        ),
        markers = listOf(
            Marker(
                coordinates = Coordinates(latitude = 50.0486, longitude = 19.9654),
                title = "Software Mansion",
                androidSnippet = "Software house"
            )
        ),
        onMarkerClick = { marker ->
            println("Marker clicked: ${marker.title}")
        },
        onMapClick = { coordinates ->
            println("Map clicked at: ${coordinates.latitude}, ${coordinates.longitude}")
        }
    )
}

For installation instructions, platform setup, and configuration details, visit our dedicated document.

Check out our dedicated documentation page for API reference.

We welcome contributions! Please feel free to submit a Pull Request.

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.

Made by @software-mansion and community 💛