Google Maps Flutter setMapStyle not taking effect - city names still showing

Question

I am having issues getting the Google Maps styling to work in my Flutter application on Android. I am using the google_maps_flutter plugin version 0.5.30. I got the styling JSON from the Google Maps Styling wizard by suppressing all labels, roads and landmarks by setting the dial to the left extreme and took the JSON from that. I am loading that from an asset file in my widget's initState() method and in the onMapCreated method am calling mapController.setMapStyle with the loaded JSON. The call succeeds, but the map still shows the names of cities.

I have tried calling setState after the setMapStyle call as opposed to putting the setMapStyle() call inside setState(() {..}) but that didn't work either.

Following is a link to the Google Maps Styling wizard where the same JSON shows no cities or any labels. https://1drv.ms/u/s!AoeWKBC0aN0DhoA8qIr3SehO1o4UhQ

Following is a link to the screenshot from my Android Tablet where the app is deployed and it shows the map (with mapStyle using the same JSON) but it shows cities and province names. https://1drv.ms/u/s!AoeWKBC0aN0DhoA7MOALo0w7NWixuA?e=BKw9fu

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        ),
      home: MyHomePage(title: 'Flutter Google MapsPage'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GoogleMapController mapController;
  String mapStyle;

  // following are lat/long of Anantapur which is roughly at the
  // center of South India
  final LatLng center = const LatLng(14.68, 77.6);

  double INITIAL_ZOOM=6.0;
  @override
  void initState() {
    super.initState();
    //loading map style JSON from asset file
    DefaultAssetBundle.of(context).loadString('assets/googleMapStyle1.json').then((string) {
      this.mapStyle = string;
    }).catchError((error) {
      log(error.toString());
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          children: <Widget>[
            Expanded(
              child: GoogleMap(
                onMapCreated: mapCreated,
                mapType: MapType.terrain,
                initialCameraPosition: CameraPosition(
                  target: center,
                  zoom: INITIAL_ZOOM,
                )
              )
            )
          ],
      ),
    ));
  }

  void mapCreated(GoogleMapController controller) {
    //set style on the map on creation to customize look showing only map features
    //we want to show.
    log(this.mapStyle);
    setState(() {
      this.mapController = controller;
      if (mapStyle != null) {
        this.mapController.setMapStyle(this.mapStyle).
        then((value) {
          log("Map Style set");

        }).catchError((error) =>
            log("Error setting map style:" + error.toString()));
      }
      else {
        log(
            "GoogleMapView:_onMapCreated: Map style could not be loaded.");
      }
   });
  }

}

The following is the JSON in assets/googleMapStyle1.json:

[
  {
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

Following is my pubspec.yaml:

name: googlemapsstyling
description: Google Maps Flutter styling issuue

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev


version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^0.5.30

  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

# The following section is specific to Flutter.
flutter:
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
      - assets/googleMapStyle1.json

Any pointers to what I am doing wrong or is this a bug?

Answer 1

String _mapStyle = "..."

@override
  Widget build(BuildContext context) {
    ...
     GoogleMap(
        style:  _mapStyle,
    )
}

Answer 2

Getting your map style data from a file: await rootBundle.loadString('assets/themes/map/myCustomStyle.json') - this should be loaded in advance otherwise calling next line of code wont update map style; Updating Google maps styling - mapController.setMapStyle(StringStyleData);

Instead of putting all these style data into one JSON file and loading it - costly operation, I would recommend this:

• personalize and take JSON data from https://mapstyle.withgoogle.com/;
• put the JSON into one separate dart file like this: String or const yourStringName = '''JSON Data Here''';
• import the dart file you created with JSON data assigned to Sting or const;
• ready to apply any time and will update the map instantly - mapController.setMapStyle(yourStringName);

Answer 3

After you described your custom map style, mapType: MapType.terrain, override the custom theme in the GoogleMap Widget.

The Updated Code is Below or just comment out or remove the maptype: line.

---

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          children: <Widget>[
            Expanded(
              child: GoogleMap(
                onMapCreated: mapCreated,
                //mapType: MapType.terrain, //This was causing the problem
                initialCameraPosition: CameraPosition(
                  target: center,
                  zoom: _initialZoom,
                )
              )
            )
          ],
      ),
    ));
  }

---

Output:

Answer 4

I'm not sure if this would work but you could try running this

    //loading map style JSON from asset file
    DefaultAssetBundle.of(context).loadString('assets/googleMapStyle1.json').then((string) {
      this.mapStyle = string;
    }).catchError((error) {
      log(error.toString());
    });

in mapCreated, could be an issue with the context changing