Unknown custom element: <GmapMap>

[ghost]

[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: ''
})
`

[SimonDesautels]

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 ?

[AnasEsseghir]

i Have the same problem :
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[toto6321]

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');

[xkjyeah]

Try using the built-in GmapMap and GmapMarker components

[aschmelyun]

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.

[Raza9798]

-m

this method doesn't render the google map

[Raza9798]

@bezblue ISSUE SOLVED
Unknown custom element: Error is occurred because of unregistered component. to register the GmapMap
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 class="text-light p-3 bg-info text-center "> <GmapMap :center="{ lat: 10, lng: 10 }" :zoom="7" class="mapSty"> </GmapMap> </div>

<style lang="css" scoped> .mapSty { background-color: "red"; padding: 20px; height: 500px; width: "100%"; } </style>

@diegoazh @xkjyeah

ISSUE SOLVED

[ptheofan]

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%"
/>