How to set Image Marker from Assets or URL on Google Map in Flutter

In this example, we are going to show you how to set markers on Google Map from Asset image, or Network Image from URL. You can also rotate markers as well. We will try to make markers like on the Uber app with bikes and cars.

Before going to this tutorial, first, see How to Add Google Map in Flutter App, Follow all the steps shown in the tutorial to add Google map in Flutter, then after you have added custom marker from Asset Image and Image from URL in Google Map.

To ass custom marker on Google map from assets image, first, you have to index assets folder in your project, for example, we have images in the following folder:

Now, let's index this folder in pubspec.yaml file:

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - assets/images/

You can also see this article for more info: How to Add Image from Assets Folder in Flutter App

Now add Image from Assets as a marker on Google map like below:

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

BitmapDescriptor markerbitmap = await BitmapDescriptor.fromAssetImage(
    ImageConfiguration(),
    "assets/images/bike.png",
);

markers.add(
  Marker( //add start location marker
    markerId: MarkerId(startLocation.toString()),
    position: startLocation, //position of marker
    infoWindow: InfoWindow( //popup info 
      title: 'Starting Point ',
      snippet: 'Start Marker',
    ),
    icon: markerbitmap, //Icon for Marker
  )
);

GoogleMap( 
    markers: markers, //markers to show on map 
)

You can also add a marker with Network Image from URL on Google Map.

See this also: How to Resize Google Map Marker Image in Flutter

Set<Marker> markers = Set();
LatLng carLocation = LatLng(27.659470, 85.3077363);

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

markers.add(
  Marker( //add start location marker
    markerId: MarkerId(carLocation.toString()),
    position: carLocation, //position of marker
    infoWindow: InfoWindow( //popup info 
      title: 'Car Point ',
      snippet: 'Car Marker',
    ),
    icon: BitmapDescriptor.fromBytes(bytes), //Icon for Marker
  )
);

GoogleMap( 
    markers: markers, //markers to show on map 
)

The complete code is given below:

import 'dart:typed_data';

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

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); 
  LatLng carLocation = LatLng(27.659470, 85.3077363); 

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

  addMarkers() async {
     BitmapDescriptor markerbitmap = await BitmapDescriptor.fromAssetImage(
          ImageConfiguration(),
          "assets/images/bike.png",
     );

      markers.add(
        Marker( //add start location marker
          markerId: MarkerId(startLocation.toString()),
          position: startLocation, //position of marker
          infoWindow: InfoWindow( //popup info 
            title: 'Starting Point ',
            snippet: 'Start Marker',
          ),
          icon: markerbitmap, //Icon for Marker
        )
      );

      markers.add(
        Marker( //add start location marker
          markerId: MarkerId(endLocation.toString()),
          position: endLocation, //position of marker
          rotation:-45,
          infoWindow: InfoWindow( //popup info 
            title: 'End Point ',
            snippet: 'End Marker',
          ),
          icon: markerbitmap, //Icon for Marker
        )
      );

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

markers.add(
  Marker( //add start location marker
    markerId: MarkerId(carLocation.toString()),
    position: carLocation, //position of marker
    infoWindow: InfoWindow( //popup info 
      title: 'Car Point ',
      snippet: 'Car Marker',
    ),
    icon: BitmapDescriptor.fromBytes(bytes), //Icon for Marker
  )
);

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

  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Image Marker on 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; 
                    });
                  },
          )
       );
  }
}