I have google map and it is loading if I put it outside the livewire component, but when I want to add it inside the Livewire component then it doesn't load.

The map sample is as below:

<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {
var mapProp= {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{KeyHere}}&callback=myMap"></script>

My question is that how to load the google map if I put it inside the livewire component?

Also, remember that if I do alert ('alert text') inside the myMap function in livewire component then it don't work and if I put alert outside myMap function in livewire component then it works.