I am working on a flutter project and have run into an issue where I am unable to make web request to the google maps directions API.

I have already tried setting the restrictions to web and adding localhost. When that didnt work, I set it to be none to see if that made a difference, but no luck. Unfortunately the response I get back using DIO isn't very helpful. Here is the error message and code sample below.

"The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer. This indicates an error which most likely cannot be solved by the library."

Future<List<LatLng>> fetchRouteCoordinates(LatLng start, LatLng end) async {
    try {
      const String baseUrl =
          '';
      const String apiKey =
          '<API Key>'; // Replace with your Google Maps API key

      // final url = Uri.parse(
      //     '$baseUrl?origin=${start.latitude},${start.longitude}&destination=${end.latitude},${end.longitude}&key=$apiKey');

      final response = await Dio(BaseOptions()).get(
          '$baseUrl?origin=${start.latitude},${start.longitude}&destination=${end.latitude},${end.longitude}&key=$apiKey');

      if (response.statusCode == 200) {
        final data = jsonDecode(response.data);
        final polyline = data['routes'][0]['overview_polyline']['points'];
        return decodePolyline(polyline);
      } else {
        throw Exception('Failed to load directions');
      }
    } catch (e) {
      log.e(e);
      return [];
    }
  }

EDIT: I have tested this on both Android and in Postman and it works. Any other ideas.

EDIT 2: I was able to get around this by making an API Controller and making the request there and then returning that data.

I am working on a flutter project and have run into an issue where I am unable to make web request to the google maps directions API. https://maps.googleapis/maps/api/directions

I have already tried setting the restrictions to web and adding localhost. When that didnt work, I set it to be none to see if that made a difference, but no luck. Unfortunately the response I get back using DIO isn't very helpful. Here is the error message and code sample below.

"The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer. This indicates an error which most likely cannot be solved by the library."

Future<List<LatLng>> fetchRouteCoordinates(LatLng start, LatLng end) async {
    try {
      const String baseUrl =
          'https://maps.googleapis/maps/api/directions/json';
      const String apiKey =
          '<API Key>'; // Replace with your Google Maps API key

      // final url = Uri.parse(
      //     '$baseUrl?origin=${start.latitude},${start.longitude}&destination=${end.latitude},${end.longitude}&key=$apiKey');

      final response = await Dio(BaseOptions()).get(
          '$baseUrl?origin=${start.latitude},${start.longitude}&destination=${end.latitude},${end.longitude}&key=$apiKey');

      if (response.statusCode == 200) {
        final data = jsonDecode(response.data);
        final polyline = data['routes'][0]['overview_polyline']['points'];
        return decodePolyline(polyline);
      } else {
        throw Exception('Failed to load directions');
      }
    } catch (e) {
      log.e(e);
      return [];
    }
  }

EDIT: I have tested this on both Android and in Postman and it works. Any other ideas.

EDIT 2: I was able to get around this by making an API Controller and making the request there and then returning that data.

• flutter
• google-maps
• dio
• google-directions-api

2 Answers 2

This seems like a CORS issue. In this case, you should use a backend as a proxy to execute the network requests.

Is it a Cors Policy issue maybe? You can try using this line to test:

const String proxyUrl = 'https://cors-anywhere.herokuapp/';
const String baseUrl = proxyUrl + "BASE_URL";