Iterate markers Google Flutter maps

Question

I´m trying to iterate markers in new google flutter map.

I retrieve the array of the coordinates with a web service, then i iterate the elements and get the index that have latitude and longitude.

for (int i = 0; i < list.length; i++) {
 mapController.addMarker(MarkerOptions(position:  list[0].values.elementAt(i)))));
}

And the map options.

GoogleMapController mapController;

GoogleMap(
     onMapCreated: (GoogleMapController mapController) {
          mapController = mapController;         
     },
     options: GoogleMapOptions(
          mapType: MapType.satellite,
          myLocationEnabled :true,
          cameraPosition: CameraPosition(
          target: LatLng(40.347022, -3.750381), zoom: 5.0),
    ),
),

I suppose that mapController should take the coordinates that i put in the for loop, but doesn't work. The console return

The method 'addMarker' was called on null.

So the question is, how can i add multiple markers dynamically using google flutter map package?

Also i tried this simple code and works, so the error is occurred when adding markers.

  GoogleMapController mapController;

    GoogleMap(
                  onMapCreated: (GoogleMapController mapController) {
                    mapController = mapController;
                    mapController.addMarker(MarkerOptions(
                      position:LatLng(40.347022, -3.750381),          
                      infoWindowText: InfoWindowText("Title", "Content"),
                      //icon:
                    ));
                     mapController.addMarker(MarkerOptions(
                      position:LatLng(43.321871, -3.006887),          
                      infoWindowText: InfoWindowText("Title", "Content"),
                      //icon:
                    ));

                  },
                  options: GoogleMapOptions(
                    mapType: MapType.satellite,
                    myLocationEnabled :true,
                    cameraPosition: CameraPosition(
                        target: LatLng(40.347022, -3.750381), zoom: 5.0),
                  ),
                ),

UPDATE 2

I found this example code. This is exactly that i want but i can´t repeat this code, return this error

https://github.com/gerryhigh/Flutter-Google-Maps-Demo/blob/master/lib/venues.dart

NoSuchMethodError: The getter 'className' was called on null.

Answer 1

I call an instance of Google maps in the main build function.Like this:

return GoogleMap(
  onMapCreated: _onMapCreated,
  options: GoogleMapOptions(
    cameraPosition: CameraPosition(
      target: _center1,
      zoom: 11.0,
    ),
  ),
);

Inside the "_onMapCreated" function is where I have the iterator:

widget.model.allItems.forEach((item) {
  //print("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
  print(item.lat);

  var newItem = LatLng(double.parse(item.lat), double.parse(item.lon));
  mapController.addMarker(
    MarkerOptions(
      icon: BitmapDescriptor.fromAsset(assetName),
      position: newItem,
    ),
  );
});

This is working for me.

Answer 2

In the first example GoogleMapController paramater and your local variable have the same name, so basically, local variable becomes shadowed and you're assigning function parameter value to itself. Renaming one of these two should resolve the issue.

Answer 3

void populateOrder(Item item) async {
if (item != null) {
  for (int i = 0; i < item.feature.length; i++) {
    var position = item.feature[i];
    if (position != null) {
      try {
        if (double.parse(position.latitude) != null &&
            double.parse(position.longitude) != null) {
           mapController.clearMarkers().then((value){
             mapController.addMarker(
              MarkerOptions(
                position: LatLng(double.parse(position.latitude),
                    double.parse(position.longitude)),
                infoWindowText: InfoWindowText(position.schet, ""),
                icon: BitmapDescriptor.defaultMarker,
              ),
            );
          });
        }
      } catch (e) {
        print(e);
      }
    }
  }
}

}

void _onMapCreated(GoogleMapController controller) {
mapController = controller;
populateOrder(itemize);
Future.delayed(Duration(seconds: 6));

}

Answer 4

The library was updated: this is how I was able to show multiple markers on the map.

     Completer<GoogleMapController> _controller = Completer();
         // initial camera position
         CameraPosition _cameraPos;
     // A map of markers
         Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
        // function to generate random ids
        int generateIds() {
              var rng = new Random();
              var randomInt;      
                randomInt = rng.nextInt(100);
                print(rng.nextInt(100));
              return randomInt;
            }

            //call this function in initstate
            // I'm getting a json Object with locations from an 
            // external api
            buildMarkers() {
                  for (var i = 0; i < gridItem.locations.length; i++) {
                    var markerIdVal = generateIds();
                  final MarkerId markerId = MarkerId(markerIdVal.toString());
                    final Marker marker = Marker(
                  markerId: markerId,
                  position: LatLng(
                   gridItem.locations[i].latitude,
                    gridItem.locations[i].longitude,
                  ),
                  infoWindow: InfoWindow(title: gridItem.locations[i].place, snippet: gridItem.locations[i].region),
                );
// you could do setState here when adding the markers to the Map
                 markers[markerId] = marker;

                  }
                  print("Length:: + ${markers.length}");
                }
    // your Googlemaps Widget somewhere in your widget tree
    GoogleMap(
              mapType: MapType.normal,
              initialCameraPosition: _cameraPos,
              gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[Factory<OneSequenceGestureRecognizer>(()=>ScaleGestureRecognizer())].toSet(),
              markers: Set<Marker>.of(markers.values),
              onMapCreated: (GoogleMapController controller) {
                             _controller.complete(controller);}),