How to add multiple markers inside google maps of flutter

Question

I am trying to add more than one marker in my google maps screen.. but I didn't get any idea how to do that.. I have applied some examples in some articles.. but I get an error...here is part of my code..

GoogleMap(
              initialCameraPosition: const CameraPosition(
                target: LatLng(...,...),
                zoom: 18.0,
              ),
              markers: Set.of([marker]), // here I want to add multiple markers
              onMapCreated: _onMapCreated,
)

is there a simple way to add multiple markers?

and here is the code for marker

void loc(LocationData a) {
    LatLng latlng = LatLng(a.latitude, a.longitude);
    this.setState(() {
      marker = Marker(
        markerId: MarkerId("mine"),
        position: latlng,
        icon: BitmapDescriptor.defaultMarker,
        draggable: false,
        zIndex: 1,
      );
    });
  }

Jim · Accepted Answer · 2020-05-06T06:08:00.283

google_maps_flutter has provided example for adding multiple markers: place marker, you should check this out:

  void _add() {
    final int markerCount = markers.length;

    if (markerCount == 12) {
      return;
    }

    final String markerIdVal = 'marker_id_$_markerIdCounter';
    _markerIdCounter++;
    final MarkerId markerId = MarkerId(markerIdVal);

    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(
        center.latitude + sin(_markerIdCounter * pi / 6.0) / 20.0,
        center.longitude + cos(_markerIdCounter * pi / 6.0) / 20.0,
      ),
      infoWindow: InfoWindow(title: markerIdVal, snippet: '*'),
      onTap: () {
        _onMarkerTapped(markerId);
      },
      onDragEnd: (LatLng position) {
        _onMarkerDragEnd(markerId, position);
      },
    );

    setState(() {
      markers[markerId] = marker;
    });
  }

UPDATED:

GoogleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: const CameraPosition(
                target: LatLng(-33.852, 151.211),
                zoom: 11.0,
              ),
              // TODO(iskakaushik): Remove this when collection literals makes it to stable.
              // https://github.com/flutter/flutter/issues/28312
              // ignore: prefer_collection_literals
              markers: Set<Marker>.of(markers.values),
            ),

void loc(LocationData a) {
    LatLng latlng = LatLng(a.latitude, a.longitude);
     final Marker marker = Marker(
        markerId: MarkerId("mine"),
        position: latlng,
        icon: BitmapDescriptor.defaultMarker,
        draggable: false,
        zIndex: 1,
      );
    setState(() {
      markers[markerId] = marker;
    });
  }

because I am new in this field...would you like to help me by editing my code inside ```markers: Set.of([marker]),``` ? — wahyu, May 06 '20 at 05:21
I have tried your code but I get confused how to add my old position... because after adding your code my old position is lost — wahyu, May 06 '20 at 05:47
is there a way to add my old position to your code? my old position in defined inside ```void loc(...)``` — wahyu, May 06 '20 at 05:49

score 1 · Answer 2 · answered Jan 26 '22 at 20:46

My implementation with GetX but useful for all to understand logic:

Controller:

class MapController extends GetxController {
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{}.obs;

  @override
  void onInit() {
    super.onInit();
    generateMarkers();
  }

  generateMarkers() {
    int count = 0;
    for (var item in _markers) {
      count += 1;
      final String markerIdVal = 'marker_id_' + count.toString();
      final MarkerId markerId = MarkerId(markerIdVal);

      final Marker marker = Marker(
        markerId: markerId,
        position: LatLng(
          double.parse(item[1].toString()),
          double.parse(item[2].toString()),
        ),
        infoWindow:
            InfoWindow(title: item[0].toString(), snippet: 'Content'),
      );

      markers[markerId] = marker;
    }
  }

  final _markers = [
    [
      'Rektörlük',
      40.972877,
      29.152653,
      '/assets/img/number_1_3.png',
      'rektorluk'
    ],
    [
      'Mühendislik',
      40.972443,
      29.151457,
      '/assets/img/number_2_3.png',
      'muhendislik'
    ]
    // Continues
  ];
}

View:

class MapView extends GetView<MapController> {
  final Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kYeditepe =
      CameraPosition(target: LatLng(40.971991, 29.152793), zoom: 17, tilt: 17);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: backAppBar(context, 'MAP'.tr),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _kYeditepe,
        markers: Set<Marker>.of(controller.markers.values),
        onMapCreated: (GoogleMapController mapController) {
          rootBundle.loadString('assets/map_styles.txt').then((string) {
            String _mapStyle = string;
            mapController.setMapStyle(_mapStyle);
            _controller.complete(mapController);
          });
        },
      ),
    );
  }

}

How to add multiple markers inside google maps of flutter

2 Answers2