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

Here, both marker image icon source is the same.

In this way, you can resize the marker image icon size before placing it on google map in Flutter. 

No any Comments on this Article


Please Wait...