aster.cloud aster.cloud
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
aster.cloud aster.cloud
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
  • Engineering
  • Software Engineering

Compose For The Maps SDK For Android Now Available

  • aster.cloud
  • March 9, 2022
  • 3 minute read

Today, we are excited to share an open source library, Maps Compose, which enables you to use the Maps SDK for Android alongside Jetpack Compose. Previously, adding a map to your app with Compose entailed writing a lot of View interoperability code to bridge between Compose and the View-based MapView. Now, you no longer need to do that.

 


Partner with aster.cloud
for your next big idea.
Let us know here.



From our partners:

CITI.IO :: Business. Institutions. Society. Global Political Economy.
CYBERPOGO.COM :: For the Arts, Sciences, and Technology.
DADAHACKS.COM :: Parenting For The Rest Of Us.
ZEDISTA.COM :: Entertainment. Sports. Culture. Escape.
TAKUMAKU.COM :: For The Hearth And Home.
ASTER.CLOUD :: From The Cloud And Beyond.
LIWAIWAI.COM :: Intelligence, Inside and Outside.
GLOBALCLOUDPLATFORMS.COM :: For The World's Computing Needs.
FIREGULAMAN.COM :: For The Fire In The Belly Of The Coder.
ASTERCASTER.COM :: Supra Astra. Beyond The Stars.
BARTDAY.COM :: Prosperity For Everyone.

Compose is Android’s declarative, modern native UI toolkit. It simplifies and accelerates UI development by changing the way you think about writing the UI—just describe what you want your app to look like, and Compose will handle the rest. The same is true for Maps Compose, you can now add a map in your Android app with much less code.

This blog post shows you how you can install the library and covers some of its features.

Let’s get started!

Install the Maps Compose library

To install the Maps Compose library, add the following dependencies to your app-level build.gradle file:

 

dependencies {
    implementation "com.google.maps.android:maps-compose:1.0.0"
    implementation "com.google.android.gms:play-services-maps:18.0.2"
}

 

After you’ve added this new dependency to your app, rebuild your project in Android Studio to sync the changes. You also need to create and add an API key to your app. See Using API Keys to learn more.

Adding a map to your app 

Once you’ve added Maps Compose as a dependency to your app and have added an API key, you can start using the GoogleMap composable function in your app. If you’re new to Compose, composable functions are essentially the UI building blocks for a Compose-built application.

Read More  Using Pacemaker For SAP High Availability On Google Cloud - Part 1

The simplest example of adding a map to your app is shown below:

 

val singapore = LatLng(1.35, 103.87)
val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(singapore, 10f)
}
GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState
) {
    Marker(
        position = singapore,
        title = "Singapore",
        snippet = "Marker in Singapore"
    )
}

 

In the snippet above, the map occupies the maximum allowed space and its camera is centered around Singapore. A CameraPositionState is created and provided in cameraPositionState to set the camera’s position. Lastly, calling the Marker composable function in the content of the map adds a marker to the map.

To compare this example with an example adding a map using Views, see the existing quickstart in the Maps SDK for Android documentation page. Notice how Compose requires much less code, and you don’t have to worry about the map’s lifecycle anymore.

Setting properties on the map

Properties on the map can be set by providing a MapProperties object, or a MapUiSettings object for UI-related properties. You can remember these states and mutate them to trigger recomposition on the map.

In the snippet below, a Switch, which is a Compose Material Component, is added to the view to toggle zoom controls on the map.

 

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

 

Drawing on the map

Provide a content lambda to the GoogleMap composable to draw objects on the map, such as markers or polygons.

For example, the snippet below uses the Marker composable to add a marker to the map centered in Singapore.

Read More  Announcing New Google Research Innovators, Bringing More Science To The Cloud

 

val singapore = LatLng(1.35, 103.87)

GoogleMap(
    modifier = Modifier.fillMaxSize()
) {
    Marker(
        position = singapore,
        title = "Singapore",
        snippet = "Marker in Singapore"
    )
}

 

Controlling the camera

The map’s camera can be controlled by providing a CameraPositionState. 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, the snippet below moves the map’s camera to Sydney when the button is clicked.

 

val singapore = LatLng(1.35, 103.87)
val sydney = LatLng(-33.852, 151.211)

val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(singapore, 10f)
}

Box(Modifier.fillMaxSize()) {
    GoogleMap(
        modifier = Modifier.matchParentSize(),
        cameraPositionState = cameraPositionState
     )
     Button(
         onClick = { 
             cameraPositionState.move(CameraUpdateFactory.newLatLng(sydney))
         }
     ) {
        Text(text = "Animate camera to Sydney")
     }
}

 

Get started

 

We’re excited to improve support of Jetpack Compose with Google Maps so that adding a map to your app is faster, and simpler. To get started as quickly as possible, check out the accompanying sample app in the GitHub repository. If you’re new to Jetpack Compose and would like to learn more, check out the Jetpack Compose documentation.

Happy mapping!

 

For more information on Google Maps Platform, visit our website.

 

 

By: Chris Arriola (Developer Relations Engineer)
Source: Google Cloud Blog


For enquiries, product placements, sponsorships, and collaborations, connect with us at [email protected]. We'd love to hear from you!

Our humans need coffee too! Your support is highly appreciated, thank you!

aster.cloud

Related Topics
  • Android
  • Google Cloud
  • Google Maps Platform
  • Gradle
  • Jetback Compose
  • SDK
  • Tutorial
You May Also Like
View Post
  • Engineering

Just make it scale: An Aurora DSQL story

  • May 29, 2025
View Post
  • Engineering
  • Technology

Guide: Our top four AI Hypercomputer use cases, reference architectures and tutorials

  • March 9, 2025
View Post
  • Software Engineering
  • Technology

Claude 3.7 Sonnet and Claude Code

  • February 25, 2025
View Post
  • Computing
  • Engineering

Why a decades old architecture decision is impeding the power of AI computing

  • February 19, 2025
View Post
  • Engineering
  • Software Engineering

This Month in Julia World

  • January 17, 2025
View Post
  • Engineering
  • Software Engineering

Google Summer of Code 2025 is here!

  • January 17, 2025
View Post
  • Data
  • Engineering

Hiding in Plain Site: Attackers Sneaking Malware into Images on Websites

  • January 16, 2025
View Post
  • Computing
  • Design
  • Engineering
  • Technology

Here’s why it’s important to build long-term cryptographic resilience

  • December 24, 2024

Stay Connected!
LATEST
  • 1
    Just make it scale: An Aurora DSQL story
    • May 29, 2025
  • 2
    Reliance on US tech providers is making IT leaders skittish
    • May 28, 2025
  • Examine the 4 types of edge computing, with examples
    • May 28, 2025
  • AI and private cloud: 2 lessons from Dell Tech World 2025
    • May 28, 2025
  • 5
    TD Synnex named as UK distributor for Cohesity
    • May 28, 2025
  • Weigh these 6 enterprise advantages of storage as a service
    • May 28, 2025
  • 7
    Broadcom’s ‘harsh’ VMware contracts are costing customers up to 1,500% more
    • May 28, 2025
  • 8
    Pulsant targets partner diversity with new IaaS solution
    • May 23, 2025
  • 9
    Growing AI workloads are causing hybrid cloud headaches
    • May 23, 2025
  • Gemma 3n 10
    Announcing Gemma 3n preview: powerful, efficient, mobile-first AI
    • May 22, 2025
about
Hello World!

We are aster.cloud. We’re created by programmers for programmers.

Our site aims to provide guides, programming tips, reviews, and interesting materials for tech people and those who want to learn in general.

We would like to hear from you.

If you have any feedback, enquiries, or sponsorship request, kindly reach out to us at:

[email protected]
Most Popular
  • Understand how Windows Server 2025 PAYG licensing works
    • May 20, 2025
  • By the numbers: How upskilling fills the IT skills gap
    • May 21, 2025
  • 3
    Cloud adoption isn’t all it’s cut out to be as enterprises report growing dissatisfaction
    • May 15, 2025
  • 4
    Hybrid cloud is complicated – Red Hat’s new AI assistant wants to solve that
    • May 20, 2025
  • 5
    Google is getting serious on cloud sovereignty
    • May 22, 2025
  • /
  • Technology
  • Tools
  • About
  • Contact Us

Input your search keywords and press Enter.