Flutter web reverse geocoding

Question

I have a project on the flutter web that I need to implement reverse Geocoding on the current user location on the map to get the address at that particular location. The pub package geocoder: ^0.2.1 does not support flutter for web. I am currently trying to implement this using the google_maps_webservice: ^0.0.18 package, is there anyone with a solution on how to achieve the reverse geocoding?

_convertAddress() async { final provider = Provider.of(context, listen: false);

try {
  final barLocation = provider.getLocation;

  if (barLocation != null) {
    final address = await geocoding.searchByLocation(
      Location(
        provider.location['lat'],
        provider.location['lng'],
      ),
    );
    print(address);
    
  }
} catch (e) {
  provider.setAddress("");
}

}

Solution

If you are only developing a Google Maps app, specifically, for Web with JavaScript then you might want to consider using the google_maps package that allows you to use Maps JavaScript API from dart scripts. You can check it here: https://pub.dev/packages/google_maps

The package includes a Reverse Geocoding sample that you can check out here: https://github.com/a14n/dart-google-maps/tree/master/example/08-services/geocoding-reverse

Note: You may encounter an issue where you cannot interact with the map. The workaround is to set the map div z-index to 1 as explained here: https://stackoverflow.com/a/63765111/11269204

But you can also use the ui.platformViewRegistry in the dart:ui library to create your div elements and to prevent any interaction issue. Here is a quick youtube video tutorial on how to do that.

Comments

[Uroš]

Careful, Google has changed their policy regarding google maps. API keys are free for mobile (for now), but websites get $200 monthly credit for free, once that is spent you can either pay for api calls or have your service stop working. Since your target platform is web and not Android / iOS I'm afraid you might have to pay if your service generates enough traffic. Just a heads up... If reverse geocoding is all you are looking for I suggest looking up OpenStreetMap and Nominatim to be more precise (host your own reverse geocoding, for free).

[Samuel Gichu]

Thanks for this information however what i need is to use the Geocoder class from google map api. Since flutter does not offer support on web for this, i have been reading about interoping javascript Class and functions into Dart but i haven't figured out how to access the Geocoder javascript class from google maps api in Dart. Do you have an idea on how i can implement this?

[Hee]

@SamuelGichu I am also interested in how to reverse geocoding for flutter web. Have you found any method?

[Pumuckelo]

Trying to find a solution for this too