How to customize marker in Google Map for Flutter web


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);

  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 = LatLng(48.39782242083419, 9.987785692832691);

    final elem = DivElement() = htmlId = "100%" = "100%" = 'none';

    final map = GMap(elem, mapOptions);

      ..position = myLatlng = 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.


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 = gMap.LatLng(48.39782242083419, 9.987785692832691);

    final elem = DivElement() = htmlId = "100%" = "100%" = '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

      ..icon = _icon
      ..position = myLatlng = map
      ..title = 'Title'

    return elem;

Answered By – parkorian

Answer Checked By – Willingham (FlutterFixes Volunteer)

Leave a Reply

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