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.

Solution 1

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

Solution 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

Solution 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

Solution 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>

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

View more solutions