How to customize marker in Google Map for Flutter web

Question

I am building a web in Flutter, so I am using this package to add a functional map. I would like to change the color or the marker, and for that I have to change the png that is used to mark. But everything I found is related to the package for Android and iOS, so I couldn't find a solution that I could adapt to my code.

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

class GoogleMap extends StatelessWidget {
  const GoogleMap({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return getMap();
  }
}

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

  ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
    final myLatlng = LatLng(48.396917803869584, 9.991867526841805);

    final mapOptions = MapOptions()
      ..zoom = 13
      ..center = LatLng(48.39782242083419, 9.987785692832691);

    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 = 'Title'
    );

    return elem;
  });

  return HtmlElementView(viewType: htmlId);
}

There is a parameter icon in the MarkerOptions(), but I can't set it with BitmapDescriptor.fromAssetImage from there. The solutions I have seen in mobile use a stateful widget and initialize it there, but I also am not allowed to access from there.

Any ideas how to change the marker? Thanks in advance.

Answer 1

I solved this by adding an icon parameter. It can take an image from assets. This is the final code:

ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
    final myLatlng = gMap.LatLng(48.396917803869584, 9.991867526841805);

    final mapOptions = gMap.MapOptions()
      ..zoom = 13
      ..center = gMap.LatLng(48.39782242083419, 9.987785692832691);

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

    final map = gMap.GMap(elem, mapOptions);

    //new code
    final _icon = gMap.Icon()
      ..scaledSize = gMap.Size(40, 40)
      ..url = "assets/images/contact_screen/location_pin.png";
    //end of new code

    gMap.Marker(gMap.MarkerOptions()
      ..icon = _icon
      ..position = myLatlng
      ..map = map
      ..title = 'Title'
    );

    return elem;
  });