title: Iterate elements in flutter map
body: <p>Im trying to get array of elements in flutter with map package.</p>
  
  <p>I read <a href="https://alfredeveloper.com/como-implementar-un-mapa-con-flutter/" rel="nofollow noreferrer">this</a> tutorial to see how can i show more than one coordenates in flutter. This tutorial add elements manually, i need to add with api rest. </p>
  
  <p>I created a foreach to retrieve all elements in array, then i add all coordinates in list. The problem: The list reset in initstate method, so i can´t take length of the list to loop for all coordenates.</p>
  
  <p>This is the code:</p>
  
  <pre><code> MapController mapController;
    Map&lt;String, LatLng&gt; coords;
    List&lt;Marker&gt; markers;
    List&lt;Map&lt;String, LatLng&gt;&gt; listado = [];
  
    Future&lt;Null&gt; fetchPost() async {
      final response = await http.get(url);
      final responseJson = json.decode(response.body);
      for (Map user in responseJson) {
        coords.putIfAbsent("Test", () =&gt; new LatLng(user['lat'], user['long']));
        listado.add(coords);
       // print(listado.toList());
      }
    }
  
    @override
    void initState() {
      super.initState();
      mapController = new MapController();
      coords = new Map&lt;String, LatLng&gt;();
      fetchPost();
      markers = new List&lt;Marker&gt;();
      for (int i = 0; i &lt; listado.length; i++) {
        print(listado[1].values.elementAt(i));
        markers.add(new Marker(
            width: 80.0,
            height: 80.0,
            point: listado[1].values.elementAt(i),
            builder: (ctx) =&gt; new Icon(Icons.home, color: Colors.red[300])));
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return new FlutterMap(
        options: new MapOptions(
          center: new LatLng(37.7525244, 139.1650556),
          zoom: 5.0,
        ),
        mapController: mapController,
        layers: [
          new TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c']),
          new MarkerLayerOptions(markers: markers)
        ],
      );
    }
  }
  
  final String url =
      'https://my-json-server.typicode.com/tobiobi/myjasonserver/coordinates';
  
  //STATES
  class UserDetails {
    final String name;
    final double lat, long;
  
    UserDetails({this.name, this.lat, this.long});
  
    factory UserDetails.fromJson(Map&lt;dynamic, dynamic&gt; json) {
      return new UserDetails(
        name: json['name'],
        lat: json['lat'],
        long: json['long'],
      );
    }
  }
  </code></pre>
  
  <p>So, how can i get all coordinates in list and iterate in loop?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I try </p>
  
  <pre><code> void initState() {
      super.initState();
      mapController = new MapController();
      coords = new Map&lt;String, LatLng&gt;();
      fetchPost().then((data) {
        print(data);
        for (int i = 0; i &lt; listado.length; i++) {
          markers.add(new Marker(
              width: 80.0,
              height: 80.0,
              point: coords.values.elementAt(i),
              builder: (ctx) =&gt; new Icon(Icons.home, color: Colors.red[300])));
        }
      });
    }
  </code></pre>
  
  <p>But return 'the getter iterator was called on null'. The data has this json</p>
  
  <pre><code> this: MapsPageState
   data: null
  </code></pre>
  
  <p>Inside <em>this</em> i have listado array and coords but ¿how can i get?</p>
  
  <p><strong>UPDATE 2: SOLUTION</strong></p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:flutter_map/flutter_map.dart';
  import 'package:latlong/latlong.dart';
  import 'dart:convert';
  import 'package:http/http.dart' as http;
  import 'package:igota/screens/partials/alertmessages.dart';
  
  class MapsPage extends StatefulWidget {
    static String tag = 'maps-page';
  
    @override
    MapsPageState createState() =&gt; new MapsPageState();
  }
  
  class MapsPageState extends State&lt;MapsPage&gt; {
    MapController mapController;
    Map&lt;String, LatLng&gt; coords;
    List&lt;Marker&gt; markers;
    List&lt;Map&lt;String, LatLng&gt;&gt; list = [];
      int _counter = 0;
  
  
    bool loading;
    Future&lt;Null&gt; fetchPost() async {
      list = List();
      markers = List();
      mapController = new MapController();
      coords = new Map&lt;String, LatLng&gt;();
      final response = await http.get(
          'https://my-json-server.typicode.com/tobiobi/myjasonserver/coordinates').catchError((error) {
        print(error.toString());
        AlertMessages.general(context,'No ha sido posible acceder a los datos');
      });
      final List responseJson = json.decode(response.body) as List;
      for (Map&lt;String, dynamic&gt; data in responseJson) {
              _counter++;
  
        coords.putIfAbsent("Test $_counter", () =&gt; new LatLng(double.parse(data['lat'].toString()),  double.parse(data['long'].toString())));
       list.add(coords);
       loading=false;
      }
      return;
    }
    @override
    void initState(){
      loading = true;
      super.initState();
  
      fetchPost().then((data) {
        for (int i = 0; i &lt; list.length; i++) {
          markers.add(new Marker(
              width: 80.0,
              height: 80.0,
              point: list[0].values.elementAt(i),
              builder: (ctx) =&gt; new Icon(Icons.home, color: Colors.red[300])));
        }
        setState( () { } );
      }).catchError((error) {
        print(error.toString());
        AlertMessages.general(context, 'Problemas internos de código');
      });
    }
  
    @override
    Widget build(BuildContext context) {
      if (loading) {
        return new Container(
            color: Colors.red[300],
            child: new Center(
              child: new CircularProgressIndicator(
                valueColor: new AlwaysStoppedAnimation&lt;Color&gt;(Colors.white),
              ),
            ));
      } else {
        return new FlutterMap(
          options: new MapOptions(
            center: new LatLng(37.7525244, 139.1650556),
            zoom: 5.0,
          ),
          mapController: mapController,
          layers: [
            new TileLayerOptions(
                urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                subdomains: ['a', 'b', 'c']),
            new MarkerLayerOptions(markers: markers)
          ],
        );
      }
    }
  }
  </code></pre>