Any way to add Google Maps in Flutter for Web?

Question

I am exploring flutter-web and want to add google map in it. Although, I have used google map using google_maps_flutter in flutter-app but that works for Android and iOS.

Answer 1

First, you need the Google Map api keys. Before initializing, you have to have a project in your Google Cloud Platform. Create one if you don't have one.

Next, search for "Javascript Map" and enable it. Otherwise, the api key will shout an error that says the google map service is not activated.

Initialize the google map js sdk in our index.html file located inside web folder of your project tree.

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>"></script>

And import google_maps in pubspec.yaml file:

dependencies:
  google_maps: ^3.4.1

And here is how you create a google map widget.

import 'dart:html';
import 'package:flutter/material.dart';
import 'package:google_maps/google_maps.dart';
import 'dart:ui' as ui;

Widget getMap() {
  String htmlId = "7";

  // ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
    final myLatlng = LatLng(1.3521, 103.8198);

    final mapOptions = MapOptions()
      ..zoom = 10
      ..center = LatLng(1.3521, 103.8198);

    final elem = DivElement()
      ..id = htmlId
      ..style.width = "100%"
      ..style.height = "100%"
      ..style.border = 'none';

    final map = GMap(elem, mapOptions);

    Marker(MarkerOptions()
      ..position = myLatlng
      ..map = map
      ..title = 'Hello World!'
      );

    return elem;
  });

  return HtmlElementView(viewType: htmlId);
}

htmlId - a unique id to name the div element

ui.platformViewRegistry.registerViewFactory - creates a webview in dart

LatLng(1.3521, 103.8198) - class that takes latitude and longitude of a location

DivElement() - class to create a dive element

GMap - creates a google map element

Marker() - the red icon that shows in your LatLng in google map

HtmlElementView() - creates a platform view for Flutter Web

More about google_maps package found here :

https://pub.dev/packages/google_maps

A quick tutorial on how to use it found here :

https://dev.to/happyharis/flutter-web-google-maps-381a

Hope this helps. Thanks

Answer 2

A new official plugin has been released recently: https://pub.dev/packages/google_maps_flutter_web . It already works with the existing google_maps_flutter plugin, just add your api script in the web/index.html . Do take note its limitations for now - no rotation, no map toolbar, no my location function.

Answer 3

I haven't tested it yet but if you want a cross-platform solution maybe you can give this a shot: https://pub.dev/packages/flutter_google_maps

Its description says:

A Flutter plugin for integrating Google Maps in iOS, Android and Web applications. It is a wrapper of google_maps_flutter for Mobile and google_maps for Web.