Categories
Status

Google Maps for Flutter Web

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

1 reply on “Google Maps for Flutter Web”

This is beautiful, thank you so much. I am curious if you could help me further by showing/explaining how I could add multiple markers? Currently the only way I can accomplish this is,

Marker(MarkerOptions()
..position = marker //LatLng
..map = map
..title = ‘Marker1’);

Marker(MarkerOptions()
..position = marker2 ////LatLng2
..map = map
..title = ‘Marker2’);

I would prefer to write it more cleanly so as, all the marker locations can be under one
Marker(MarkerOptions()
with their own position and title.

Also, if you know if it’s possible to add the location based on a zip code/postal code rather than latitude and longitude? Thank you so much!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.