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.

Solution 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

Solution 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.

Comments

[user1209216]

Is there any way to get the same api for all supported platforms - web, android, ios? Separate plugin for web is against multiplatform functionality promised by Flutter. If I want web only, I don't need Flutter for that

[Sha-agi]

@user1209216 As of now it's not yet endorsed to the google maps plugin so it needs the dependency. Check readme. Though I haven't tried it myself, maybe you can try to use a webview.

[Mohsen Emami]

A "For developer purpose only" watermark appears on the map, is there any way to remove it?

[Muthu S]

if you add the api key details in index.html page and publish the flutter web in firebase host, then everyone can see and access the api key that we kept in the index.html file by just right click and view page source right? correct me if am wrong. Thanks!