trying to use vue2-google-maps getting error: "Emitted value instead of an instance of Error"

Question

tried using google maps with vue js and was told to use this package

started a project using vue cli

vue init webpack-simple googleMapsTest

than:

npm install vue2-google-maps

my App.vue file:

    <template>
  <div id="app">

    <gmap-map :center="center" :zoom="7" style="width: 500px; height: 300px">
      <!--<gmap-marker v-for="m in markers" :position="m.position" :clickable="true" :draggable="true" @click="center=m.position"></gmap-marker>-->
    </gmap-map>
  </div>
</template>


<script>
  import Vue from 'vue';
  export default {
    name: 'app',
    data () {
      return {
        msg:'maps',
        center: {lat: 10.0, lng: 10.0},
        markers: [{
          position: {lat: 10.0, lng: 10.0}
        }, {
          position: {lat: 11.0, lng: 11.0}
        }]
      }
    }
  }
</script>

my main.js file:

import Vue from 'vue'
import App from './App'
import router from './router'

import * as VueGoogleMaps from 'vue2-google-maps';

Vue.config.productionTip = false

Vue.use(VueGoogleMaps, {
  load: {
    key: 'AIzaSyA3NiPLBKub4wefs0jU83v6m3-Q24ZOUDws', //not realy my api key
    v: '3.26',
    // libraries: 'places', //// If you need to use place input
  }
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

getting error:

WARNING in ./~/vue-loader/lib/template-compiler?{"id":"data-v-5ab6ec5a"}!.
(Emitted value instead of an instance of Error) <gmap-marker v-for="m in m
 @ ./src/App.vue 9:2-170
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev

so i commented out the : gmap-marker tag

no map and also got this error:

(node:2414) DeprecationWarning: loaderUtils.parseQuery() received a non-st
parseQuery() will be replaced with getOptions() in the next major version

how can i use google maps in vue2?

user7868976 user7868976 · Accepted Answer · 2017-04-14T19:48:07

In the Vue.use(VueGoogleMaps, {[...]}) section try to avoid the last comma after -->> v: '3.26', <<--

for me it helped to just insert the :key tag into the gmap-marker:

gmap-marker v-for="m in markers" :key="1" ...

trying to use vue2-google-maps getting error: "Emitted value instead of an instance of Error"

2 Answers