VueJS components

If I understand you right, you have a Google Maps script which, when loaded, calls window.app.init, right?

Does your Vue component have an init() method (none is shown above)? If there was one, it would need to be at app.methods.init() remember for VueJS, standard callable methods live under methods key.

Alternatively: you don't mention if your app.init is part of the Vue component or not. If its not it would appear that your app.init function is being overridden because you are redefining window.app as your vue component.

Lastly, if your init is part of Vue, is your google maps fn callback calling this init() before the Vue is loaded and therefore no such method exists (yet)?


Maybe you should use, or at least study the code, of a package that does that.

For example, you can check vue-google-maps on Github : https://github.com/GuillaumeLeclerc/vue-google-maps/

It defines a whole lot of Components related to Google Maps.


Someone has already mentioned GuillaumeLeclerc/vue-google-maps which is available on npm as vue-google-maps, but be warned that that version only works with vue 1.x

If you are using v2, look at this great vue2 fork xkjyeah/vue-google-maps - it's available as vue2-google-maps on npm.

The API is straightforward and doesn't diverge far from the v1 version, and the repository is much more active than its upsteam counterpart.

It really made my vue map work a lot more painless than rolling my own, which is what I was initially doing.

I hope that helps