Flutter Web: Google Maps
Tags: flutter, flutterweb, webdev, maps
Published: 2020-01-27 13:44:42

Google Maps was implemented in Flutter late last year and people were excited to use the plugin. However, there are an increasing number of people who are excited on the progress of Flutter Web. However, the flutter team did not release an official flutter web implementation of google maps.

Lucky for you guys, here is a quick guide on how to implement Google Maps in Flutter Web.

{% youtube pvEI_xAvWig %}

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

![create new google cloud project](https://user-images.githubusercontent.com/31005114/73162693-57292400-4129-11ea-9c86-c1fbb4c78a61.gif)

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.

![search javascript google map api service](https://user-images.githubusercontent.com/31005114/73162526-ed107f00-4128-11ea-8f43-90e32673fe11.gif)

Initialise the google map js sdk in our index.html file.

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

And import [google_maps](https://pub.dev/packages/google_maps) in pubspec.yaml:

```yaml
dependencies:
  google_maps: ^3.4.1
```

And here is how you create a google map widget.

```dart
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

You can customise the [animation](https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/marker-animations) and looks of your marker, [here](https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/icon-simple).
You can add a info windows as such:

```dart
final marker = Marker(MarkerOptions()
      ..position = myLatlng
      ..map = map
      ..title = 'Hello World!'
      ..label = 'h'
      ..icon ='https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png');

    final infoWindow = InfoWindow(InfoWindowOptions()..content = contentString);
    marker.onClick.listen((event) => infoWindow.open(map, marker));

var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the ' +
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
    'south west of the nearest large town, Alice Springs; 450&#160;km ' +
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
    'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
    'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
    'Aboriginal people of the area. It has many springs, waterholes, ' +
    'rock caves and ancient paintings. Uluru is listed as a World ' +
    'Heritage Site.</p>' +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
    '(last visited June 22, 2009).</p>' +
    '</div>' +
    '</div>';
```

Hope you find this tutorial useful!