title: How to optimize application to display more markers effectively on google map in flutter?
body: <p>Im working on a project, in this project I have to display markers on the map from database. In database i have around 6000+ customers data, and I want to display there information on maps using there latitude and longitude. Problem is when there is record of only 5-10 customers, app doesn't slow down, but when i display thousands of markers on the map, app starts lagging. is there any better way to solve this problem?</p>
  
  <p><strong>code for displaying markers on map</strong></p>
  
  <pre><code>_onMapCreated() async {
      // print(customerInfo);
      for (var item in ud.customerInfo) {
        if (item['customer_latitude'] == "" &amp;&amp; item['customer_longitude'] == "") {
          continue;
        } else {
          final MarkerId markerId = MarkerId((markers.length + 1).toString());
          LatLng markerPos = LatLng(double.parse(item['customer_latitude']),
              double.parse(item['customer_longitude']));
          final Marker marker = Marker(
              infoWindow: InfoWindow(
                title: item['customer_name'],
                snippet: item['customer_desc'],
              ),
              // onTap: () =&gt; _onMarkerTapped(markerId),
              icon: BitmapDescriptor.defaultMarkerWithHue(
                  item['customer_status'] == 'red'
                      ? BitmapDescriptor.hueRed
                      : item['customer_status'] == 'yellow'
                          ? BitmapDescriptor.hueYellow
                          : BitmapDescriptor.hueGreen),
              markerId: markerId,
              consumeTapEvents: true,
              position: markerPos,
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute&lt;Null&gt;(
                      builder: (BuildContext context) {
                        return CustomerDetail(
                            item['customer_id'],
                            item['customer_name'],
                            item['customer_email'],
                            item['customer_desc'],
                            item['customer_phone'],
                            item['customer_status']);
                      },
                      fullscreenDialog: true,
                    ));
              });
          _markers = null;
          markers[markerId] = marker;
        }
      }
      setState(() {});
    }
  </code></pre>
  
  <p>one more point, the data is already fetched from database and stored in a list, so during loop it is just getting data from the list and rendering it on the google maps.</p>