Google Maps API v3: Gray Box, no map

Question

As part of a much bigger project, we\'re trying to get a Map on a site using Google\'s Map API v3. I have followed the simplest steps that Google has laid out, I\'ve tried c

Answer 1

In my case, I was working on a map with vue and a modal in the iview library; and during the first render it worked, but any other render displayed the grey screen of death. I fixed the issue by setting a timeout function to display the map after 50 ms to give the modal enough time to render and be visible.

//Time out is crucial for the map to load when opened with vue
setTimeout(() => {
   this.showMap(id);
}, 50);

The above example was an earlier fix and a quick hack, i have realized all you need to do is wait for the next tick, on vue you can achieve this by

async mounted(){
   await this.$nextTick()
   this.showMap(id)
}

or if you are not comfortable with async await you can try the callback option

mounted(){
   Vue.nextTick(function () {
     this.showMap(id)
   })
}