This post will outline a Google Maps solution for Flutter Web.

TLDR: https://stackoverflow.com/a/57746754/3268303

The end result will have a google map centered on Texas with one marker and look like this:

To get started we need a google maps dependency. Open up pubspec.yaml and add the following:

google_maps: ">=3.0.0 <4.0.0"

Example: https://github.com/dazza5000/flutter_web_google_maps_example/blob/master/pubspec.yaml

Now we need to add our API Key for google maps to our index.html file in our web directory:

<script src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE"></script>

Example: https://github.com/dazza5000/flutter_web_google_maps_example/blob/master/web/index.html

We are going to use dart inside an HtmlElementView which will return a widget that we can attach to our Flutter Web widget hierarchy. Without further ado, lets look at what that looks like in code.

Widget getMap() { String htmlId = "7"; // ignore: undefined_prefixed_name ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) { final myLatlng = new LatLng(30.2669444, -97.7427778); final mapOptions = new MapOptions() ..zoom = 8 ..center = new LatLng(30.2669444, -97.7427778); final elem = DivElement() ..id = htmlId ..style.width = "100%" ..style.height = "100%" ..style.border = 'none'; final map = new GMap(elem, mapOptions); Marker(MarkerOptions() ..position = myLatlng ..map = map ..title = 'Hello World!'); return elem; }); return HtmlElementView(viewType: htmlId); }

In the code above we use Dart to interact with the Google Map library we added to our project. The library wraps the the javascript API with dart and with that we get Dart IDE support and type safety. Looking at the block, we can see that we specify a LatLng object and set that to our map center. Lastly, we create a single marker and add it to the map.

The full source code for this example can be found here: https://github.com/dazza5000/flutter_web_google_maps_example

A youtube walkthrough video is here too: https://www.youtube.com/watch?v=iW7pCBL7yWk&feature=youtu.be