How to Update Markers in Flutter Maps from Firebase Database?
Tags: flutter, webdev, mobile, android
Published: 2021-10-04 11:53:40

---
title: How to Update Markers in Flutter Maps from Firebase Database?
published: true
date: 2021-10-04 10:30:59 UTC
tags: flutter, webdev, mobile, android
canonical_url: https://www.syncfusion.com/blogs/post/how-to-update-markers-in-flutter-maps-from-firebase-database.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et9yim08u30g0kg5blnu.png
---

A marker helps to easily identify locations, such as towns, buildings, or any points of interest on a map. But it may be difficult to manually update these marker locations if they change often. So, it is better to have them in a database.

Syncfusion [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps "Link to Flutter Maps") is a powerful data visualization widget that displays statistical information for a geographical area. Its rich feature set includes tile rendering from [OpenStreetMap](https://wiki.openstreetmap.org/wiki/Main_Page "Link to Wiki page for OpenStreetMap"), [Azure Maps](https://docs.microsoft.com/en-us/azure/azure-maps/about-azure-maps "Link to What is Azure Maps?"), [Bing Maps](https://help.syncfusion.com/flutter/maps/tile-layer#adding-bing-maps "Link to adding Bing Maps documentation"), [Google Maps](https://en.wikipedia.org/wiki/Google_Maps "Link to Wikipedia page for Google Maps"), and other tile providers with marker support.

In this article, we are going to see how to access and update markers in the Flutter Maps widget from a [Firebase real-time Database](https://firebase.google.com/docs/database "Link to Firebase Realtime Database documentation"). However, we are not going to discuss how to create a Firebase Realtime Database. For that, please refer to [Add Firebase to your Flutter app documentation](https://firebase.google.com/docs/flutter/setup?platform=android "Link to Add Firebase to your Flutter app documentation") to create a database in a [Firebase console](https://www.googleadservices.com/pagead/aclk?sa=L&ai=DChcSEwilzLOm_5bzAhV3nUsFHXy_BycYABAAGgJzZg&ohost=www.google.com&cid=CAESQeD2nrH8DuDGzKCm4_fpVSEY-PZL-BWivXa23SitYb9FHaz_mAJ14NdSoi5wWT9hy_CkZEycSuo_h0bx7gr9nk0m&sig=AOD64_1Dryph98ocH5RnT0Rh3-YNI7hO7w&q&adurl&ved=2ahUKEwi3o6ym_5bzAhWwzTgGHcH5B-AQ0Qx6BAgCEAE "Link to Firebase Console") and connect your Flutter app to it.

The following example database is in Firebase. We are going to update the markers for each country in the Flutter Maps widget.

![Example database in Firebase](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Example-database-in-Firebase.png)

**Note:** For more details, refer to the [country location database source](https://developers.google.com/public-data/docs/canonical/countries_csv "Link to country location database source").

## Add Flutter Maps dependencies

First, add the Flutter Maps package to update the map with markers in your Flutter application.

```
dependencies:
  syncfusion_flutter_maps: ^19.2.51-beta
  firebase_core: ^1.4.0
  firebase_database: ^7.1.2
```

## Retrieve the markers from Firebase to your Flutter app

We already have data in the Firebase database. Now, we are going to access the data through its path reference. This is straightforward, and we will return the list of markers to the [FutureBuilder](https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html "Link to the FutureBuilder class") widget in the build method. The class **Marker** is used to parse the data from the Firebase database and store the data in a local collection.

Refer to the following code example.

```dart
// Class that parses the data from database.
class Marker {
  String country;
  late double latitude;
  late double longitude;

  Marker(
      {required this.country, required this.latitude, required this.longitude});

  Marker.fromJson(this.country, Map data) {
    latitude = data['latitude'];
    longitude = data['longitude'];
  }
}

 late List<Marker> _markers;
 
 // Get the markers from database for a local collection.
  Future<List<Marker>> getMarkers() async {
    _markers.clear();
    var _dbRef = FirebaseDatabase.instance.reference().once();
    await _dbRef.then(
      (dataSnapShot) async {
        // Access the markers from database.
        Map<dynamic, dynamic> mapMarkers = dataSnapShot.value;

        // Get the markers in a local collection.
        mapMarkers.forEach(
          (key, value) {
            Marker marker = Marker.fromJson(key, value);
            _markers.add(Marker(
                country: key,
                latitude: double.parse(marker.latitude.toString()),
                longitude: double.parse(marker.longitude.toString())));
          },
        );
      },
    );
    return _markers;
  }
```

## Update the Maps widget with the markers from Firebase

Now, we are going to update the collection of markers we received from the database in Flutter Maps using the FutureBuilder child widget.

Refer to the following code example.

```dart
body: Padding(
        padding: EdgeInsets.all(8),
        //Get the markers as collection and update the Maps widget.
        child: FutureBuilder(
          future: getMarkers(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return SfMaps(
                layers: <MapLayer>[
                  MapShapeLayer(
                    source: _dataSource,
                    initialMarkersCount: _markers.length,
                    markerBuilder: (BuildContext context, int index) {
                      return MapMarker(
                        latitude: _markers[index].latitude,
                        longitude: _markers[index].longitude,
                      );
                    },
                  ),
                ],
              );
            }
            return Text('Loading');
          },
        ),
      ),
```

After executing the previous code, the markers will be updated in Flutter Maps, as seen in the following screenshots.

![Firebase Database with Marker Locations](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Firebase-Database-with-Marker-Locations.png)<figcaption>Firebase Database with Marker Locations</figcaption>

![Flutter Maps Rendered with Markers](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Flutter-Maps-Rendered-with-Markers.png)<figcaption>Flutter Maps Rendered with Markers</figcaption>

We used only the default styles to keep the code simple, sticking with the purpose of this article. Flutter Maps also provides [shape layers](https://help.syncfusion.com/flutter/maps/shape "Link to Shapes in Flutter Maps") with features like [selection](https://help.syncfusion.com/flutter/maps/selection "Link to Shape Selection in Flutter Maps"), [legends](https://help.syncfusion.com/flutter/maps/legend "Link to Legend in Flutter Maps "), [labels](https://help.syncfusion.com/flutter/maps/data-labels "Link to Data Labels in Flutter Maps"), [tooltips](https://help.syncfusion.com/flutter/maps/tooltip "Link to Tooltip in Flutter Maps"), [bubbles](https://help.syncfusion.com/flutter/maps/bubble "Link to Bubbles in Flutter Maps"), [color mapping](https://help.syncfusion.com/flutter/maps/shape#equal-color-mapping "Link to Equal color mapping"), and much more.

**Note:** Refer to these online demos to see what you can do with the marker styles in Flutter Maps:

- [World Clock](https://flutter.syncfusion.com/#/maps/shape-layer/marker "Link to World Clock demo on web")
- [Tourist places in South America](https://flutter.syncfusion.com/#/maps/shape-layer/zooming "Link to Tourist Places in South America demo on web")
- [Air Routes between Locations](https://flutter.syncfusion.com/#/maps/tile-layer/arcs-and-lines "Link to Air Routes between Locations demo on web")

## GitHub reference

You can get the complete [code example for updating markers in Flutter Maps from a Firebase Database](https://github.com/SyncfusionExamples/update_markers_to_flutter_maps_from_firebase_database "Link to Updating Markers in Flutter Maps from a Firebase Database demo on GitHub").

## Conclusion

Thanks for reading! In this blog, we have seen how to easily update markers in the [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps "Link to Flutter Maps widget") from a Firebase database. With this, you can easily denote the locations of physical reliefs, political divisions, and whatever you want on a map. Just give it a try and leave your feedback in the comments section given below, which will make me happy.

Also, check out the other features of our Flutter Maps in the [user guide](https://help.syncfusion.com/flutter/maps/ "Link to Flutter Maps (SfMaps) Overview") and [demos on GitHub](https://github.com/syncfusion/flutter-examples "Link to Flutter demos on GitHub"). Additionally, check out our demo apps for [Android](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples "Link to Flutter demos on Google Play Store"), [iOS](https://apps.apple.com/us/app/syncfusion-flutter-ui-widgets/id1475231341 "Link to Flutter demos on the App Store"), [web](https://flutter.syncfusion.com/"Link to Flutter demos on web"), [Windows](https://www.microsoft.com/store/productId/9NHNBWCSF85D "Link to Flutter demos on Microsoft Store"), and [Linux](https://snapcraft.io/syncfusion-flutter-gallery "Link to Flutter demos on snapcraft").

If you need a new widget for the Flutter framework or new features in our existing widgets, you can contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/flutter "Link to Syncfusion Feedback Portal"). As always, we are happy to assist you!

## Related blogs

- [How to Add Location Tracking to Your App Using Flutter Maps](https://dev.to/syncfusion/how-to-add-location-tracking-to-your-app-using-syncfusion-flutter-maps-34jd "Link to How to Add Location Tracking to Your App Using Flutter Maps blog")
- [Display Routes and Highlight Regions in Syncfusion Flutter Maps](https://dev.to/syncfusion/how-to-display-routes-and-highlight-regions-in-syncfusion-flutter-maps-5afn "Link to Display Routes and Highlight Regions in Syncfusion Flutter Maps blog")
- [Create a Choropleth Map in a Flutter Application](https://dev.to/syncfusion/how-to-create-a-choropleth-map-in-a-flutter-application-2bl6 "Link to Create a Choropleth Map in a Flutter Application blog")
- [Add Animated and Interactive Custom Map Markers in Flutter Maps](https://dev.to/syncfusion/how-to-add-animated-and-interactive-custom-map-markers-in-flutter-maps-429p "Link to Add Animated and Interactive Custom Map Markers in Flutter Maps blog")