How to Add Multiple Markers on Google Map in Flutter

In this example, we are going to show you the easiest way to set multiple markers pointer on Google Map in the Flutter app. Before, going through this example, make sure you have integrated Google SDK and API to your dependency. See the example below and add multiple markers on your Google Map.

Read First:  How to Add Google Map in Flutter | Step by Step Easy Guide

To Add Multiple Markers on Google Map:

//list of markers 
final Set<Marker> markers = new Set();

markers.add(Marker( //add first marker
  markerId: MarkerId(showLocation.toString()),
  position: showLocation, //position of marker
  infoWindow: InfoWindow( //popup info 
    title: 'My Custom Title ',
    snippet: 'My Custom Subtitle',
  ),
  icon: BitmapDescriptor.defaultMarker, //Icon for Marker
));

markers.add(Marker( //add second marker
  markerId: MarkerId(showLocation.toString()),
  position: LatLng(27.7099116, 85.3132343), //position of marker
  infoWindow: InfoWindow( //popup info 
    title: 'My Custom Title ',
    snippet: 'My Custom Subtitle',
  ),
  icon: BitmapDescriptor.defaultMarker, //Icon for Marker
)); 

GoogleMap( //Map widget from google_maps_flutter package
  markers: markers, //markers to show on map
)

You can also set a custom marker with Image from Assets,

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

markers.add(
  Marker( //add start location marker
    icon: markerbitmap, //Icon for Marker
  )
);

Or, from Network Image URL:

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
    icon: BitmapDescriptor.fromBytes(bytes), //Icon for Marker
  )
);

For more details on Custom Markers: How to set Image Marker from Assets or URL on Google Map in Flutter

See the Example Below To Implement this Code:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
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
  final Set<Marker> markers = new Set(); //markers for google map
  static const LatLng showLocation = const LatLng(27.7089427, 85.3086209); //location to show in map
  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Multiple Markers in Google Map"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: GoogleMap( //Map widget from google_maps_flutter package
                    zoomGesturesEnabled: true, //enable Zoom in, out on map
                    initialCameraPosition: CameraPosition( //innital position in map
                      target: showLocation, //initial position
                      zoom: 15.0, //initial zoom level
                    ),
                    markers: getmarkers(), //markers to show on map
                    mapType: MapType.normal, //map type
                    onMapCreated: (controller) { //method called when map is created
                      setState(() {
                        mapController = controller; 
                      });
                    },
                  ),
       );
  }

  Set<Marker> getmarkers() { //markers to place on map
    setState(() {
      markers.add(Marker( //add first marker
        markerId: MarkerId(showLocation.toString()),
        position: showLocation, //position of marker
        infoWindow: InfoWindow( //popup info 
          title: 'Marker Title First ',
          snippet: 'My Custom Subtitle',
        ),
        icon: BitmapDescriptor.defaultMarker, //Icon for Marker
      ));

      markers.add(Marker( //add second marker
        markerId: MarkerId(showLocation.toString()),
        position: LatLng(27.7099116, 85.3132343), //position of marker
        infoWindow: InfoWindow( //popup info 
          title: 'Marker Title Second ',
          snippet: 'My Custom Subtitle',
        ),
        icon: BitmapDescriptor.defaultMarker, //Icon for Marker
      ));

      markers.add(Marker( //add third marker
        markerId: MarkerId(showLocation.toString()),
        position: LatLng(27.7137735, 85.315626), //position of marker
        infoWindow: InfoWindow( //popup info 
          title: 'Marker Title Third ',
          snippet: 'My Custom Subtitle',
        ),
        icon: BitmapDescriptor.defaultMarker, //Icon for Marker
      ));

       //add more markers here 
    });

    return markers;
  }
}

Output Screenshot:

In this way, you can add multiple markers on Google Map in Flutter App: