Google Maps Compose Web

A library for using Google Maps in Compose HTML.

This library is inspired by Maps Compose for Android.

Usage

Adding a GoogleMap to your Compose UI as follows:

val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition(
        center = LatLng(23.2, 120.5),
        zoom = 8.0,
    )
}
GoogleMap(
    apiKey = "YOUR_API_KEY",
    cameraPositionState = cameraPositionState,
    attrs = {
        style {
            width(100.percent)
            height(100.percent)
        }
    }
)

Configuring the map

Configuring the map

Configuring the map can be done by passing a MapOptions object to the GoogleMap composable.

val mapOptions = remember {
    MapOptions(
        fullscreenControl = false,
        // ...
    )
}

GoogleMap(
    // ...
    mapOptions = mapOptions,
) {
    // ...
}

Handling map events

Handling map events

Map events can be handled by passing a lambda expression to the GoogleMap composable.

GoogleMap(
    // ...
    onClick = {
        console.log("Map clicked!")
    },
    onDrag = {
        console.log("Map dragged!")
    },
    // Add more events here
) {
    // ...
}

Drawing on the map

Drawing on the map

Adding child composable, such as Marker, to the GoogleMap composable.

GoogleMap(
    // ...
) {
    Marker(
        state = MarkerState(position = LatLng(23.2, 120.5)),
        onClick = {
            console.log("Marker clicked!")
        },
        // ...
    )
}

To display custom content on the map, use the OverlayView composable.

GoogleMap(
    // ...
) {
    OverlayView(
        bounds = LatLngBounds(
            // ...
        ),
        content = {
            Div {
                Text("Overlay View")
            }
        }
    )
}

Currently, the following drawing composable are supported:

• Marker
• Polygons (polygon, polyline, rectangle, circle)
• InfoWindow
• OverlayView

Marker's Info Window

Marker's Info Window

An info window can be added to a Marker directly by passing a lambda expression to the infoContent parameter.

To show the info window, call showInfoWindow() on the MarkerState.

state = rememberMarkerState()

Marker(
    state = state,
    // ...
    infoContent = {
        Div {
            Span({ style { fontSize(20.px) } }) {
                Text("Info Window Title")
            }
            Text("Info Window Content")
        }
    }
) 

// show the info window
state.showInfoWindow()

Map Layers

Map Layers

Map layers can be added to the GoogleMap composable.

GoogleMap(
    // ...
) {
    if (showTrafficLayer) {
        TrafficLayer()
    }
}

Currently, TrafficLayer, TransitLayer, BicyclingLayer, HeatmapLayer and KmlLayer are supported.

Setup

Add the following to your build.gradle.kts file:

repositories {
    maven("https://jitpack.io")
}

kotlin {
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation("com.github.chihsuanwu:google-maps-compose-web:<version>")
            }
        }
    }
}

Current State

This library is currently in alpha state and the API is subject to change.

There are still many advanced features that are not yet supported. However, if you are a user of Compose HTML and would like to use Google Maps in your web application, this library is still worth a try.

Feedback and contributions are highly appreciated! Feel free to open an issue or submit a pull request.

If you like this library, please consider starring this project, so we know that it is useful to you.