I am integrating a Google Maps Vue JS component into a Laravel application view using the vue2-google-maps npm package.
As per the npm package documentation I am loading the vue components from the npm package using:
import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
load: {
key: 'mapkey',
libraries: 'places'
}
});
I am then using the components inside the blade view with the example code from the documentation:
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 100%; height: 500px"
id="googleMap"
>
<GmapMarker
:key="index"
v-for="(m, index) in mapPoints"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
>
</GmapMarker>
</GmapMap>
However, I receive the following error:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
After some research I came across this post, that used different component names, so I tried using the alternate component names gmap-map & gmap-marker, but this resulted in the same error.
<gmap-map
:center="center"
:zoom="12"
style="width:100%; height: 400px;"
>
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@click="center=m.position"
></gmap-marker>
</gmap-map>
I then tried importing the Map And Marker components directly instead of all the components recursively. However, this yields the same error:
import GmapMap from 'vue2-google-maps/src/components/map';
import GmapMarker from 'vue2-google-maps/src/components/marker';
Vue.component('GmapMap', GmapMap);
Vue.component('GmapMarker', GmapMarker);
What am I doing wrong?
Components in the plugin only install when installComponents
option to true
.
https://github.com/xkjyeah/vue-google-maps/blob/v0.10.5/src/main.js#L69
import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
load: {
key: 'mapkey',
libraries: 'places'
},
installComponents: true
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With