How to add Polyline on Google Maps Flutter Plugin?

Question

I'm using the official Google Maps Flutter plugin to show maps and it works perfectly well but now I want to show a route in the map so I'm using this package to provide me the route I only need to add the Polylines.

Answer 1

I had the same probelm solved by using this plugin google_maps_flutter: ^0.5.19

import 'package:google_maps_flutter/google_maps_flutter.dart';

static const LatLng _center = const LatLng(33.738045, 73.084488);
final Set<Marker> _markers = {};
final Set<Polyline>_polyline={};

//add your lat and lng where you wants to draw polyline
LatLng _lastMapPosition = _center;
List<LatLng> latlng = List();
LatLng _new = LatLng(33.738045, 73.084488);
LatLng _news = LatLng(33.567997728, 72.635997456);

latlng.add(_new);
latlng.add(_news);

//call this method on button click that will draw a polyline and markers

void _onAddMarkerButtonPressed() {
    getDistanceTime();
    setState(() {
        _markers.add(Marker(
            // This marker id can be anything that uniquely identifies each marker.
            markerId: MarkerId(_lastMapPosition.toString()),
            //_lastMapPosition is any coordinate which should be your default 
            //position when map opens up
            position: _lastMapPosition,
            infoWindow: InfoWindow(
                title: 'Really cool place',
                snippet: '5 Star Rating',
            ),
            icon: BitmapDescriptor.defaultMarker,

        ));
        _polyline.add(Polyline(
            polylineId: PolylineId(_lastMapPosition.toString()),
            visible: true,
            //latlng is List<LatLng>
            points: latlng,
            color: Colors.blue,
        ));
    });

    //in your build widget method
    GoogleMap(
    //that needs a list<Polyline>
        polylines:_polyline,
        markers: _markers,
        onMapCreated: _onMapCreated,
        myLocationEnabled:true,
        onCameraMove: _onCameraMove,
        initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
        ),

        mapType: MapType.normal,

    );
}

Answer 2

This is an expanded answer on Jawad's reply. I have used official google maps plugin

google_maps_flutter 0.5.19+2

The complete working code is given below.

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

class TestMapPolyline extends StatefulWidget {
  @override
  _TestMapPolylineState createState() => _TestMapPolylineState();
}

class _TestMapPolylineState extends State<TestMapPolyline> {
  final Set<Marker> _markers = {};
  final Set<Polyline> _polyline = {};

  GoogleMapController controller;

  List<LatLng> latlngSegment1 = List();
  List<LatLng> latlngSegment2 = List();
  static LatLng _lat1 = LatLng(13.035606, 77.562381);
  static LatLng _lat2 = LatLng(13.070632, 77.693071);
  static LatLng _lat3 = LatLng(12.970387, 77.693621);
  static LatLng _lat4 = LatLng(12.858433, 77.575691);
  static LatLng _lat5 = LatLng(12.948029, 77.472936);
  static LatLng _lat6 = LatLng(13.069280, 77.455844);
  LatLng _lastMapPosition = _lat1;

  @override
  void initState() {
    super.initState();
    //line segment 1
    latlngSegment1.add(_lat1);
    latlngSegment1.add(_lat2);
    latlngSegment1.add(_lat3);
    latlngSegment1.add(_lat4);

    //line segment 2
    latlngSegment2.add(_lat4);
    latlngSegment2.add(_lat5);
    latlngSegment2.add(_lat6);
    latlngSegment2.add(_lat1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        //that needs a list<Polyline>
        polylines: _polyline,
        markers: _markers,
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _lastMapPosition,
          zoom: 11.0,
        ),
        mapType: MapType.normal,
      ),
    );
  }

  void _onMapCreated(GoogleMapController controllerParam) {
    setState(() {
      controller = controllerParam;
      _markers.add(Marker(
        // This marker id can be anything that uniquely identifies each marker.
        markerId: MarkerId(_lastMapPosition.toString()),
        //_lastMapPosition is any coordinate which should be your default
        //position when map opens up
        position: _lastMapPosition,
        infoWindow: InfoWindow(
          title: 'Awesome Polyline tutorial',
          snippet: 'This is a snippet',
        ),
      ));

      _polyline.add(Polyline(
        polylineId: PolylineId('line1'),
        visible: true,
        //latlng is List<LatLng>
        points: latlngSegment1,
        width: 2,
        color: Colors.blue,
      ));

      //different sections of polyline can have different colors
      _polyline.add(Polyline(
        polylineId: PolylineId('line2'),
        visible: true,
        //latlng is List<LatLng>
        points: latlngSegment2,
        width: 2,
        color: Colors.red,
      ));
    });
  }
}

Answer 3

Polyline is currently (2019-01-27) not available in the official google maps flutter plugin. However, there are two pull requests which have added this functionality:

• 1121
• 941
• 1049

Pull request 1121 has example code on how to use the Polyline functionality.

EDIT: Added information on how to use the functionality:

Either wait for branch 1121 to be merged (if it does) into the baseline or clone the fork repo. Once cloned

Copy the packages/google_maps_flutter folder to the same level as your flutter app for example:

- workspace
 |_myflutterapp
   |_lib
   |_android
   |_ios
   |_pubspec.yaml
 |_google_maps_flutter

Then change your dependencies to point to this version and not the official version i.e. in your pubspec.yaml file change it to:

dev_dependencies:
  flutter_test:
    sdk: flutter

  google_maps_flutter:
    path: ../google_maps_flutter

Then follow the instructions on the google flutter library

An example is included in the google_maps_futter package that shows exactly how to use use polylines and taps.