Can't import loaded; loaded is undefined

[pawelpanek81]

Hello, i want to use new google.maps.places.Autocomplete(...) in my Vue component, so I should wait until the library is loaded because of "ReferenceError: google is not defined". I found solution here: https://github.com/xkjyeah/vue-google-maps/wiki/vue-google-maps-FAQ but, when i put loaded.then(() => { alert(1); }); there is a error in my console:

[Vue warn]: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0_vue2_google_maps__.loaded is undefined"
TypeError: "__WEBPACK_IMPORTED_MODULE_0_vue2_google_maps__.loaded is undefined"

how can I wait until google is loaded?

here is my Vue component:

<template>
  <div>
    <v-text-field 
      name="city" 
      type="text" 
      label="Miejscowość" 
      prepend-icon="location_city"
      ref="autocomplete">
    </v-text-field>
  </div>
</template>

<script>
import { loaded } from 'vue2-google-maps';

export default {
  mounted() {
    loaded.then(() => { alert(1); });
  },
};
</script>

Of course I added in my main.js

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

and

Vue.use(VueGoogleMaps, {
  load: {
    key: 'bla_bla_bla',
    libraries: 'places',
  },
});

[xkjyeah]

Hey I haven't had time to update the Wiki, but instead of the loaded(), try gmapApi. See README.md for more info

On Wed, 29 Aug 2018, 19:14 pawelpanek81, notifications@github.com wrote:

Hello, i want to use new google.maps.places.Autocomplete(...) in my Vue component, so I should wait until the library is loaded because of "ReferenceError: google is not defined". I found solution here: https://github.com/xkjyeah/vue-google-maps/wiki/vue-google-maps-FAQ but, when i put loaded.then(() => { alert(1); }); there is a error in my console:

[Vue warn]: Error in mounted hook: "TypeError: WEBPACK_IMPORTED_MODULE_0_vue2_google_maps.loaded is undefined" TypeError: "WEBPACK_IMPORTED_MODULE_0_vue2_google_maps.loaded is undefined"

how can I wait until google is loaded?

here is my Vue component:

Of course I added in my main.js

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

and

Vue.use(VueGoogleMaps, { load: { key: 'bla_bla_bla', libraries: 'places', }, });

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/475, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR4UEZf7HvBG3kuc2iMCyZ8m3-bw0ks5uVneLgaJpZM4WRVHI .

[pawelpanek81]

Sorry, but it won't work with gmapApi.

import {gmapApi} from 'vue2-google-maps'

export default {
  computed: {
    google: gmapApi
  },
  mounted() {
    alert(google);
  }
}

prints undefined. The only workaround to wait until google is loaded, is mentioned here: https://github.com/xkjyeah/vue-google-maps/issues/450#issuecomment-416284592

but we must write <gmap-map :center="{lat: NaN, lng: NaN}" :zoom="null" ref="gmap"></gmap-map> which is stupid... What is more, if we dont specify center and zoom we'll got error.

[xkjyeah]

Hmmm yorue right.

It's not documented yet, but try this:

Vue.$gmapApiPromiseLazy().then(() => console.log(Google))

On Wed, 29 Aug 2018, 20:14 pawelpanek81, notifications@github.com wrote:

Sorry, but it won't work with gmapApi.

import {gmapApi} from 'vue2-google-maps'

export default { computed: { google: gmapApi }, mounted() { alert(google); } }

prints undefined. The only workaround to wait until google is loaded, is mentioned here: #450 (comment) https://github.com/xkjyeah/vue-google-maps/issues/450#issuecomment-416284592

but we must write <gmap-map :center="{lat: NaN, lng: NaN}" :zoom="null" ref="gmap"> which is stupid... What is more, if we dont specify center and zoom we'll got error.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/475#issuecomment-416930787, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR0HH74rKn516O4vL561gtEW-7vKwks5uVoWhgaJpZM4WRVHI .

[pawelpanek81]

Thanks it works also, and it's better because we don't have to use <gmap-map...></gmap-map>. We can also use this instead of using Vue and import Vue from 'vue'; So the solution is to use:

this.$gmapApiPromiseLazy().then(() => {
   // your code here
}

I think it should be documented, because I spent a lot of time searching information about this problem. Anyway thanks for your fast answers and help :smiley:

[xkjyeah]

Feel free to edit the Wiki!

On Wed, 29 Aug 2018, 20:32 pawelpanek81, notifications@github.com wrote:

Thanks it works also, and it's better because we don't have to use

. We can also use this instead of using Vue and import Vue from 'vue'; So the solution is to use: this.$gmapApiPromiseLazy().then(() => { // your code here } I think it should be documented, because I spent a lot of time searching information about this problem. Anyway thanks for your fast answers and help 😃 — You are receiving this because you commented. Reply to this email directly, view it on GitHub , or mute the thread .