Google map shows gray box instead map

Question

I searched a lot for solve this issue, but i can't resolve this issue. map show gray, see picture:

I test this event trigger:

google.maps.event.trigger(draw_map, "resize")

and in style

div {
    overflow: hidden;
}

But, again doesn't work! This is initialize code for google map:

var draw_map = '';
var drawingManager;
var selectedShape;
var resc;
var rest;
var resx;
var resy;
jQuery(document).ready(function(){
    initialize_draw_map();
});

function initialize_draw_map() {
    if (draw_map != '')
        return false;
    var myLatlng = new google.maps.LatLng(90, 90);
    var myOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    draw_map = new google.maps.Map(document.getElementById("map_canvas_draw_map"), myOptions);
    var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.30,
        editable: true,
        fillColor: '#1E90FF',
        zIndex: 1
    };
    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT,
            drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE,
                google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE
            ]
        },
        polygonOptions: polyOptions,
        rectangleOptions: polyOptions,
        circleOptions: polyOptions,
        map: draw_map
    });
}

Loading libraries:

http://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,drawing

in this page my another google map work as well.

Answer 1

This point var myLatlng = new google.maps.LatLng(90, 90); is at the North Pole. The tiles there are grey.

fiddle with your code

If I change the map options to a more reasonable place (in the US where there are non-grey tiles):

var myLatlng = new google.maps.LatLng(42, -90);
var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

I no longer get the "grey" map: working fiddle

working code snippet:

var draw_map = '';
var drawingManager;
var selectedShape;
var resc;
var rest;
var resx;
var resy;
jQuery(document).ready(function() {
  initialize_draw_map();
});

function initialize_draw_map() {
  if (draw_map != '')
    return false;
  var myLatlng = new google.maps.LatLng(42, -90);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  draw_map = new google.maps.Map(document.getElementById("map_canvas_draw_map"), myOptions);
  var polyOptions = {
    strokeWeight: 0,
    fillOpacity: 0.30,
    editable: true,
    fillColor: '#1E90FF',
    zIndex: 1
  };
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT,
      drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE,
        google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE
      ]
    },
    polygonOptions: polyOptions,
    rectangleOptions: polyOptions,
    circleOptions: polyOptions,
    map: draw_map
  });
}

html,
body,
#map_canvas_draw_map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places,drawing&ext=.js"></script>
<div id="map_canvas_draw_map" style="border: 2px solid #3872ac;"></div>

Answer 2

Usually a grey map is caused by the wrong Google Maps API or deprecated function calls.

However it could also be the API KEY. Make sure you have a valid one.