Google maps theme
Asked Answered
C

4

6

I have implemented Google maps in my Android application and everything looked clean until few days. Previously the maps looked like the below image

enter image description here

Now the map has a new look similar to image below

enter image description here I have not changed or updated anything in the implemention, yet there are dark lines on the map which makes it difficult to read the places.

Any help is appreciated. Thanks

Note: I have downloaded the images from Google for reference, please ignore the xml layout changes.

Carvelbuilt answered 18/9, 2018 at 9:8 Comment(3)
The second image is from Uber. Can you replace with your app's screensMurrelet
@Murrelet the map looks similar to the second image in my app also.Carvelbuilt
have you tried TERRAIN view of Google Map map.setMapType(GoogleMap.MAP_TYPE_TERRAIN); map.invalidate();?Jacobin
Z
7

I guess u might added map theme, if added please remove or change theme

    //Custom Theme
    MapStyleOptions style = MapStyleOptions.loadRawResourceStyle(this.context, R.raw.my_map_style);
    map.setMapStyle(style);

Changing theme Please refer here.

Create theme from here.

Zasuwa answered 24/9, 2018 at 8:37 Comment(0)
D
6

First go the official side i.e https://mapstyle.withgoogle.com/ and get the json for your style value and copy to the raw folder in resources

And then apply on your onMapready() like this

MapStyleOptions mapStyleOptions = MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json);
mGoogleMap.setMapStyle(mapStyleOptions);
Drabeck answered 27/9, 2020 at 11:4 Comment(0)
D
5

Rewrite in style json file. try to different color code change.

java code

MapStyleOptions mapStyleOptions = MapStyleOptions.loadRawResourceStyle(activity, 
R.raw.map_style);
googleMap.setMapStyle(mapStyleOptions);

raw/map_style.json file

 [
  {
    "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"
      }
    ]
  }
]
Depose answered 26/9, 2018 at 10:40 Comment(0)
M
3

you can use Style JSON file. Here i have attached sample json. You can download and apply with your project.

try {
     boolean success = mMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, R.raw.maps_style));

     // mMap : It is the object of a map. 

     if (!success) {
         Log.e("tag", "Style parsing failed.");
        }
 } catch (Resources.NotFoundException e) {
            Log.e("tag", "Can't find style. :" + e);
 }

You can take style from google.developer website too. Thanks hope this will help you.

Milquetoast answered 25/9, 2018 at 20:8 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.