fluttergoogle-mapsmarker

How to set custom Marker on Google maps in Flutter?


I want to set custom Markers with an AssetImage as the Marker icon on the Google Map. I already made a marker but only as a default BitmapDescriptor. How can i provide an AssetImage as the Icon for the Marker?

This is my code

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GMapPage extends StatefulWidget {
  const GMapPage({
    Key? key,
  }) : super(key: key);

  static CameraPosition initialCameraPosition = const CameraPosition(
    target: LatLng(
      50.07826619317443,
      8.239772862793647,
    ),
    zoom: 17,
  );

  @override
  State<GMapPage> createState() => _GMapPageState();
}

class _GMapPageState extends State<GMapPage> {
  late GoogleMapController _controller;
  final Set<Marker> _markers = {};

  void _onMapCreated(GoogleMapController controller) {
    _controller = controller;
    _markers.add(
      const Marker(
        markerId: MarkerId("id-1"),
        position: LatLng(
          50.07826619317443,
          8.239772862793647,
        ),
        icon: BitmapDescriptor.defaultMarker,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: GMapPage.initialCameraPosition,
        markers: _markers,
        onMapCreated: _onMapCreated,
      ),
    );
  }
}

Solution

  • here's a function to set icons from assets.

    void setCustomIcons(BuildContext context) async {
        customIcon = await BitmapDescriptor.fromAssetImage(
              ImageConfiguration(devicePixelRatio: 2.0),
              'assets/images/custome_icon.png'
            );
       }
    

    you can try

    import 'package:flutter/material.dart';
    import 'package:google_maps_flutter/google_maps_flutter.dart';
    
    class GMapPage extends StatefulWidget {
      const GMapPage({
        Key? key,
      }) : super(key: key);
    
      static CameraPosition initialCameraPosition = const CameraPosition(
        target: LatLng(
          50.07826619317443,
          8.239772862793647,
        ),
        zoom: 17,
      );
    
      @override
      State<GMapPage> createState() => _GMapPageState();
    }
    
    class _GMapPageState extends State<GMapPage> {
      late GoogleMapController _controller;
      final Set<Marker> _markers = {};
    
      void _onMapCreated(GoogleMapController controller) {
        _controller = controller;
        _markers.add(
          const Marker(
            markerId: MarkerId("id-1"),
            position: LatLng(
              50.07826619317443,
              8.239772862793647,
            ),
            icon: BitmapDescriptor.fromAssetImage(
          ImageConfiguration(devicePixelRatio: 2.0),
          'assets/images/custome_icon.png'
        ),
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: GoogleMap(
            initialCameraPosition: GMapPage.initialCameraPosition,
            markers: _markers,
            onMapCreated: _onMapCreated,
          ),
        );
      }
    }