Question

我搜索了很多来解决这个问题，但我无法解决这个问题。地图显示灰色，见图： google map

我测试了这个事件触发器：

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

并且风格

div {
    overflow: hidden;
}

但是，再次没有用！这是初始化谷歌地图的代码：

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

加载库：

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

在此页面中我的另一个谷歌地图也可以使用。

Answer 1

通常，灰色地图是由错误的Google Maps API或已弃用的函数调用引起的。

然而，它也可能是API KEY。确保你有一个有效的。

Answer 2

这一点var myLatlng = new google.maps.LatLng(90, 90);位于北极。那里的瓷砖是灰色的。

fiddle with your code

如果我将地图选项更改为更合理的位置（在美国有非灰色瓷砖）：

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

我不再得到＆＃34;灰色＆＃34;地图：working fiddle

工作代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

谷歌地图显示灰色框而不是地图

2 个答案: