Flutter Google Maps. Displaying style. How can I get this working?

1
votes

Due to a change in Google maps API to Widget-based and some sort of change to flutter, I'm receiving the following error:

Error: The method 'setMapStyle' isn't defined for the class 'GoogleMapController'.

I'm trying to load a custom style for my map from either .json or .txt. Here's my code:

    SizedBox(
      width: MediaQuery.of(context)
          .size
          .width, // or use fixed size like 200
      height: 250,
      child: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    ),

oncreate and style:

  void _onMapCreated(GoogleMapController controller) async {
    Completer<GoogleMapController> _controller = Completer();
    mapController = controller;
    _setStyle(controller);
  }

  void _setStyle(GoogleMapController controller) async {
    String value = await DefaultAssetBundle.of(context)
        .loadString('assets/map_style.text');
    controller.setMapStyle(value);
  }

Anyone know how to get around this? :/

1
google-mapsflutterdart
If you updated the package the function might have changed or it has been renamed – king mort

1 Answers

2
votes

I have used this method and it worked.

onMapCreated: (GoogleMapController controller) {
              controller.setMapStyle(Utils.mapStyles);}

i saved the stylr in a dart file as

  class Utils {
  static String mapStyles = '''[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  .......
]''';
}