Custom Google Maps Marker Flutter


Im having trouble using a custom marker in my GoogleMaps project with flutter. I get this error when the map screen loads

Exception has occurred.
LateError (LateInitializationError: Field ‘myMarker’ has not been initialized.)

I tried without using late and it says myMarker has to be initialized so I declared it as late and then initialized it in the initState. That didn’t work so I tried with a nullable ? and that did not work either. Any help would be appreciated.

import 'dart:async';
import 'dart:developer';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:location/location.dart';
import 'dart:math' as math;

import './main.dart' as main;
import './variables.dart' as variables;
import './methods.dart' as methods;
import './mapvariables.dart' as mapVar;
import './marker_information.dart' as markerInfo;

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

  _MapScreenState createState() => _MapScreenState();

class _MapScreenState extends State<MapScreen> {
  Completer<GoogleMapController> _controllerGoogleMap = Completer();
  late GoogleMapController newGoogleMapController;
  Position? currentPosition;
  var geoLocator = Geolocator();
  final double dcheck = 0.00014128694207108202;
  var location = new Location();
  late BitmapDescriptor myMarker;

  void initState() {

  void setMarker() async {
    myMarker = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(), 'loginlogo.png');

  checkpermission_location() async {
    var locationStatus = await Permission.location.status;

    if (!locationStatus.isGranted) {
      print(await Permission.location.value);
      await Permission.location.request();

    if (!locationStatus.isDenied) {
      await Permission.location.request();

  void checkClue(var x, var y, markerInfo.ClueLocation marker) {
    double distance = methods.distance(, marker.long, x, y);
    log("distance: $distance");
    if ((distance < dcheck)) {
      variables.dialogVis = true;
      if ((variables.dialogVis) && (marker.compl == false)) {
        mapVar.showAlertDialog(context, marker);
        variables.dialogVis = false;
        marker.compl = true;

  void checkLocation() {
    location.onLocationChanged.listen((LocationData currentLocation) {
      var lat = currentLocation.latitude;
      var long = currentLocation.longitude;
      checkClue(lat, long, markerInfo.newHamCollege);
      checkClue(lat, long, markerInfo.coeFen);
      checkClue(lat, long, markerInfo.mathematicalBridge);
      checkClue(lat, long, markerInfo.graveYard);
      checkClue(lat, long, markerInfo.archeologicalMuseum);
      checkClue(lat, long, markerInfo.addenbrokesHospital);
      checkClue(lat, long, markerInfo.stMarysBellTower);
      checkClue(lat, long, markerInfo.trinityStreet);
      checkClue(lat, long, markerInfo.viewOfTheBridgeOfSighs);

  //Initial camera position when maps first load
  static const _initalCameraPosition = CameraPosition(
    target: LatLng(52.2053, 0.1218),
    zoom: 11.5,

  Marker makeMarker(markerInfo.ClueLocation marker) {
    return (Marker(
        markerId: MarkerId(marker.title),
        infoWindow: InfoWindow(title: marker.title),
        icon: myMarker,
        position: LatLng(, marker.long),
        onTap: () {
          if (marker.compl) {
            mapVar.showAlertDialog(context, marker);

  //Google map widget
  Widget build(BuildContext context) {
    //Checks if mapAcess is true
    if (variables.mapAccess) {
      var currentlocation = location.getLocation();
      return Scaffold(
        body: GoogleMap(
          onMapCreated: (GoogleMapController controller) {
            newGoogleMapController = controller;
          mapType: MapType.normal,
          myLocationButtonEnabled: true,
          zoomControlsEnabled: true,
          myLocationEnabled: true,
          zoomGesturesEnabled: true,
          markers: {
            //Markers located in the variables.dart file
            //6.??? Waiting for update from Konstantin
          initialCameraPosition: _initalCameraPosition,
    //Refuses access if 10 Digit key is not provided
    return Scaffold(
        body: Center(
            child: Text('You do not have access to the map, please login')));


You pretty much have it the same way I do it; the way I’ve done it is as follows:

  1. Set up the BitmapDescriptor as a nullable property at the top of your state class, as well as I create a markers Set:
Set<Marker>? _markers = <Marker>{};
BitmapDescriptor? myMarker

I create an async method that I run at the beginning of the build method (I do it in the build method because I need the build context sometimes), that asynchronously loads the bitmaps, as in:

void setMarkerIcon() async {
  myMarker = await BitmapDescriptor.fromAssetImage(
        const ImageConfiguration(size: Size(50, 50)),'loginlogo.png');

Then in the build method I just call it:

  Widget build(BuildContext context) {
    // you can call it here

    return Scaffold(
      body: GoogleMap(
        markers: _markers!,
        onMapCreated: (GoogleMapController ctrl) {
          // here after map is loaded, I generate the markers


Then as shown above, upon the map getting created, I can go ahead and use the custom markers, based on a list of locations, as such:

void generateMarkers() {
    var localMarkers = <Marker>{};

    for(var location in locationsList!) {
          markerId: MarkerId(!),
          position: LatLng(!, location.lng!),
          icon: myMarker

    if (mounted) {
        setState(() {
          _markers = localMarkers;

Answered By – Roman Jaquez

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

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