How to Add Polyline On Google Maps In Flutter ?

· 3 min read
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.

Leave a Reply