Google Map Platform 101 — Part 2: Map Style

You can design the map style online. It’ll take two steps to make a new change on your Android application:

✒️1. Create Style of Map
⏳ 2. Use Map Style

✒️1. Create Style of Map

Link: Styling Wizard: Google Maps APIs

Click the URL:

Now, the Cloud-based Maps Styling is still beta testing. Let’s choose the old-style wizard.

Detail

You can pick these options to show the detail level on the map.

Theme

There six themes for you to pick. I like Retro.

More options — Style Editor

You can choose more options to change the color of map materials.

I’ll change the road color to green:

Finish → JSON

You will see your JSON output. Let’s open the Map Demo project.

I create a JSON file, map_style.json .

Paste the content, you are done! ✌️

⏳2. Use Map Style

MapsActivity.kt

• Set map style function

Reading a file in the raw folder, we need a try…catch block:

/**
 * Map style
 */
fun setMapStyle(map: GoogleMap) {
    try {

    } catch () {
        
    }
}

• Import file

val success = map.setMapStyle(
    MapStyleOptions.loadRawResourceStyle(
        this,
        R.raw.map_style
    )
)

Failure,

if (!success) {
    lge("MapStyle: Style parsing failed.")
}

• Catch error

} catch (e: Resources.NotFoundException) {
    lge("MapStyle: Can't find style. Error: $e")
}

• Load Map in LifecycleScope

lifecycleScope.launchWhenCreated {
    // Get map
    val googleMap = mapFragment.awaitMap()

    // Wait for map to finish loading
    googleMap.awaitMapLoad()

    // set location in San Francisco
    setToSF(googleMap)
    setMapStyle(googleMap)

    ...
}

🏃🏻Run,

🐰Oh, yeah! ✨ The new map style is ready!