How to Update Markers in Flutter Maps from Firebase Database
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (181).NET Core  (28).NET MAUI  (227)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (236)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (200)File Formats  (73)Flutter  (136)JavaScript  (226)Microsoft  (122)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (964)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (163)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (147)Chart of the week  (58)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (681)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (21)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (522)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (406)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (628)What's new  (341)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
How to Update Markers in Flutter Maps from Firebase Database

How to Update Markers in Flutter Maps from Firebase Database

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 is a powerful data visualization widget that displays statistical information for a geographical area. Its rich feature set includes tile rendering from OpenStreetMap, Azure Maps, Bing Maps, 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. 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 to create a database in a 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

Note: For more details, refer to the country location database source.

Add Flutter Maps dependencies

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

  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 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.

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

      {required, required this.latitude, required this.longitude});

  Marker.fromJson(, 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 {
    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.
          (key, value) {
            Marker marker = Marker.fromJson(key, value);
                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.

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>[
                    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
Firebase Database with Marker Locations

Flutter Maps Rendered with Markers
Flutter Maps Rendered with Markers

We used only the default styles to keep the code simple, sticking with the purpose of this article. Flutter Maps also provides shape layers with features like selection, legends, labels, tooltips, bubbles, color mapping, and much more.

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

GitHub reference

You can get the complete code example for updating markers in Flutter Maps from a Firebase Database.


Thanks for reading! In this blog, we have seen how to easily update markers in the Flutter Maps 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 and demos on GitHub. Additionally, check out our demo apps for AndroidiOSwebWindows, and Linux.

If you need a new widget for the Flutter framework or new features in our existing widgets, you can contact us through our support forumsDirect-Trac, or feedback portal. As always, we are happy to assist you!

Related blogs


Share this post:

Comments (3)

hello, I have an error at the line ” Map mapMarkers = dataSnapShot.value; “on the video on markers in google map with firebase.
Indeed the word value is highlighted in red. Do you have a solution to solve this problem?
Thanks in advance

Meikanda Nayanar I
Meikanda Nayanar I

Hi Francois,

We have checked your query and cannot reproduce the issue from our side. Please follow the steps mentioned in the below links, which might help you to resolve the issues.

• Add firebase on the Flutter project –
• Firebase on Flutter –

Please let us know if this helps or revert us back with more details on this issue so that we can help further in this.


How put the marker inside the Firebase DB ?

Thank you


Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed