Скачать или смотреть Solving the Google Maps Marker Display Issue in Flutter Web

Discover why your new markers don't appear on Google Maps and how to implement a unique `markerId` for seamless updates in your Flutter web application.
---
This video is based on the question https://stackoverflow.com/q/76132295/ asked by the user 'user3735816' ( https://stackoverflow.com/u/3735816/ ) and on the answer https://stackoverflow.com/a/76159147/ provided by the user 'user3735816' ( https://stackoverflow.com/u/3735816/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Why doesn't the new marker show up when I click on the map?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Why Your New Marker Doesn't Show Up on Google Maps

While integrating Google Maps into your Flutter web application, you might encounter a frustrating situation where new markers fail to appear when you click on the map. This can hinder user experience, especially if they are expecting immediate feedback from their interactions.

The core of the issue lies in how markers are managed in your code, particularly regarding their unique identifiers.

Understanding the Problem

In your implementation, when a user taps on the map to add a marker, the addMarker function is invoked. However, upon clicking, it becomes apparent that the newly created marker isn't displayed on the map instantly. Instead, only the old marker remains visible.

This issue stems from the fact that the marker identifiers (markerId) you used do not change with each new marker addition. Since Google Maps requires unique identifiers for each marker to render them properly, not altering these IDs results in the map only displaying the original marker.

Code Snippet for Reference

Here’s a glimpse of the original addMarker function:

[[See Video to Reveal this Text or Code Snippet]]

Solution: Unique Marker Identifiers

To resolve this issue, you need to ensure that each marker has a unique identifier. This can be done by generating a new markerId each time the user adds a marker. The simplest approach is to use the current timestamp in milliseconds as the identifier.

Updated Code

Here's the adjusted addMarker function that addresses the issue:

[[See Video to Reveal this Text or Code Snippet]]

Key Changes

Unique Marker ID: The markerId now uses the current timestamp generated by DateTime.now().millisecondsSinceEpoch.toString(). This ensures that every time you click the map, the marker gets a unique ID.

Updating the Markers: The _markers set is updated correctly without clearing it prior to creating the new marker, allowing multiple markers to be displayed if required.

Conclusion

Integrating Google Maps in a Flutter web application can be tricky, especially with marker management. The problem of markers not updating is usually due to non-unique identifiers. By modifying the addMarker function to use unique markerId for each new marker, you can ensure that your users will see the markers immediately as they interact with the map.

With this change, your application should provide a smoother and more interactive experience when using maps. If you have any questions or further issues, feel free to comment below!