Error while implementing vue2-google-maps in vue.js and Laravel 5.6.12

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/50649177/error-while-implementing-vue2-google-maps-in-vue-js-and-laravel-5-6-12

标签

google-maps-api-3

Vue.js

laravel-5.6