[Vuejs]-Error while implementing vue2-google-maps in vue.js and Laravel 5.6.12

by

0👍

✅

Short answer: You haven’t used plugin correctly.

Long answer: By default vue2-google-maps didn’t expose components directly but instead it exposes plugin that registers all google maps components (e.g. <GmapMap/>). You should read Quickstart before using the library.

> Basic approach – Register plugin
You should use plugin which will register all the desired components.

Correct usage:

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places',
})

Your usage:

import * as VueGoogleMaps from 'vue2-google-maps'
Vue.component('vue2-google-maps', VueGoogleMaps);

BTW: when using this approach you can remove <script src="https://maps.googleapis.com/..."></script> from you head with no issue:

> Alternative approach – Import only required components. The idea here is to import components directly. I’m not sure how it works with google maps api but in any case you can try

Correct usage:

import GmapMap from 'vue2-google-maps/dist/components/map.vue'
Vue.component('GmapMap', GmapMap)

Your usage:

import * as VueGoogleMaps from 'vue2-google-maps'
Vue.component('vue2-google-maps', VueGoogleMaps);

Leave a comment