CODEWITHSUNDEEP
flutterdartgoogle-mapspolylinegoogle-polyline
Rehan
Rehan

Reputation: 181

Polyline with routes for shorter distance Google Maps flutter

how to draw polyline (with routes, not just straight line) with google maps flutter between 2 exact points , currently there is a google api that returns directions/routes for polylines but it takes source and destination as strings, not as a LatLng points so I guess it can only draw polyline between 2 cities/towns so we cant draw polylines for shorter distance, is there a way polyline could be drawn between 2 LatLng points with routes in flutter?

Upvotes: 0

Views: 765

Answers (1)

Olivia Lundy
Olivia Lundy

Reputation: 127

You can easily draw a polyline with routes on a Google Map in Flutter between two exact LatLng points. First, you need to use the Google Maps Directions API to get the route between the two points. This API takes two sets of latitude and longitude coordinates as input and returns a set of points that define the route between the two points. Once you have the points that define the route, you can use the Polyline class in the Google Maps Flutter plugin to draw the polyline on the map. The Polyline class has a points property which takes a list of LatLng coordinates that define the polyline. You can pass the list of points that you received from the Google Maps Directions API to this property to draw the polyline on the map like:

// Import Google Maps Flutter plugin
import 'package:google_maps_flutter/google_maps_flutter.dart';

// Import the classes HTTP requests
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState

Upvotes: 0

Related Questions