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  Android Dev Summit 2019 | What’s New in Room

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  Google And Uber Deepen Partnership To Reimagine The Customer Experience

 

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
  • Technology

Apple supercharges its tools and technologies for developers to foster creativity, innovation, and design

  • June 9, 2025
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

Stay Connected!
LATEST
  • 1
    Pure Accelerate 2025: All the news and updates live from Las Vegas
    • June 18, 2025
  • 2
    ‘This was a very purposeful strategy’: Pure Storage unveils Enterprise Data Cloud in bid to unify data storage, management
    • June 18, 2025
  • What is cloud bursting?
    • June 18, 2025
  • 4
    There’s a ‘cloud reset’ underway, and VMware Cloud Foundation 9.0 is a chance for Broadcom to pounce on it
    • June 17, 2025
  • What is confidential computing?
    • June 17, 2025
  • Oracle adds xAI Grok models to OCI
    • June 17, 2025
  • Fine-tune your storage-as-a-service approach
    • June 16, 2025
  • 8
    Advanced audio dialog and generation with Gemini 2.5
    • June 15, 2025
  • 9
    A Father’s Day Gift for Every Pop and Papa
    • June 13, 2025
  • 10
    Global cloud spending might be booming, but AWS is trailing Microsoft and Google
    • June 13, 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
  • Google Cloud, Cloudflare struck by widespread outages
    • June 12, 2025
  • What is PC as a service (PCaaS)?
    • June 12, 2025
  • 3
    Crayon targets mid-market gains with expanded Google Cloud partnership
    • June 10, 2025
  • By the numbers: Use AI to fill the IT skills gap
    • June 11, 2025
  • 5
    Apple services deliver powerful features and intelligent updates to users this autumn
    • June 11, 2025
  • /
  • Technology
  • Tools
  • About
  • Contact Us

Input your search keywords and press Enter.