I recently completed a project involving a restaurant app using Vue and Google Maps. While everything is functional, I have encountered a persistent bug with the markers.
When navigating on the map and the bounds change, some markers seem to disappear. Even upon returning to their original position, they do not consistently reappear. Interestingly, moving the cursor quickly seems to increase the likelihood of them reappearing.
Upon inspecting the Vue console in Chrome, everything appears to be in order. The markers are indeed disappearing and appearing as expected within the map's bounds, even if they are not always visible on the screen.
The API is split across three components, and VueX is also utilized.
In the Google Map Component, which creates the map:
Your modified code here...The Google Markers Component handles the display of the markers:
Your updated code goes here...The MainMap component integrates both of the above components, manages geolocation requests, creates markers, and interacts with Google Places:
Your revised content here...The Store module helps manage data related to restaurants and markers:
Your rewritten text here...With the markers being manipulated dynamically through Computed properties in the Google Markers and MainMap components, pinpointing the source of my issue has proven challenging.
To summarize: while the markers are being added and removed dynamically (as evidenced by Vue and the Chrome Dev Console) based on whether their location falls within the bounds or not, they do not consistently appear on the map surface.