Flutter styled map

Question

Is it possible to use json generated from Google Styling Wizard to stylize the Flutter native map?

Answer 1

There is no such ability in current version. But soon it can be achieved due to this pull request

---

Update

Finally it has been merged with #1697 pull request! And it's published in 0.5.16 version of google_maps_flutter.

How to

To use this feature invoke setMapStyle on GoogleMapController instance and pass style string as a parameter.

e.g.

GoogleMapController mapController;
void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    mapController.setMapStyle('[{"featureType": "all","stylers": [{ "color": "#C0C0C0" }]},{"featureType": "road.arterial","elementType": "geometry","stylers": [{ "color": "#CCFFFF" }]},{"featureType": "landscape","elementType": "labels","stylers": [{ "visibility": "off" }]}]');
  }

From the docs:

Sets the styling of the base map.

Set to null to clear any previous custom styling.

If problems were detected with the [mapStyle], including un-parsable styling JSON, unrecognized feature type, unrecognized element type, or invalid styler keys: [MapStyleException] is thrown and the current style is left unchanged.

The style string can be generated using map style tool. Also, refer iOS and Android style reference for more information regarding the supported styles.

Answer 2

Yes. Copy and paste the JSON into the styles variable in your initMap function, like this:

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 40.674, lng: -73.945},
        zoom: 12,
        styles: [
            {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
            {
                featureType: 'administrative.locality',
                elementType: 'labels.text.fill',
                stylers: [{color: '#d59563'}]
            }
        ]
    });
}

Read this for more info about styling the Google maps.