How to add Custom Markers on Google map in the flutter mobile app

Hi Folks,

Most of these days apps use user location and maps to locate the location of their service or point their rider's location in case of delivery/rider apps. Google map comes up with a default marker but it doesn’t help much when we need to point to different types of markers with different symbols as per marker type.

Marker Example:

As we can see in the above example we need to show custom markers and each marker have a specific type. We need to follow a few important steps to add markers to our flutter mobile app.

Steps are:

• Install google_maps_flutter package
• Prepare your markers list
• Add your custom BitmapDescriptor

After installing the google map package and adding your KEYS you are able to use the google map widget in your flutter app.

Get Farhan Aslam’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

These days most apps are data-driven which means we need to request your server to access the required data. When your request is successful you have your response in your model class instance.

Now extract your list of markers data from the model class which must include lat-lng.

Marker(
    markerId: MarkerId(index.toString()),
    position: LatLng(lat, lng),
    onTap: (){
    //ontap logic if need to perform a specific task
    },
    //info window should be shown on tap of the markers
    infoWindow: InfoWindow(title: 'test',snippet: 'desciption for test'),
    icon: BitmapDescriptor.defaultMarker)

When we are preparing our markers list we need to make sure to use our custom function to return the icon passed in the marker instead of the default marker and the info window is used to show the detail of the marker.

Future<BitmapDescriptor> getCustomMarkerIcon(input) async {
    late BitmapDescriptor customIcon;
    await getBytesFromAsset(KImagesPath.markerList, 140)
        .then((value) => customIcon = BitmapDescriptor.fromBytes(value));
    return customIcon;
}

Here we are using a function named getBytesFromAsset which is responsible for converting our asset files into bytes.

Future<Uint8List> getBytesFromAsset(String path, double width) async {
  ByteData data = await rootBundle.load(path);
  ui.Codec codec = await ui.instantiateImageCodec(data.
  buffer.asUint8List(),targetWidth: width.toInt());
  ui.FrameInfo fi = await codec.getNextFrame();
  return (await fi.image.toByteData(format: ui.ImageByteFormat.png))!
          .buffer.asUint8List();
}