My question is simple. Is there a night mode for Google maps? So far I could only apply GoogleMap.MAP_TYPE_NORMAL | GoogleMap.MAP_TYPE_TERRAIN | GoogleMap.MAP_TYPE_SATELLITE but could not find Night Mode. I want something like this 
Please do not suggest me to use overlay, I already have tried. I cannot use it as I have to place markers on it.
Came across this post but it is 2 years old and I guess there should be some improvement.
Its easy just create a raw folder and right click raw folder and select new in that new select file and then type file name eg:map_in_night then click ok after it displays different formats don't confuse you just select json and click ok and in that json file just add below code
[
{
"featureType": "all",
"elementType": "geometry",
"stylers": [
{
"color": "#242f3e"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"lightness": -80
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#746855"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#263c3f"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#6b9a76"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#2b3544"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9ca5b3"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#38414e"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#212a37"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#746855"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2835"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#f3d19c"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#38414e"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#212a37"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#2f3948"
}
]
},
{
"featureType": "transit.station",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#17263c"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#515c6d"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"lightness": -20
}
]
}
]
in onMapReady just add
mMap = googleMap;
mMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(this, R.raw.mapstyle_night));
That's it
Google just announced having launched custom map styling for Android and iOS together with a new styling wizard that allows you to design the style once, and apply it across the board on all supported platforms: Android, iOS, JavaScript API, and even Static Maps API.
The Google Maps Android API developer docs even provide a working night mode style example. A code sample using custom styles is also available.
Head to :
https://mapstyle.withgoogle.com
Create what you need copy the json save it in a .json file.Put it on res/raw and then use:
mMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(this, R.raw.name));
You should call the above function on : onMapReady callback.
Make json file R.raw.my_map_style
[
{
"featureType": "administrative",
"elementType": "all",
"stylers": [
{
"saturation": "40"
},
{
"lightness": "5"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text",
"stylers": [
{
"hue": "#ff0000"
},
{
"visibility": "on"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#cb561a"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#858585"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#858585"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "on"
},
{
"color": "#00467f"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#a8a8a8"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"visibility": "on"
},
{
"hue": "#ffc800"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [
{
"hue": "#ffc800"
},
{
"saturation": "25"
},
{
"lightness": "42"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"lightness": "8"
},
{
"gamma": "0.75"
},
{
"saturation": "-6"
},
{
"hue": "#ffc600"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"weight": "1.77"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#aeaeae"
},
{
"visibility": "on"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#8bd188"
},
{
"lightness": "41"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#949595"
},
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"hue": "#ff0000"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#686868"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"weight": "1.03"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "transit",
"elementType": "labels",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#b3e9ff"
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"saturation": "-35"
},
{
"color": "#b6e0f3"
}
]
},
{
"featureType": "water",
"elementType": "labels.icon",
"stylers": [
{
"color": "#86c1ea"
}
]
}
]
Add in Class
val style = MapStyleOptions.loadRawResourceStyle(mContext, R.raw.my_map_style)
googleMap?.setMapStyle(style)
OutPut something like this in mobile
