Custom google maps widget is showing a grey screen

Hey Flutter Community,

I'm not a Flutter developer at all (zero experience writing Dart code 😅), but I used ChatGPT to help me create a custom widget for showing a route with polyline on Google Maps — with origin, destination, and some waypoints.

It looks good and no any errors in the editor, and I've checked everything, I could possibly check.

But when I run it... all I see is a grey screen with the Google logo and zoom buttons. No route, no markers, no map tiles.

I’m guessing I’ve missed something basic.

I’d really appreciate any help, even small tips — this has me totally stuck!

Here's the code as used for the custom widget:

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:google_maps_flutter/google_maps_flutter.dart' as gmaps;
import 'package:google_map_polyline_new/google_map_polyline_new.dart';

class CustomRouteMap extends StatefulWidget {
  const CustomRouteMap({
    super.key,
    this.width,
    this.height,
    required this.apiKey,
    required this.originLat,
    required this.originLng,
    required this.destinationLat,
    required this.destinationLng,
    required this.waypointLats,
    required this.waypointLngs,
    this.polylineColor,
    this.markerHue,
  });

  final double? width;
  final double? height;

  final String apiKey;
  final double originLat;
  final double originLng;
  final double destinationLat;
  final double destinationLng;
  final List<double> waypointLats;
  final List<double> waypointLngs;

  final Color? polylineColor;
  final double? markerHue;

  @override
  State<CustomRouteMap> createState() => _CustomRouteMapState();
}

class _CustomRouteMapState extends State<CustomRouteMap> {
  late gmaps.GoogleMapController _mapController;
  final Set<gmaps.Polyline> _polylines = {};
  final Set<gmaps.Marker> _markers = {};
  late GoogleMapPolyline _googleMapPolyline;
  List<gmaps.LatLng> _routeCoords = [];

  late gmaps.LatLng origin;
  late gmaps.LatLng destination;
  late List<gmaps.LatLng> waypoints;

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

    origin = gmaps.LatLng(widget.originLat, widget.originLng);
    destination = gmaps.LatLng(widget.destinationLat, widget.destinationLng);
    waypoints =
        _buildWaypointsFromLists(widget.waypointLats, widget.waypointLngs);

    _googleMapPolyline = GoogleMapPolyline(apiKey: widget.apiKey);

    WidgetsBinding.instance.addPostFrameCallback((_) {
      _initializeMap();
    });
  }

  List<gmaps.LatLng> _buildWaypointsFromLists(
      List<double> lats, List<double> lngs) {
    final count = lats.length < lngs.length ? lats.length : lngs.length;
    return List.generate(count, (i) => gmaps.LatLng(lats[i], lngs[i]));
  }

  Future<void> _initializeMap() async {
    try {
      final route = await _googleMapPolyline.getCoordinatesWithLocation(
        origin: origin,
        destination: destination,
        mode: RouteMode.driving,
      );

      if (!mounted || route == null || route.isEmpty) return;

      final markerIcon = gmaps.BitmapDescriptor.defaultMarkerWithHue(
        widget.markerHue ?? gmaps.BitmapDescriptor.hueRed,
      );

      setState(() {
        _routeCoords = route;

        _polylines.add(gmaps.Polyline(
          polylineId: const gmaps.PolylineId('route_polyline'),
          visible: true,
          points: _routeCoords,
          width: 5,
          color: widget.polylineColor ?? Colors.blue,
          startCap: gmaps.Cap.roundCap,
          endCap: gmaps.Cap.roundCap,
        ));

        _markers
          ..clear()
          ..add(gmaps.Marker(
            markerId: const gmaps.MarkerId('destination'),
            position: destination,
            icon: markerIcon,
            infoWindow: const gmaps.InfoWindow(title: 'Destination'),
          ));

        for (int i = 0; i < waypoints.length; i++) {
          _markers.add(gmaps.Marker(
            markerId: gmaps.MarkerId('waypoint_$i'),
            position: waypoints[i],
            icon: markerIcon,
            infoWindow: gmaps.InfoWindow(title: 'Stop ${i + 1}'),
          ));
        }
      });
    } catch (e) {
      debugPrint('❌ Map init failed: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width ?? double.infinity,
      height: widget.height ?? 300,
      child: gmaps.GoogleMap(
        initialCameraPosition: gmaps.CameraPosition(
          target: origin,
          zoom: 13,
        ),
        polylines: _polylines,
        markers: _markers,
        onMapCreated: (controller) => _mapController = controller,
        mapType: gmaps.MapType.normal,
        myLocationEnabled: true,
        myLocationButtonEnabled: true,
      ),
    );
  }
}

Thanks in advance, you're awesome! 💙