Google map comes partially, grey area comes instea

Question

Sometimes google map comes partially with other area getting grayed out. There is one catch, if we start Firebug, images do come in that gray area. Dont know why this is happening. Anybody ever experienced this and found solution, Please share.

Answer 1

I had this issue pop up while working on other parts of my site so I didn't notice it right when it started. After going through every change I had made over the last hour, I came across the culprit:

div
{
    [... other css ...]
    overflow: auto;
}

in my css. I removed that and voila, it works. (Of course, I could just change the overflow attribute on my map div but I only need overflow: auto on a couple divs.) I'm sure there's a good reason why but I'm pretty new at this so I don't know. Anyways I hope this can help someone.

Answer 2

this style solved my problem

#map_canvas img { max-width: none !important; }

This forces the browser to allow the map to be as wide as it needs to be - the !important essentially means "do not overwrite this style".

Answer 3

The above solutions nothing works for me.

I have used display:none for my map, By changing it to visibility:hidden it works fine for me.

Change

display:none

To

visibility:hidden

Answer 4

This bug can occur if you are resizing the map's DIV. After resizing, try to call gmap.checkResize() function.

Answer 5

Hi if you are using toggle in a div with a map container you call resizeMap in the function

associated with the trigger:
        $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
         resizeMap();
        return false;

then resizeMap(); like this

function resizeMap()
{
google.maps.event.trigger(map,'resize');
map.setZoom( map.getZoom() );
}

don't forget to set map variable as global ;) cheers

Answer 6

I solved it this way, my problem was in the rotation device, this solution works great:

$scope.orientation = function(){
            var supportsOrientationChange = "onorientationchange" in window,
                orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
            window.addEventListener(orientationEvent, function() {
                $interval(function(){
                    google.maps.event.trigger(map, 'resize');
                },100);
            });
        };
$scope.orientation();