How to add a map to Android apps with Jetpack Compose

♪ [music] ♪ Hey, Android developers! If you're using Jetpack Compose to build native user interfaces in Android Apps, you might be wondering how to use Compose with Maps in your app. We have an open-source Maps Compose library on GitHub for the Maps SDK for Android. You can use it to simplify the process of adding a map to your Android app. The Maps Compose library makes it possible to add a map to your Android app with much less code than using the Maps SDK for Android alone. Let's take a look. You might be familiar with the dependency you use to install the Maps SDK for Android. To install the Maps Compose library, add one more dependency to your app-level <i>build.gradle</i> file alongside the usual dependency for the Maps SDK for Android. You'll get a notification at build time if there's a newer version available. After you've added this new dependency to your app, rebuild your project in Android Studio to sync the changes. As always, you need to create and add an API key to your code. I recommend protecting that API key with the Secrets Gradle Plugin. See our video on "Hide your API Keys on Android" to learn more about that. Now, you can start using the <i>GoogleMap</i> composable function in your app. If you're new to Compose, composable functions are essentially the UI building blocks for a Compose-built application. Here's the simplest example of adding a map to your app. First, I set up two variables to specify the center coordinates for the map and the camera position that defines the initial zoom level. In this code snippet, the map occupies the maximum allowed space, and its camera is centered around Singapore. A <i>cameraPositionState</i> object is created and provided in the <i>cameraPositionState</i> argument to set the camera's position. There's actually a second composable function here: <i>Marker.</i> Calling the <i>Marker</i> a composable function in the content of the map, adds a marker to the map. You can compare this example with the process of adding a map using Views, if you compare the Compose-based code with the Views-based code. See how Compose requires much less code, plus you don't have to worry about the map's lifecycle anymore. You can set properties on the map by providing a <i>MapProperties</i> object or a <i>MapUiSettings</i> object for UI-related properties. You can "remember" these states and mutate them to trigger recomposition on the map. In this code snippet, a Switch, which is a Compose Material Component, is added to the view to toggle zoom controls on the map. You can control the map's camera by using the <i>cameraPositionState</i> object. This object can be used to observe changes to the map's camera position and can also be used to send camera update commands to the map. For example, this code snippet moves the map’s camera to Sydney when the button is clicked. We're excited for you to try out the Maps Compose library and experience a faster way to add a map to your app. To get started, check out the accompanying sample app and related documentation in the GitHub repository. And if you’re new to Jetpack Compose and would like to learn more, check out the Jetpack Compose documentation. Both of these are linked in the description below. Thanks for watching, and happy mapping! ♪ [music] ♪ [laughs]

Channel: Google Maps Platform

Views: 12,365

Keywords: Google Maps Compose, jetpack compose map, jetpack compose maps, What is the Maps Compose library for Maps SDK, compose maps android, add map to android app, add map in kotlin, google map kotlin, Maps Jetpack Compose library for Maps SDK for Android, Android Apps Google Maps integration, Google Maps Platform developers, Maps Compose library, Maps Compose library for Maps SDK, Maps Compose library best practices, Maps Compose Library Android app integration, Angela Yu

Id: FNsgW0klhrM

Length: 3min 50sec (230 seconds)

Published: Wed Jun 29 2022