Grey area in Google maps

Question

I have implemented Google maps in my app (in a modal), however as you can see on the images below there is a grey area that I of course want to get rid of. It is possible to

Answer 1

I've been looking for a solution for a while. I had the exact same problems and I'm not the only one. The line of code above was not enough, but I noticed that resizing my browser manually was fixing the problem. If it solves yours too, then here is how I solve mine:

1) Add this at the end of your function initializing your map. It will add a listener to it and call the function when the map is loaded. It will basically simulate a resize.

google.maps.event.addListenerOnce(map, 'idle', function(){
    $(window).resize();
    map.setCenter(yourCoordinates);
});

I had to recenter the map after resize

2) Create a resize listener, calling the google map resize event like this:

$(window).resize(function() {
    if ($("#map_canvas").children().length > 0){    
        if (map)
        google.maps.event.trigger(map, 'resize');
    }});

I also had to put map outside my initialize function... I know it's not the best solution but it works for now. Don't worry about the resize() call.

It seems like it's related to hidden div containing google map. I also found a similar solution on this website jfyi. Good Luck!