In my flutter application only the Markers are visible in the Map screen but path is not displaying via polylines ,I have set a debugger point and following if statement is not executed .
if(result.status == 'OK'){
result.points.forEach((PointLatLng point){
polylineCoordinates.add(LatLng(point.latitude,point.longitude));
});
please refer the below code above is extracted form below code.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class GooglePolylines extends StatefulWidget {
GooglePolylines({Key key}) : super(key: key);
@override
GooglePolyline createState() => GooglePolyline();
}
class GooglePolyline extends State<GooglePolylines>{
GoogleMapController mapController;
double _originLatitude = 26.48424, _originLongitude = 50.04551;
double _destLatitude = 26.46423, _destLongitude = 50.06358;
Map<MarkerId, Marker> markers = {};
String googleAPiKey = "MY KEY";
Set <Polyline> _polyLines = Set<Polyline>();
List <LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints ;
@override
void initState() {
super.initState();
polylinePoints =PolylinePoints();
/// origin marker
_addMarker(LatLng(_originLatitude, _originLongitude), "origin",
BitmapDescriptor.defaultMarker);
/// destination marker
_addMarker(LatLng(_destLatitude, _destLongitude), "destination",
BitmapDescriptor.defaultMarkerWithHue(90));
// setPolyLines();
// _getPolyline();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(_originLatitude, _originLongitude), zoom: 15),
myLocationEnabled: true,
tiltGesturesEnabled: true,
compassEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
onMapCreated: _onMapCreated,
markers: Set<Marker>.of(markers.values),
//rendering polyLines by map
polylines: _polyLines,
)),
);
}
void _onMapCreated(GoogleMapController controller) async {
mapController = controller;
setPolyLines();
}
_addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
MarkerId markerId = MarkerId(id);
Marker marker =
Marker(markerId: markerId, icon: descriptor, position: position);
markers[markerId] = marker;
}
void setPolyLines() async {
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
googleAPiKey,
PointLatLng( _originLatitude, _originLongitude),
PointLatLng(_destLatitude, _destLongitude ),
travelMode: TravelMode.driving,
);
if(result.status == 'OK'){
result.points.forEach((PointLatLng point){
polylineCoordinates.add(LatLng(point.latitude,point.longitude));
});
setState((){
_polyLines.add(Polyline(
visible: true,
width:10,
polylineId:PolylineId('polyLineTest'),
color: Colors.blue,
points:polylineCoordinates
));
});
}
}
}
In the API section google cloud platform console , all the applied requests are shown as errors.
I tried your code using my own API key and I was able to show the polyline (Please see screenshot below). It looks like the issue is with your own API key. To solve the issue, make sure that:
Check out this documentation for more info.