0

I am using Laravel 5.6.12 and vue.js

I am implementtrying to implement Google Maps with the help of this github link

I following the guidelines mentioned in above link as below.

Installation

npm install vue2-google-maps

Then wrote below code in app.js

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

Finally below code in the template

<GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
></GmapMap>

I got the below error.

- did you register the component correctly? For recursive components, make sure to provide the "name" option.

I have already added below script in the html head.

<script src="https://maps.googleapis.com/maps/api/js?key=apikey&libraries=places"></script>

Am I missing anything in above code?

Pankaj
  • 9,749
  • 32
  • 139
  • 283

1 Answers1

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);
Max Liashuk
  • 1,043
  • 7
  • 18
  • When I try first part which is `Vue.use(VueGoogleMaps` I get errors **You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.** – Pankaj Jun 02 '18 at 15:04
  • because I already added script in the html head **** – Pankaj Jun 02 '18 at 15:04
  • WHen I try second part which is `import GmapMap from 'vue2-google-maps/dist/components/map.vue' Vue.component('GmapMap', GmapCluster)` I get error **GmapCluster is not defined** – Pankaj Jun 02 '18 at 15:06
  • @Pankaj There was a typo in code. I've just fixed it. – Max Liashuk Jun 02 '18 at 19:57
  • @Pankaj (to the first comment) You have to remove script from head after switching the libraray because `vue2-google-maps` has build-in Google Maps JavaScript API – Max Liashuk Jun 02 '18 at 19:58
  • if I remove the js script, I get previous error which was solved by you here: https://stackoverflow.com/questions/50647627/google-reference-error-after-installing-vue-google-autocomplete because I have `import VueGoogleAutocomplete from 'vue-google-autocomplete'` for auto complete and import * as VueGoogleMaps from 'vue2-google-maps' for map, Am i doing anything wrong? – Pankaj Jun 02 '18 at 20:46
  • @Pankaj It seems like those 2 plugins are not compatible. You can try to use only `vue2-google-maps` as it's already contains autocomplete component (`GmapAutocomplete` ), example here: http://xkjyeah.github.io/vue-google-maps/basic-autocomplete.html – Max Liashuk Jun 02 '18 at 21:22
  • can u kindly suggest here? https://stackoverflow.com/questions/50710063/custom-marker-over-google-map – Pankaj Jun 05 '18 at 22:59