fluttergoogle-maps-api-3google-directions-api

result.status == 'OK' part is not executed during polyline in flutter using google directiions API


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.


Solution

  • 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.

    enter image description here