Closed ItsJamesMurray closed 4 years ago
StackOverflow coming in clutch here. Solution
Looks like the mixins are on the Vue instance. So the solution is to:
import Vue from 'vue'
// snip...
Vue.$gmapApiPromiseLazy().then(() => {
let service = new google.maps.places....
})
In short... use Vue.$gmapApiPromiseLazy()
rather than this.$gmapApiPromiseLazy()
.
Context: I am trying to get place data via the place_id on the
beforeEnter()
route guard. Essentially, I want the data to load when someone enters the url exactlywww.example.com/place/{place_id}
. Currently, everything works directly when I use my autocomplete input and then enter the route but it does not work when I directly access the url from a fresh tab. I believe the issue is becausegoogle
has not been created yet.Question: How can I access
PlacesService()
using thebeforeEnter()
route guard ?Error:
Uncaught (in promise) ReferenceError: google is not defined
Example Code: In one of my store modules:
In my store.js:
in my router:
What I've tried:
new google.maps.places.PlacesService
tonew window.new google.maps.places.PlacesService
beforeRouteEnter()
rather thanbeforeEnter()
as the navigation guardgoogle.maps...
togmapApi.google.maps...
andgmapApi.maps...
EDIT: I've also tried the
this.$gmapApiPromiseLazy()
proposed in the wiki here