ZOFTINO.COM android and web dev tutorials

Google Map Styles Android Examples

Google map allows you to define and apply styles to maps so that you can hide some features which are having no importance in your application context or change visual display of features such as transit, water, roads, landscapes, administrative areas and point of interest such as parks, schools, attraction and sports complexes etc. One important point to note is that map styles are applicable to only normal maps.

In this post, you can learn how to style Google maps in android app, defining styles in JSON, about map style elements and defining custom styles using styling wizard.

To know how to setup Google maps API in android and about Google maps android API read Google maps android tutorial and displaying maps in android apps using MapView tutorial.

If you want to learn android and its latest features with examples. Please visit android tutorials to learn android concepts, components and libraries with examples.

Google Map Styles Android Example Output

android google map style example

Google Map Styles Android Example

After following the required steps to setup Google play services in your android project, first define map styles in json format and save the styles json file in res/raw folder. Following section gives detailed information about Google map style elements and how to define the styles.

 [
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#f50057"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ef6c00"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#7b1fa2"
      }
    ]
  },
  {
    "featureType": "poi.attraction",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#00897b"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]
 

Map style defined in json can be applied to GoogleMap object by calling setMapStyle method and passing resource identifier of the style as shown below.

 public class GoogleMapStylesActivity extends AppCompatActivity implements OnMapReadyCallback {

    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.maps_infowindow);

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.gmap);
        mapFragment.getMapAsync(this);
    }
    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        mMap.setMinZoomPreference(8);

        boolean success = googleMap.setMapStyle(
                MapStyleOptions.loadRawResourceStyle(
                        this, R.raw.map_style_json));

        mMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(47.6101497, -122.2015159)));
    }
}
 

Add map fragment to layout as shown below.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GoogleMapActivity">
    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/gmap"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

Defining Google Map Styles

As shown in the above example, Google map style is define in JSON. There are three style elements, featureType, elementType and styler, which can be defined for each style item.

Element featureType is used to name the target feature, to which you want to apply the style, such as administrative area, roads, water, landscape, point of interest, and transit.

Administrative feature types

administrative, administrative.country, administrative.land_parcel, administrative.locality, administrative.neighborhood, and administrative.province.

Landscape feature types

landscape, landscape.man_made, landscape.natural, landscape.natural.landcover and landscape.natural.terrain.

POI feature types

poi, poi.attraction, poi.business, poi.government, poi.medical, poi.park, poi.place_of_worship, poi.school and poi.sports_complex.

Road feature types

road, road.arterial, road.highway, road.highway.controlled_access, and road.local.

Transit feature types

transit, transit.line selects, transit.station, transit.station.airport, transit.station.bus and transit.station.rail

ElementType defines part of the selected feature such as geometry and labels.

Element types

all, geometry, geometry.fill, geometry.stroke, labels, labels.icon, labels.text, labels.text.fill and labels.text.stroke

Stylers element is used to define formats such as color, saturation, and visibility.

For complete details of map styles, see map style reference.

Hiding Map Feature

You can hide map features such as roads, landscapes, point of interest etc by defining and applying styles. To hide features on the map, you need to set visibility to off (in stylers element) for the selected feature types.

For example, below JSON can be used to hide locality names and high ways.

android google map style hiding feature example
 [
  {
    "featureType": "administrative.locality",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#7b1fa2"
      }
    ]
  }
]
 

Defining Custom Map Style

To define custom map style, Google provides maps styling wizard, using which you can easily create custom map styles instead of spending time on defining map style Json object manually from scratch.

Using the map styling wizard, you can select one of the pre define theme and adjust all attributes to create a map style which suits your app theme and copy the generated JSON text and save it in res/raw folder to use in your project.

google map custom style example
 [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8ec3b9"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1a3646"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#64779e"
      }
    ]
  },
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#334e87"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6f9ba5"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "poi.business",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi.government",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#fc5b3f"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#917ac0"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3C7680"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#304a7d"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2c6675"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#255763"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#b0d5ce"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3a4762"
      }
    ]
  },
  {
    "featureType": "transit.station.airport",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#60db66"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#0e1626"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#4e6d70"
      }
    ]
  }
]