How to give dark tint to Google Maps in Android

Question

I am using Google Maps in my Android app, I want to give maps a little tint, it is too bright. I tried using another box but the markers also get tinted too, I want only the map to have a slightly dark color and the markers to be bright.

Code-

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(contentPadding)
) {
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        googleMapOptionsFactory = {
            GoogleMapOptions().mapId(MapDefaults.mapId)
        },
        cameraPositionState = cameraPositionState,
        properties = style.mapProperties,
        uiSettings = style.mapUiSettings,
        onMapLoaded = {
            onMapLoaded()
        }
    ) {
       //Markers
    }

}

Like this in FlightRadar24 map-

only the map has dark tint, markers are bright.

If I use Night mode then whole map gets dark-

Same for Dark mode -

But in FlightRadar24 the background map is a normal type with a light black cover. How can I get that?

Answer 1

As Shreyas P said you can do it simply using JSON, here is a full step by step approach to style the Google Map.

Step 1. Create a JSON Style File

• Create a new file named map_style.json.
• Add the following content to it for a dark theme:

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#212121"  // Dark color for geometry
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"  // Hide icons
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"  // Light grey color for text
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#212121"  // Dark background for text labels
      }
    ]
  }
]

If you want full description that how the JSON is made click here.

Step 2. Load the JSON in Your Code

• Place the JSON file into res/raw directory.
• Use MapStyleOptions.loadRawResourceStyle() to load the JSON style using Shreyas P's method.

val context = LocalContext.current

val mapProperties = remember {
    MapProperties(
        mapStyleOptions = MapStyleOptions.loadRawResourceStyle(context, R.raw.map_style)
    )
}

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(contentPadding)
) {
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        googleMapOptionsFactory = {
            GoogleMapOptions().mapId(MapDefaults.mapId)
        },
        cameraPositionState = cameraPositionState,
        properties = mapProperties,
        uiSettings = style.mapUiSettings,
        onMapLoaded = {
            onMapLoaded()
        }
    ) {
       // Markers remain unaffected by the map style
    }
}

I hope it's helpful