How to Add Polyline On Google Maps In Flutter

How to Add Polyline On Google Maps In Flutter ?

Now a days almost every application requires navigation from one place to another place in Flutter. So in this article, we are going to discuss How to Add Polyline On Google Maps in flutter?

How to Add Polyline On Google Maps In Flutter?

Google Maps flutter plugin will show map the mobile application and if a user is willing to show specific/particular routes in a Map there is a plugin available google_maps_webservice.

Users can take a look at the below code snippet.

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,

    );
}

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:

Push Request 1121 has implemented how to use the polyline functionality in Flutter Application.

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

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

Conclusion:

In this article, we have been through How to Add Polyline On Google Maps in Flutter?

Thanks for being with us on a Flutter Journey !!!
Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Abhishek Dhanani

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on