CODEWITHSUNDEEP
androidgoogle-mapsmapsandroid-theme
Harsha
Harsha

Reputation: 669

Google maps theme

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.

Upvotes: 6

Views: 3668

Answers (4)

Sanjib Suna
Sanjib Suna

Reputation: 284

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);

Upvotes: 6

Samiran
Samiran

Reputation: 2954

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"
      }
    ]
  }
]

Upvotes: 5

Saveen
Saveen

Reputation: 4210

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.

Upvotes: 3

Prasanth S
Prasanth S

Reputation: 3820

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.

Upvotes: 7

Related Questions