title: Flutter Google Map create Card for each Markers, issue
body: <p><strong>This is what i have:</strong>
  <a href="https://i.stack.imgur.com/TCll5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TCll5.png" alt="enter image description here" /></a></p>
  <p><strong>And this is the want i want:</strong>
  <a href="https://i.stack.imgur.com/AjjP4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AjjP4.png" alt="enter image description here" /></a></p>
  <p><strong>This is my code:</strong></p>
  <pre><code>const double ZOOM = 1;
  
  class Location2 extends StatefulWidget {
    @override
    @override
    _Location2 createState() =&gt; _Location2();
  }
  
  class _Location2 extends State&lt;Location2&gt; {
    static GoogleMapController? _googleMapController;
    Set&lt;Marker&gt; markers = Set();
  
    Completer&lt;GoogleMapController&gt; _controllerGoogleMap = Completer(); 
    late GoogleMapController newGoogleMapController;
  
    Directions? _info;
  
    List&lt;LatLng&gt; pointsNew = [];
  
    late LatLng latLng;
    late LatLng latLatPosition;
    late Position currentPosition;
    var geoLocator = Geolocator();
    double bottomPaddingOfMap = 0;
    @override
    void initState() {
      super.initState();
      setState(() {});
    }
    static const CameraPosition _kGooglePlex = const CameraPosition(
      target: LatLng(40.7956, 29.4420),
      zoom: 14.4746,
    ); 
  
    @override
    Widget build(BuildContext context) {
      return SafeArea(
        child: StreamBuilder&lt;QuerySnapshot&gt;(
          stream: FirebaseFirestore.instance.collection(&quot;Location&quot;).snapshots(),
          builder: (context, snapshot) {
            // ignore: avoid_print
            print(snapshot);
            if (snapshot.hasData) {
              //Extract the location from document
              var locationList = snapshot.data!.docs.toList();
              //GeoPoint location = snapshot.data!.docs.first.get(&quot;location&quot;);
  
              List&lt;GeoPoint&gt; createLocationList = [];
              for (int i = 0; i &lt; locationList.length; i++) {
                GeoPoint findLocation = locationList[i].get(&quot;location&quot;);
  
                createLocationList.add(findLocation);
              }
  
              // Check if location is valid
              // ignore: unnecessary_null_comparison
              if (createLocationList[0] == null) {
                return const Text(&quot;There was no location data&quot;);
              }
  
              // Remove any existing markers
              markers.clear();
  
              for (int i = 0; i &lt; createLocationList.length; i++) {
                //createLocationList
  
                latLng = LatLng(createLocationList[i].latitude,
                    createLocationList[i].longitude);
  
                String? title1 = locationList[i].get(&quot;title&quot;);
                String? snippet1 = locationList[i].get(&quot;snippet&quot;);
  
                markers.add(Marker(
                  markerId: const MarkerId(&quot;location&quot;),
                  position: latLng,
                  infoWindow: InfoWindow(title: title1, snippet: snippet1),
                ));
              }
              _googleMapController?.animateCamera(CameraUpdate.newCameraPosition(
                CameraPosition(
                  target: latLng,
                  zoom: ZOOM,
                ),
              ));
              return Stack(
                alignment: Alignment.center,
                children: [
                  GoogleMap(
                    padding: EdgeInsets.only(bottom: bottomPaddingOfMap),
                    mapType: MapType.normal,
                    myLocationButtonEnabled: true,
                    markers: markers,
                    initialCameraPosition: _kGooglePlex,
                    myLocationEnabled: true,
                    zoomGesturesEnabled: true,
                    zoomControlsEnabled: true,
                    onMapCreated: (GoogleMapController controller) {
                      _controllerGoogleMap.complete(controller);
                      newGoogleMapController = controller;
  </code></pre>
  <p><strong>and this is the code (what i wanted) in the example image (codes are very old so doesn't work without changes):</strong></p>
  <pre><code>void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    bool mapToggle = false;
    bool clientsToggle = false;
    bool resetToggle = false;
  
    var currentLocation;
  
    var clients = [];
  
    var currentClient;
    var currentBearing;
  
    GoogleMapController mapController;
  
    void initState() {
      super.initState();
      Geolocator().getCurrentPosition().then((currloc) {
        setState(() {
          currentLocation = currloc;
          mapToggle = true;
          populateClients();
        });
      });
    }
  
    populateClients() {
      clients = [];
      Firestore.instance.collection('markers').getDocuments().then((docs) {
        if (docs.documents.isNotEmpty) {
          setState(() {
            clientsToggle = true;
          });
          for (int i = 0; i &lt; docs.documents.length; ++i) {
            clients.add(docs.documents[i].data);
            initMarker(docs.documents[i].data);
          }
        }
      });
    }
  
    initMarker(client) {
      mapController.clearMarkers().then((val) {
        mapController.addMarker(MarkerOptions(
            position:
                LatLng(client['location'].latitude, client['location'].longitude),
            draggable: false,
            infoWindowText: InfoWindowText(client['clientName'], 'Nice')));
      });
    }
  
    Widget clientCard(client) {
      return Padding(
          padding: EdgeInsets.only(left: 2.0, top: 10.0),
          child: InkWell(
              onTap: () {
                setState(() {
                  currentClient = client;
                  currentBearing = 90.0;
                });
                zoomInMarker(client);
              },
              child: Material(
                elevation: 4.0,
                borderRadius: BorderRadius.circular(5.0),
                child: Container(
                    height: 100.0,
                    width: 125.0,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5.0),
                        color: Colors.white),
                    child: Center(child: Text(client['clientName']))),
              )));
    }
  
    zoomInMarker(client) {
      mapController
          .animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
              target: LatLng(
                  client['location'].latitude, client['location'].longitude),
              zoom: 17.0,
              bearing: 90.0,
              tilt: 45.0)))
          .then((val) {
        setState(() {
          resetToggle = true;
        });
      });
    }
  
    resetCamera() {
      mapController.animateCamera(CameraUpdate.newCameraPosition(
          CameraPosition(target: LatLng(40.7128, -74.0060), zoom: 10.0))).then((val) {
               setState(() {
                       resetToggle = false;
               });
          });
    }
  
    addBearing() {
      mapController.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(
          target: LatLng(currentClient['location'].latitude, 
          currentClient['location'].longitude
        ),
        bearing: currentBearing == 360.0 ? currentBearing : currentBearing + 90.0,
        zoom: 17.0,
        tilt: 45.0
      )
      )
      ).then((val) {
        setState(() {
          if(currentBearing == 360.0) {}
          else {
            currentBearing = currentBearing + 90.0;
          }
        });
      });
        }
  
        removeBearing() {
      mapController.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(
          target: LatLng(currentClient['location'].latitude, 
          currentClient['location'].longitude
        ),
        bearing: currentBearing == 0.0 ? currentBearing : currentBearing - 90.0,
        zoom: 17.0,
        tilt: 45.0
      )
      )
      ).then((val) {
        setState(() {
          if(currentBearing == 0.0) {}
          else {
            currentBearing = currentBearing - 90.0;
          }
        });
      });
        }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            title: Text('Map Demo'),
          ),
          body: Column(
            children: &lt;Widget&gt;[
              Stack(
                children: &lt;Widget&gt;[
                  Container(
                      height: MediaQuery.of(context).size.height - 80.0,
                      width: double.infinity,
                      child: mapToggle
                          ? GoogleMap(
                              onMapCreated: onMapCreated,
                              options: GoogleMapOptions(
                                  cameraPosition: CameraPosition(
                                      target: LatLng(40.7128, -74.0060),
                                      zoom: 10.0)),
                            )
                          : Center(
                              child: Text(
                              'Loading.. Please wait..',
                              style: TextStyle(fontSize: 20.0),
                            ))),
                  Positioned(
                      top: MediaQuery.of(context).size.height - 250.0,
                      left: 10.0,
                      child: Container(
                          height: 125.0,
                          width: MediaQuery.of(context).size.width,
                          child: clientsToggle
                              ? ListView(
                                  scrollDirection: Axis.horizontal,
                                  padding: EdgeInsets.all(8.0),
                                  children: clients.map((element) {
                                    return clientCard(element);
                                  }).toList(),
                                )
                              : Container(height: 1.0, width: 1.0))),
                  resetToggle
                      ? Positioned(
                          top: MediaQuery.of(context).size.height -
                              (MediaQuery.of(context).size.height -
                              50.0),
                          right: 15.0,
                          child: FloatingActionButton(
                            onPressed: resetCamera,
                            mini: true,
                            backgroundColor: Colors.red,
                            child: Icon(Icons.refresh),
                          ))
                      : Container(),
                  resetToggle
                      ? Positioned(
                          top: MediaQuery.of(context).size.height -
                              (MediaQuery.of(context).size.height -
                              50.0),
                          right: 60.0,
                          child: FloatingActionButton(
                            onPressed: addBearing,
                            mini: true,
                            backgroundColor: Colors.green,
                            child: Icon(Icons.rotate_left
                          ))
                      )
                      : Container(),
                  resetToggle
                      ? Positioned(
                          top: MediaQuery.of(context).size.height -
                              (MediaQuery.of(context).size.height -
                              50.0),
                          right: 110.0,
                          child: FloatingActionButton(
                            onPressed: removeBearing,
                            mini: true,
                            backgroundColor: Colors.blue,
                            child: Icon(Icons.rotate_right)
                          ))
                      : Container()
                ],
              )
            ],
          ));
    }
  
    void onMapCreated(controller) {
      setState(() {
        mapController = controller;
  </code></pre>
  <p>Here is the relative video (he used firestore): <a href="https://www.youtube.com/watch?v=Hg8CT3ysFjY&amp;t=1040s" rel="nofollow noreferrer">here</a>
  And this is the relative video (he didn't use firestore, all datas from models: <a href="https://www.youtube.com/watch?v=CjhXyY_92xU" rel="nofollow noreferrer">here</a>
  <strong>How can I code it to my app as in these examples?</strong></p>