How to Resize Google Map Marker Image in Flutter

In this example, you will learn how to resize the bitmap image byte which is used as a marker image icon on Google Maps in Flutter. Google Maps shows the marker on its actual image size, here you will learn to resize the marker icon image.

First, Read: How to Resize Image Size in Flutter

First, add Image Flutter package to your project by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  image: ^3.2.2

import 'dart:typed_data';
import 'package:image/image.dart' as IMG;

Uint8List? resizeImage(Uint8List data, width, height) {
    Uint8List? resizedData = data;
    IMG.Image? img = IMG.decodeImage(data);
    IMG.Image resized = IMG.copyResize(img!, width: width, height: height);
    resizedData = Uint8List.fromList(IMG.encodePng(resized));
    return resizedData;
}

This function will be used to resize the image byte before loading it as a marker to google Maps.

Set<Marker> markers = Set();
LatLng startLocation = LatLng(27.6602292, 85.308027);

Load Image as Byte:

String imgurl = "https://www.fluttercampus.com/img/car.png";
Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imgurl))
      .load(imgurl))
      .buffer
      .asUint8List();

Set Marker with Loaded Image:

Uint8List? smallimg = resizeImage(bytes, 150, 150);
markers.add(
  Marker( 
    markerId: MarkerId(startLocation.toString()),
    position: startLocation, 
    icon: BitmapDescriptor.fromBytes(smallimg!), //Icon for Marker
  )
);

Here, the marker will be set with marker image icon size 150px X 150px.

Now, set markers on Google Map:

GoogleMap(
     markers: markers,
)

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:image/image.dart' as IMG;

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  GoogleMapController? mapController; //contrller for Google map
  Set<Marker> markers = Set(); //markers for google map

  LatLng startLocation = LatLng(27.6602292, 85.308027);  
  LatLng endLocation = LatLng(27.6599592, 85.3102498); 

  @override
  void initState() {
    addMarkers();
    super.initState();
  }

  Uint8List? resizeImage(Uint8List data, width, height) {
      Uint8List? resizedData = data;
      IMG.Image? img = IMG.decodeImage(data);
      IMG.Image resized = IMG.copyResize(img!, width: width, height: height);
      resizedData = Uint8List.fromList(IMG.encodePng(resized));
      return resizedData;
  }

  addMarkers() async {
    

      String imgurl = "https://www.fluttercampus.com/img/car.png";
      Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imgurl))
            .load(imgurl))
            .buffer
            .asUint8List();

      Uint8List? smallimg = resizeImage(bytes, 150, 150);
      markers.add(
        Marker( 
          markerId: MarkerId(startLocation.toString()),
          position: startLocation, 
          icon: BitmapDescriptor.fromBytes(smallimg!), //Icon for Marker
        )
      );

      Uint8List? bigimg = resizeImage(bytes, 300, 300);
      markers.add(
        Marker( 
          markerId: MarkerId(endLocation.toString()),
          position: endLocation, 
          icon: BitmapDescriptor.fromBytes(bigimg!), //Icon for Marker
        )
      );

    setState(() {
        //refresh UI
    });
  }

  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Resize Image Marker Icon Google Map"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          body: GoogleMap( //Map widget from google_maps_flutter package
                  zoomGesturesEnabled: true, //enable Zoom in, out on map
                  initialCameraPosition: CameraPosition( //innital position in map
                    target: startLocation, //initial position
                    zoom: 14.0, //initial zoom level
                  ),
                  markers: markers, //markers to show on map
                  mapType: MapType.normal, //map type
                  onMapCreated: (controller) { //method called when map is created
                    setState(() {
                      mapController = controller; 
                    });
                  },
          )
       );
  }
}