My application features a map, but upon loading the app, the map appears like this:
https://i.sstatic.net/MnQK7.png
The application is created using Vuejs and Laravel. The map is loaded as a vue component inside another component with the following code:
<template>
<div class="google-map">
<div :id="mapName" style="height: 100%"></div>
</div>
</template>
<style scoped>
.google-map {
width: 100%;
height: 500px;
margin: 0;
padding: 0;
background: gray;
}
/*body, html #map-canvas {
height: 100%;
width: 100%;
}*/
</style>
<script>
export default {
name: 'google-map',
props: ['name'],
data() {
return {
mapName: this.name + "-map",
}
},
mounted() {
this.initMap();
},
methods: {
initMap() {
const element = document.getElementById(this.mapName);
const options = {
zoom: 14,
center: new google.maps.LatLng(51.501527,-0.1921837)
};
var map = new google.maps.Map(element, options);
}
}
}
</script>
To load the map in the component, I use this code:
<google-map name="example"></google-map>
I have experimented with various solutions to ensure that the map loads correctly without necessitating browser window resizing. Could you provide a solution for this issue?