VueJS, ReferenceError: google is not defined

Question

I have the following source code and I got also the following error when I try to instantiate a new var with google.maps ...:

google' is not defined

Many of the answers talked about loading the API script asyncronously before everything else, and the order of the scripts matters, but I don't think that's my issue.

PS: I use this in the main.js

Vue.use(VueGoogleMaps, {    
  load: {    
    key: 'MY-KEY',    
    libraries: 'places', //// If you need to use place input    
  },    
})

Can anyone help me? Thanks.

<div class="map-container">     
       <gmap-map     
         id="map"     
         ref="map"     
         :center="center"     
         :zoom="15"     
         map-type-id="roadmap"     
         style="width:100%;  height: 400px;">     
           <gmap-marker     
           :key="index"    
            v-for="(m, index) in markers"    
            :position="m.position"    
             @click="center=m.position"    
             ></gmap-marker>    
                </gmap-map>
            </div>

<script>    
    import _ from 'lodash'    
    import { mapState } from 'vuex'    
    import * as VueGoogleMaps from 'vue2-google-maps'   

    export default {    
      computed: {    
        ...mapState([    
          'map',    
        ]),    
        mapStyle: function () {     
          const h = document.body.clientHeight - 80    
          return 'width: 100%; height: ' + h + 'px'    
        },    
        center: function () {    
          return { lat: 44.837938, lng: -0.579174 }    
        },    
      },    
      mounted: function () {    
        VueGoogleMaps.loaded.then(() => {
           var map = new google.maps.Map(document.getElementById('map'))    
        }
      },

From looking through some of the source code, it *seems* to me that the plugin doesn't expose an api and that It uses `google` as a global, so it expects it to be loaded outside of the library. You may be able to get it to work if you use `window.google` but only if that library is loaded separately. — Daniel, Feb 21 '19 at 20:15

Matthias S · Accepted Answer · 2019-09-26T15:24:41.593

6

As you have imported everything as VueGoogleMaps I would assume that google is within this object.

EDIT: Seems that google object is called gmapApi.

So change

var map = new google.maps.Map(document.getElementById('map'))

to

let map = new VueGoogleMaps.gmapApi.maps.Map(document.getElementById('map'))

Since you are not importing anything explicitly it should all rest within VueGoogleMaps. So if you want to have it called google, add the computed field as described in the other answer, except that gmapApi should sit within VueGoogleMaps.

So

computed: {
    google: VueGoogleMaps.gmapApi
}

edited Sep 26 '19 at 15:24

answered Feb 21 '19 at 12:46

Matthias S

3,358
3
21
31

Looks like you may be referencing info from `vue-google-maps`. Doesn't look like `vue2-google-maps` has an api – Daniel Feb 21 '19 at 20:04

charlycou · Answer 2 · 2019-02-21T13:02:43.633

2

You forgot one parenthesis:

VueGoogleMaps.loaded.then(() => {
           var map = new google.maps.Map(document.getElementById('map'))    
        })

Tell me if this helps.

Also from NPM vue2-google-maps,

If you need to gain access to the google object:

<template>
  <GmapMarker ref="myMarker"
    :position="google && new google.maps.LatLng(1.38, 103.8)" />
</template>
<script>
import {gmapApi} from 'vue2-google-maps'

export default {
  computed: {
    google: gmapApi
  }
}
</script>

edited Feb 21 '19 at 13:02

answered Feb 21 '19 at 10:08

charlycou

1,778
13
37

It doesnt help his problem. I have posted a similar answer and removed it as it didnt solve the issue. – Constantin Chirila Feb 21 '19 at 11:48
Edited my post: There is one parenthesis missing. I got it working in a CodeSandbox. – charlycou Feb 21 '19 at 13:12
@charlycou yes, i used "Matthias S" answer to solve the issue – Smix Sep 26 '19 at 14:28

score 1 · Answer 3 · answered Mar 10 '20 at 15:43

If you get "maps of null" it means google computed property is not ready yet.

Try this:

computed: {
    google: VueGoogleMaps.gmapApi
}
...

Inside your method to wait for gmapApi:

this.$gmapApiPromiseLazy().then(() => {
  //your code here
  //E.g. for directions
  var directionsService = new this.google.maps.DirectionsService();
});

VueJS, ReferenceError: google is not defined

3 Answers3