I am currently working on an application that features a Google map with a places autocomplete controller, similar to the example provided by Google at this link.
Whenever an address is searched or selected, or when the map bounds are changed, I trigger an Algolia search. This search has an event called onResult, which is fired upon receiving a response.
My goal is to convert all of this into Vue.js components. So far, I've successfully created separate components for the Google Maps display and the autocomplete feature.
I first load the autocomplete component and then use the mounted section of the Google Maps component to attach it as a controller.
Where I encounter difficulties is in the interaction between these components. For instance, when the place changes (an event from the autocomplete), I need to recenter the map and perform the search. However, since they are two different components, accessing the Google map becomes challenging.
Furthermore, when implementing the Algolia search, I also require a reference to the map in order to pass the marker when the event is triggered.
I initially attempted using a simple Vuex store, but it feels like tightly coupling the components. So, my question is: Have I overlooked something, or should I consider utilizing global event buses and simple stores instead?