How do I fix the polyline issue and the googlemapcontroller

Question

I am new to working with maps or flutter in general. I was following a tutorial and I have been able to do pretty much actually. However;

I am unable to show the polylines on the map even though everything else is visible including the map itself and the markers. It is also adjusting the camera position with the route on my simulator properly.
When I first load the page with the map in it, it doesn't go past this line unless I save my file again or I hot reload and until then the texting widget with loading will keep showing even if the current location is given back.

    final GoogleMapController googleMapController = await _controller.future;

Full code on the map widget file

class _MapsAndLocationState extends State<MapsAndLocation> {
  final Completer<GoogleMapController> _controller = Completer();
  static const LatLng sourcelocation = LatLng(37.33500926, -122.03272188);
  static const LatLng destination = LatLng(37.43429383, -122.10600055);

  List<LatLng> polylineCoordinates = [];
  LocationData? currentlocation;

  void getCurrentLocation() async {
    Location location = Location();

    await location.getLocation().then(
      (location) {
        currentlocation = location;

        print(currentlocation);
      },
    );
    final GoogleMapController googleMapController = await _controller.future;

    location.onLocationChanged.listen(
      (newloc) {
        currentlocation = newloc;
        print(currentlocation);
        googleMapController.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              zoom: 13.5,
              target: LatLng(newloc.latitude!, newloc.longitude!),
            ),
          ),
        );
        print(currentlocation);

        setState(() {});
      },
    );
    setState(() {});
  }

  void getPolyPoints() async {
    PolylinePoints polylinePoints = PolylinePoints();
    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      googleApiKey,
      PointLatLng(sourcelocation.latitude, sourcelocation.longitude),
      PointLatLng(destination.latitude, destination.longitude),
    );
    if (result.points.isNotEmpty) {
      result.points.forEach(
        (PointLatLng point) => polylineCoordinates.add(
          LatLng(
            point.latitude,
            point.longitude,
          ),
        ),
      );
      setState(() {});
    }
  }

  @override
  void initState() {
    super.initState();
    getCurrentLocation();
    getPolyPoints();
  }

  @override
  Widget build(BuildContext context) {
    return currentlocation == null
        ? const Center(
            child: Text("loading..."),
          )
        : GoogleMap(
            initialCameraPosition: CameraPosition(
              target: LatLng(
                  currentlocation!.latitude!, currentlocation!.longitude!),
              zoom: 12.5,
            ),
            polylines: {
              Polyline(
                polylineId: const PolylineId("route"),
                points: polylineCoordinates,
              ),
            },
            markers: {
              const Marker(
                markerId: MarkerId("source"),
                position: sourcelocation,
              ),
              Marker(
                markerId: const MarkerId("currentlocation"),
                position: LatLng(
                    currentlocation!.latitude!, currentlocation!.longitude!),
              ),
              const Marker(
                markerId: MarkerId("destination"),
                position: destination,
              ),
            },
            onMapCreated: (mapController) {
              _controller.complete(mapController);
            },
          );
  }
}```

 

I have tried everything from getting new api keys  and enabling my maps api but nothing.

How do I fix the polyline issue and the googlemapcontroller

0 Answers0