Google maps API UI showing but contents are not loading; no error thrown, using VUE and API Key is u-CodePudding

I am currently using Vue and Vue2-google-maps. When my webpage is loaded, the UI for Google Map shows up (Zoom buttom, full screen) and when I try to drag the map around the console shows that I am recieving information from Google's API. However, the actual map itself is blank and nothing is showing.

<GmapMap :center="{lat:10, lng:10}" :zoom="12" map-type-id="terrain" style="width:750px; height:750px" ></GmapMap>

Under my main.js of Vue, I have declared my API key and use GoogleMaps accordingly.

Vue.use(VueGoogleMaps, {
  load:{
    key:'REDACTED',
  }
});

I have ensured that my height and width are set to PX values, tried shaking the browser etc. I followed a separate tutorial that does not use Vue but those include a <script> tag inside the document html, which I am unable to do in Vue template as they are ignored. The console also does not show any errors at all.

I will appreciate any help! Thank you.

CodePudding user response：

I found the solution. I had a CSS style for background color for all and that was overriding everything that Google Maps displayed. This style was in the app.vue parent component and I was troubleshooting in a child component hence I was unable to find the issue. Removing this <style> made everything work as normal again.

<style> 
*{
 background-color: aliceblue;
}
</style>