Google map comes partially, grey area comes instead of images from google server

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.

Ambassadress

So what exactly are you doing to cause this behaviour? – Pursuance

Its not consistent, happens only some time. using v2 of the google maps api. does that help... – Ambassadress

As suggested in this comment, putting a size in pixel to the map container should solve this issue. It did for me – Daisey

About this solution: <code>#map_canvas img { max-width: none !important; }</code> which was given previously by one of our colleagues is working and solves tricky issues with printing Dynamic Google Maps on chrome and Firefox. Of course I still got problem with Markers (being partially visible) on Firefox. Anyway, an explanation around this solution, and why does browsers behave in this particular way would be necessary. If anyone does, feel free to write. – Heave

I noticed the error only ocurred in IE. Fortunately I can make users switch to Chrome. – Erminna

Answer 1

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

Mariellamarielle

In V3, checkResize is depreciated. Solutions for V3 can be found at blog.codebusters.pl/en/entry/google-maps-in-hidden-div – Backstay

yay a plug for a site – Hurwit

From the comment: google.maps.event.trigger(<map>, "resize") – Herophilus

Answer 2

UPDATE 27/02/2020
There is no longer any need to trigger the resize event manually.

If you are using v3 try

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

Also take a look at here

Peabody

... and again. Googled google maps api grey space, and got this page. Awesome. In my case, my map object was instantiated inside another object, not globally, so make sure map refers to the correct object! – Exsanguinate

2015 and you're still getting them! – Gloaming

works but I just needed to call map.panTo(new google.maps.LatLng(lat, lng)) to restore the location. Also in angular, both calls should be wrapped in $timeout(function() { //here }); – Butanone

had to include as window.onload = function(){google.maps.event.trigger(map, "resize")} – Deviation

Answer 3

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

Guayaquil

Answer 4

I found a simple solution for the partially loaded google map. Usually it is caused by the onLoad() being called at times when the rest of the page (including your map element) is not completely loaded. This causes partial map load. A simple way around this issue is to change your onLoad body tag action.

The old way:

onload="initialize()"

The new way:

onLoad="setTimeout('initialize()', 2000);"

This waits 2 seconds before the Google Javascript accesses the correct size attributes. Also make sure to clear your browser cache before trying it; sometimes it gets stuck there :)

This is my top Javascript part in case you wondering (exactly as described in Google Documentation but because I am calling the Latitude and Longitude from PHP variables, hence the PHP snippets.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>);
    var marker = new google.maps.Marker({ position:point, map:map })    
}
</script>

Winze

You're a genuis! This should be the top answer. – Andantino

Answer 5

I just wanna add to this discussion that I had this problem with grey stripes aswell, and this wasen't the same issue that I needed to use the gmap.Resize Function but that it was in my css. In my css I had

img { 
max-width:50% 
}

so when I set this in my css file

#map-canvas { 
max-width:none;
}

The problem disappered! I looked all over google but couldn't find this answer.

Lubricate

Answer 6

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".

Heatstroke

Answer 7

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

Irrelative

Answer 8

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();

Gittens

Answer 9

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.

Tatro