Open ghost opened 6 years ago
Is it possible that the problem is coming from import * as VueGoogleMaps from '@/main.js'
? I'm not sure '@/main.js'
is the thing you want to do. Is there really any mains.js
file in your node_modules ?
i Have the same problem :
Unknown custom element:
I got the same problem... Here is my customized component.
<template>
<GoogleMap
:center="center"
:zoom="7"
map-type-id="terrain"
>
<GoogleMarker
:clickable="true"
:draggable="true"
:key="'m'+index.toString()"
:position="m.position"
@click="center=m.position"
v-for="(m, index) in markers"
>
</GoogleMarker>
</GoogleMap>
</template>
<script>
export default {
name: "my-map",
props: {
center: Object,
markers: Array
}
}
</script>
<style scoped lang="sass">
.vue-map-container
justify-content: center
align-items: center
width: 100%
height: 100%
</style>
while in my main.js,
import Vue from 'vue'
import App from './App.vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.config.productionTip = false;
Vue.use(VueGoogleMaps, {
load: {
key: '_my-key_',
libraries: 'places,drawing,visualization'
}
});
new Vue({
render: h => h(App),
}).$mount('#app');
Try using the built-in GmapMap and GmapMarker components
I ran into the same problem using a default Laravel 5.8 + Vue 2.6.10 installation. I think it might have something to do with a somewhat recent change in Vue to force non-camel-case elements (e.g. GmapMap is auto lowercased to gmapmap).
Using the example here I was able to get this working by creating my own plugin facade in my app.js file like this:
import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
load: {
key: 'google-maps-api-key'
},
installComponents: false
});
Vue.component('google-map', VueGoogleMaps.Map);
and then continuing in my application files using the <google-map>
element instead of GmapMap.
-m
this method doesn't render the google map
@bezblue ISSUE SOLVED
Unknown custom element: Vue.use(VueGoogleMaps, { load: { key: '', }, installComponents: true, // ADD THIS CODE TO REGISTER THE COMPONENT })
after you done above step you can use the GmapMap in your component as follows
`
</div>`
<style lang="css" scoped> .mapSty { background-color: "red"; padding: 20px; height: 500px; width: "100%"; } </style>
@diegoazh @xkjyeah
installComponents: true
didn't solve it for me (which anyways is the default value. However manually registering the components I need did solve it.
import Vue from 'vue';
import * as GmapVue from 'gmap-vue';
Vue.use(GmapVue, {
load: {
key: 'some-api-key',
libraries: 'places', // This is required if you use the Autocomplete plugin
},
installComponents: true,
});
Vue.component('google-maps-map', GmapVue.Map);
Vue.component('google-maps-marker', GmapVue.Marker);
Now in my components I can use it as
<google-maps-map
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 100%; height: 100%"
/>
[Vue warn]: Unknown custom element: <GmapMap> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
in main.js
// The Vue build version to load with the
import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' import store from '@/vuex/store' import * as VueGoogleMaps from '@/main.js'Vue.use(VueGoogleMaps, { load: { key: 'key' } })
Vue.use(Vuetify)
Vue.config.productionTip = false
/ eslint-disable no-new / new Vue({ store, el: '#app', router, components: { App }, template: ' '
})
`