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

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

---

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

---

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

---

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

---

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>

---

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.

---

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

---

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

---

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

---

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.