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!

Answer 2

The usual reason why this is happening is that the size of the map is changed after the map has been initialized. If you for some reason change the size of the div with id="map" you need to trigger the "resize" event

google.maps.event.trigger(map, 'resize');

You could just try to trigger the event in your javascript console and see if it helps.

Please note that this answer is a guess since there is not really anything in the question to work with, so please let me know if it does not help.

Answer 3

This worked for me:

 var center = map.getCenter();
 // . . . your code for changing the size of the map
 google.maps.event.trigger(map, "resize");
 map.setCenter(center);

taken from the link, that @Bruno mentioned

Answer 4

Put google.maps.event.trigger(map, "resize"); in a setTimeout function so that it fires AFTER the event is triggered.