Controlling Google Map API with VueJS

submited by

Style Pass

2022-06-22 14:00:12

The GoogleMap provides an excellent JS API that you may use to manipulate and add rich content to the Map. I have created a standalone example of how you can get started with VueJS (version 3 in OptionAPI).

To make above example work, you would need to first register with Google Platform Account and get an API key. (They will give you a free trial that you may use to test on localhost.) Once you have that, go and replace the REPLACE_GOOGLE_API_KEY string in above example with your Google API Key. Then the example should work, and you will see something similar to the below screenshot. You may drag and move the map, and the map info on the right will automatically update.

What I have done in the example is let GoogleMap API to call a global JS function and initialize the map object. Once I have that, I stored it inside a VueJS's $options variable in the Vue's app instance. Note that we can not make this map object reactive inside Vue, since it's controlled by GoogleMap API itself. We can however, use it as read only object. To ensure our UI will update after map has new information, we used a reactive mapUpdateTs property to track changes from GoogleMap callback, and whenever that is changed, we use a computed uiMap object to refresh the UI.