I'm not sure how to pass custom latitudes and longitudes to draw a route.
I've used to following packages:
google_maps_flutter: ^2.0.1
flutter_polyline_points: ^0.2.6
I'm fetching the route using an API, which will be used in creating the actual Route on Google Map and it looks like the following:
{
"geoPoints": [
{
"latitude": <some_value>,
"longitude": <some_value>
}.
{
"latitude": <some_value>,
"longitude": <some_value>
}.
{
"latitude": <some_value>,
"longitude": <some_value>
}.
],
}
My dart file has the following lines of codes:
onMapCreated() which calles the setPolines() below
void onMapCreated(GoogleMapController controller, LatLng origin, LatLng dest,) {
_controller =controller;
setPolylines(origin, dest);
}
setPolyLines() which is missing something. I'm not how to pass the polylines data that I'm fetching from the API
setPolylines(LatLng origin, LatLng dest) async {
polylinePoints = PolylinePoints();
PolylineResult result = await
polylinePoints.getRouteBetweenCoordinates(
'apiKey',
PointLatLng(origin.latitude, origin.longitude),
PointLatLng(dest.latitude, dest.longitude),);
if(result.points.isNotEmpty){
// loop through all PointLatLng points and convert them
// to a list of LatLng, required by the Polyline
result.points.forEach((PointLatLng point){
routeCoordinates.add(
LatLng(point.latitude, point.longitude));
});
}
PolylineId id = PolylineId('poly');
Polyline polyline = Polyline(
polylineId: id,
color: Colors.red,
points: routeCoordinates,
width: 3,
);
polylines[id] = polyline;
}
Finally GoogleMap() where I think polylines property should be passing the route details as Google map is a child of FutureBuider()
FutureBuilder(
future: getTripPoints(widget.accessToken, widget.tripId),
builder: (_, snapshot) {
var arraySize = snapshot.data["geoPoints"].length;
var initialLat = snapshot.data["geoPoints"][0]["latitude"];
var initialLong = snapshot.data["geoPoints"][0]["longitude"];
LatLng origin = LatLng(initialLat, initialLong);
var finalLat = snapshot.data["geoPoints"][arraySize - 1]["latitude"];
var finalLong = snapshot.data["geoPoints"][arraySize - 1]["longitude"];
LatLng dest = LatLng(finalLat, finalLong);
// routeCoordinates = snapshot.data["geoPoints"];
print(origin);
print(dest);
return GoogleMap(
markers: _markers,
zoomGesturesEnabled: true,
// zoomControlsEnabled: false,
polylines: Set<Polyline>.of(polylines.values),
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: origin,
zoom: 14,
),
onMapCreated: (controller) => onMapCreated(controller, origin, dest,),
);
},
),
Can anybody guide me here?