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.

Its not consistent, happens only some time. using v2 of the google maps api. does that help... — Vishwanath, Oct 01 '10 at 12:12
As suggested in [this comment](http://stackoverflow.com/a/9246072/877353), putting a size in pixel to the map container should solve this issue. It did for me — Alexandre Bourlier, Aug 20 '15 at 12:41
About this solution: #map_canvas img { max-width: none !important; } 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. — Morteza Ghelichkhani, Nov 28 '16 at 13:59
I noticed the error only ocurred in IE. Fortunately I can make users switch to Chrome. — RonaldPaguay, Sep 15 '17 at 00:09

Argiropoulos Stavros · Answer 1 · 2020-02-27T07:37:08.213

82

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

edited Feb 27 '20 at 07:37

answered Oct 02 '10 at 13:46

Argiropoulos Stavros

9,436
11
61
79

... 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! – Julian H. Lam Dec 09 '11 at 15:30
2015 and you're still getting them! – Tom Mar 19 '15 at 05:15
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 }); – parliament Aug 25 '15 at 02:18
had to include as `window.onload = function(){google.maps.event.trigger(map, "resize")}` – openwonk Jun 21 '17 at 03:47

score 36 · Accepted Answer · edited Jul 06 '11 at 23:51

36

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

edited Jul 06 '11 at 23:51

Emre Yazici

10,136
6
48
55

answered Oct 11 '10 at 14:50

Hitman_99

2,252
2
19
21

14

In V3, checkResize is depreciated. Solutions for V3 can be found at http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div – wooncherk Feb 18 '13 at 07:06
1

yay a plug for a site – Josh Usre May 22 '17 at 13:49
From the comment: `google.maps.event.trigger(``, "resize")` – Ujjwal Singh Dec 20 '17 at 13:48

score 7 · Answer 3 · edited May 23 '16 at 21:41

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>

You're a genuis! This should be the top answer. – Lan Dec 25 '15 at 01:25 — Lan, Dec 25 '15 at 01:25

score 7 · Answer 4 · answered Jul 06 '11 at 13:07

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

score 4 · Answer 5 · answered Aug 01 '14 at 18:37

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.

score 2 · Answer 6 · edited Oct 20 '15 at 13:47

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

edited Oct 20 '15 at 13:47

Barrie Reader

10,647
11
71
139

answered Oct 20 '15 at 08:18

Ahmad Alaa

767
9
30

score 2 · Answer 7 · answered Jul 03 '18 at 08:10

2

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

answered Jul 03 '18 at 08:10

Muthu17

1,481
12
20

Kike Jimenez · Answer 8 · 2016-01-15T12:03:51.890

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

hiqwertyhi · Answer 9 · 2017-04-27T02:13:39.717

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.

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

9 Answers9

Linked