Sometimes I am getting this error ,,Error in data(): "ReferenceError: google is not defined"

[hjujah]

This is happening more or less on every second load. I guess the problem is occurring because the script is being executed before the google maps api is loaded, but I don't know how to sort this out... Any ideas? See the code bellow...

Thanks!

Here is my code from the main:

// Google Maps
import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'
Vue.use(VueGoogleMaps, {
   load: {
      apiKey: 'AIzaSyDmDuqAPNfa6XEbRVNuaZGhRS6JzGmAmek',
      libraries: ['places'],
   },
})

And the component:

<template>
<googlemaps-map :center.sync="center"
                :zoom.sync="zoom"
                :options="mapOptions"
                @idle="onIdle"
                @click="onMapClick">
   <googlemaps-marker v-for="marker of markers"
                      :key="marker._id"
                      :icon="marker.icon"
                      :position="marker.position"
                      @click="selectMarker(marker._id)" />
</googlemaps-map>

</template>

<script>
import mapStyles from '@/data/mapStyles'

export default {
    name: 'google-map',
    data: () => ({
        mapOptions: {
            minZoom: 5,
            maxZoom: 20,
            draggable: true,
            zoomControl: true,
            scrollwheel: false,
            mapTypeControl: false,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            scaleControl: true,
            streetViewControl: false,
            styles: mapStyles
        },

        zoom: 14,
        center: {
            lat: 50.049598, 
            lng: 14.551283
        },
        markers: [

            {
                position: {
                    lat: 50.049598, 
                    lng: 14.551283
                },
                label: {
                    color: 'black',
                    fontFamily: 'Material Icons',
                    fontSize: '20px',
                    text: 'face',
                    // text: 'Conrad and Shark'
                },
                icon: {
                    url : "/static/logo.png",
                    scaledSize: new google.maps.Size(150, 35)
                }
            }
        ]
    }),

    methods: {
        onIdle()  {},
        onMapClick()  {},
        selectMarker(id)  {
            console.log('marker id', id)
        }
    }
}

</script>

<style scoped="">
.vue-google-map {
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
}
</style>

[redxtech]

If you ever get a fix for this that would be greatly appreciated.

[maxschulmeister]

is there a fix for this? $_mapPromises seems to be empty…