Laravel + vue-google-maps setup

Question

I'm trying to use vue-google-maps package with Laravel but with the most basic setup from the docs I keep getting the "[Vue warn]: Unknown custom element: - did you register the component correctly?" error.

app.js

require('./bootstrap');

window.Vue = require('vue');

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

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

const app = new Vue({
    el: '#app'
});

** In my blade file**

<div id="app">
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px">
<GmapMarker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
/>
</GmapMap>
</div>

Note: I compiled my JS and it is referenced in my blade.html file.

did you try `` and `` rather than `` and ``? – CUGreen Oct 09 '18 at 06:07 — CUGreen, Oct 09 '18 at 06:07

score 1 · Answer 1 · answered Jun 26 '19 at 20:03

The vue2-google-maps package does not automatically install all the components.

In order to automatically install all components you must explicitly set installComponents to true.

import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'MY_KEY',
    libraries: 'places'
  },
  installComponents: true
});

https://github.com/xkjyeah/vue-google-maps/blob/v0.10.5/src/main.js#L69

Laravel + vue-google-maps setup

1 Answers1