Giter VIP home page Giter VIP logo

android-maps-compose's Introduction

Tests Stable Discord Apache-2.0

Maps Compose ๐Ÿ—บ

Description

This repository contains Jetpack Compose components for the Maps SDK for Android.

Requirements

  • Kotlin-enabled project
  • Jetpack Compose-enabled project
  • An API key
  • API level 21+

Usage

Adding a map to your app looks like the following:

val singapore = LatLng(1.35, 103.87)
GoogleMap(
    modifier = Modifier.fillMaxSize(),
    googleMapOptionsFactory = {
        GoogleMapOptions().camera(CameraPosition.fromLatLngZoom(singapore, 10f))
    }
)

Creating and configuring a map

Configuring the map can be done either by passing a GoogleMapOptions instance to initialize the map, or by passing a MapProperties object into the GoogleMap composable.

// Initialize map by providing a googleMapOptionsFactory
GoogleMap(
    googleMapOptionsFactory = {
        GoogleMapOptions().mapId("MyMapId")
    }
)

// ...or set properties using MapProperties which you can use to recompose the map
var mapProperties by remember {
    mutableStateOf(
        MapProperties(maxZoomPreference = 10f, minZoomPreference = 5f)
    )
}
Box(Modifier.fillMaxSize()) {
    GoogleMap(properties = mapProperties)
    Button(onClick = {
        mapProperties = mapProperties.copy(
            isBuildingEnabled = !mapProperties.isBuildingEnabled
        )
    }) {
        Text(text = "Toggle isBuildingEnabled")
    }
}

Controlling the map's camera

Camera changes and updates can be observed and controlled via CameraPositionState.

val singapore = LatLng(1.35, 103.87)
val cameraPositionState: CameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(singapore, 11f)
}
Box(Modifier.fillMaxSize()) {
  GoogleMap(cameraPositionState = cameraPositionState)
  Button(onClick = {
    // Move the camera to a new zoom level
    cameraPositionState.move(CameraUpdateFactory.zoomIn())
  }) {
      Text(text = "Zoom In")
  }
}

Drawing on a map

Drawing on the map, such as adding markers, can be accomplished by adding child composable elements to the content of the GoogleMap.

GoogleMap(
  //...
) {
    Marker(position = LatLng(-34, 151), title = "Marker in Sydney")
    Marker(position = LatLng(35.66, 139.6), title = "Marker in Tokyo")
}

Sample App

This repository includes a sample app.

To run it, you'll have to:

  1. Get a Maps API key
  2. Add an entry in local.properties that looks like MAPS_API_KEY=YOUR_KEY
  3. Build and run

Installation

dependencies {
    implementation 'com.google.maps.android:maps-compose:1.0.1'
    
    // Make sure to also include the latest version of the Maps SDK for Android 
    implementation 'com.google.android.gms:play-services-maps:18.0.2'
}

Documentation

You can learn more about all the extensions provided by this library by reading the reference documents.

Support

Encounter an issue while using this library?

If you find a bug or have a feature request, please file an issue. Or, if you'd like to contribute, send us a pull request and refer to our code of conduct.

You can also reach us on our Discord channel.

android-maps-compose's People

Contributors

adamp avatar arriolac avatar barbeau avatar chibatching avatar googlemaps-bot avatar semantic-release-bot avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.