flutter How to get markers from API and show on map

Question

I make a simple app in flutter to get markers from API and draw them on Google Map.

I make a model with Location name and I have get markers information from the API and added them to the list of markers.

But when I run my app, no markers shown on map.

How can I solve this problem?

My function That get markers from API :

Future<List<Location>> getLocations() async {
    try {
      var url = 'http://10.0.2.2/Track_App/locations.php';
      final resp = await http.get(url);
      final responsebody = jsonDecode(resp.body);
      return responsebody; //this return a list
    } catch (e) {
      return [];
    }
  }

  List<Marker> allMarkers = [];

  loadLocations() async {
    List<Location> locations;
    locations = [];
    locations = await getLocations(); //we store the response in a list
    for (var i = 0; i < locations.length; i++) {
      LatLng latlng;
      latlng = LatLng(
        double.parse(locations[i].locX),
        double.parse(locations[i].locY),
      );
      allMarkers.add(
        Marker(
          markerId: MarkerId(locations[i].locId.toString()),
          position: latlng,
        ),
      );
    }
    setState(() {});
  }

Google Map Code :

FutureBuilder(
              future: loadLocations(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                return GoogleMap(
                  mapType: MapType.normal,
                  initialCameraPosition: _kGooglePlex,
                  markers: snapshot.data,
                );
              },
            ),

JSON data from API :

[
 {
  loc_id: "1 ",
  loc_x: "15.392567",
  loc_y: "44.278188"
 },
 {
  loc_id: "2 ",
  loc_x: "15.391717",
  loc_y: "44.278019"
 }
]

My Model :

class Location {
  Location({
    this.locId,
    this.locX,
    this.locY,
    this.locInfo,
    this.locSpd,
    this.locDate,
  });
  String locId;
  String locX;
  String locY;
  String locInfo;
  String locSpd;
  String locDate;
  factory Location.fromJson(Map<String, dynamic> json) => Location(
        locId: json['loc_id'],
        locX: json['loc_x'],
        locY: json['loc_y'],
        locInfo: json['loc_info'],
        locSpd: json['loc_spd'],
        locDate: json['loc_date'],
      );
  Map<String, dynamic> toJson() => {
        'loc_id': locId,
        'loc_x': locX,
        'loc_y': locY,
        'loc_info': locInfo,
        'loc_spd': locSpd,
        'loc_date': locDate,
      };
}

Answer 1

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

Whenever, you want to add maker here, create a new Marker and add to State

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

And your build function would just be like this

child: GoogleMap(
    onMapCreated: _onMapCreated,
    initialCameraPosition: const CameraPosition(
        target: LatLng(-33.852, 151.211),
        zoom: 11.0,
    ),
    markers: Set<Marker>.of(markers.values),
),

Answer 2

this code work for me just change your location listner

  Future<Offre> location_client() async{
var _loc = await _location.getLocation();
setState(() {
   client_lat = _loc.client.lat;
   client_lng = _loc.client.lng;
   print("test test"+_loc.client.lat.toString()+','+_loc.client.lng.toString());

   LatLng latlng = LatLng(client_lat,client_lng);
   setState(() {
     _markers.add(Marker(
         markerId: const MarkerId("home"),
         position: latlng,
         draggable: false,
         zIndex: 2,
         flat: true,
         anchor: const Offset(0.5, 0.5),
         icon: BitmapDescriptor.defaultMarker));
   });
});

}