Search code examples
fluttergoogle-maps-flutter

Using Polyline for making custom route with google_maps_flutter plugin - Flutter


google_maps_flutter 0.5.6 Added support for Polylines on GoogleMap. But there is no code or documentation available under my view.

A plugin named maps_view exists which supports polylines

import 'package:map_view/map_view.dart';
import 'package:map_view/polyline.dart';
...
MapView mapView = MapView();
mapView.addPolyline(Polyline('my_polyline', [
  Location(45.52309483308097, -122.67339684069155),
  Location(45.52298442915803, -122.66339991241693),
]));

I need the same function that's built-in with google_maps_flutter.


Solution

  • Try this in your StatefulWidget subclass.

    Map<PolylineId, Polyline> _mapPolylines = {};
    int _polylineIdCounter = 1;
    
    void _add() {
      final String polylineIdVal = 'polyline_id_$_polylineIdCounter';
      _polylineIdCounter++;
      final PolylineId polylineId = PolylineId(polylineIdVal);
    
      final Polyline polyline = Polyline(
        polylineId: polylineId,
        consumeTapEvents: true,
        color: Colors.red,
        width: 5,
        points: _createPoints(),
      );
    
      setState(() {
        _mapPolylines[polylineId] = polyline;
      });
    }
    
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Maps"),
          actions: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: _add)],
        ),
        body: GoogleMap(
          initialCameraPosition: const CameraPosition(target: LatLng(0, 0), zoom: 4.0),
          polylines: Set<Polyline>.of(_mapPolylines.values),
        ),
      );
    }
    
    List<LatLng> _createPoints() {
      final List<LatLng> points = <LatLng>[];
      points.add(LatLng(1.875249, 0.845140));
      points.add(LatLng(4.851221, 1.715736));
      points.add(LatLng(8.196142, 2.094979));
      points.add(LatLng(12.196142, 3.094979));
      points.add(LatLng(16.196142, 4.094979));
      points.add(LatLng(20.196142, 5.094979));
      return points;
    }