Google Maps styling applies only above zoom level 13, below that roads turn black instead of styled color

Question

I'm using Flutter with the Google Maps Flutter plugin to display a map in my application. I've applied custom styling to the map using the setMapStyle method to change the color of roads to a specific shade of gray (#BDBDBD). However, I've noticed that the styling only applies when the map is zoomed in to level 13 or below. Above that zoom level, the roads revert to the default black color.

I have changed the zoom to 14, 15 and above but still seeing black roads. I want the custom styling to be consistently applied to the roads at all zoom levels. How can I achieve this? Any insights or suggestions would be greatly appreciated.

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

class MapPage extends StatefulWidget {
  final bool smallMap;
  final double latitude;
  final double longitude;

  const MapPage(
      {Key? key,
      this.smallMap = false,
      required this.latitude,
      required this.longitude})
      : super(key: key);

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

class _MapPageState extends State<MapPage> {
  bool _mapLoading = true;
  Completer<GoogleMapController> _controllerCompleter =
      Completer<GoogleMapController>();
  String mapStyle = '''
[
    {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "on"
            },
            {
          "color": "#BDBDBD"
            }
        ]
    }
];
  ''';

  @override
  void initState() {
    super.initState();
    applyMapStyle();
  }

  Future<void> applyMapStyle() async {
    final GoogleMapController controller = await _controllerCompleter.future;
    // Apply the map style
    await controller.setMapStyle(mapStyle);
  }

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text('Map Page'),
      ),
      body: Stack(
        children: [
          SizedBox(
            height: widget.smallMap
                ? 200
                : MediaQuery.of(context).size.height -
                    kToolbarHeight -
                    MediaQuery.of(context).padding.top,
            child: GoogleMap(
              initialCameraPosition: CameraPosition(
                target: LatLng(widget.longitude, widget.latitude),
                zoom: 13,
              ),
              markers: _buildMarkers(),
              onMapCreated: (GoogleMapController controller) {
                _controllerCompleter.complete(controller);
                setState(() {
                  _mapLoading = false;
                });
              },
            ),
          ),
          if (_mapLoading)
            Container(
              height: size.height,
              width: size.width,
              color: Colors.grey[100],
              child: Center(
                child: CircularProgressIndicator(),
              ),
            ),
        ],
      ),
    );
  }

  Set<Marker> _buildMarkers() {
    return {
      Marker(
        markerId: MarkerId('YourMarkerId'),
        position: LatLng(widget.longitude, widget.latitude),
        infoWindow: InfoWindow(
          title: 'Your Location',
        ),
        icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
      ),
    };
  }
}

I tried setting a custom map style using the Google Maps Flutter plugin's setMapStyle method. I modified the JSON string representing the map style to specify the desired color for roads (#BDBDBD).

I expected that the custom map style would be applied to the roads consistently across all zoom levels. Specifically, I wanted the roads to appear in the specified shade of gray (#BDBDBD) regardless of the zoom level. However, the custom styling only seemed to take effect when the map was zoomed in to level 13 or below. Above that zoom level, the roads reverted to the default black color.