Google maps has grey section

Question

I am working on a web application using PHP Laravel framework, javascript and jQuery.

I am working on the integration with google maps API via Javascript but I have strange behavior as shown in the picture

I don't know why I have the grey section in this strange way

here is my js code

 var map = new google.maps.Map(document.getElementById('my_map'), {
 center: {lat: -34.397, lng: 150.644},
 scrollwheel: false,
 zoom: 8
});

Any help will be appreciated , Thanks in advance

Answer 1

check on of the following solutions:

• check the position of map container ;
• increase z-index of map container;
• try to clear browser cache press CTRl+Shift+Delete if you are using Chrome
• try it on another browser

Answer 2

It was a caching problem, After I revert to the basic sample mentioned above I'd have to clear cache and it now working perfectly