Google地图生成错误

Sta*_*hil 3 javascript google-maps

我有一个程序,它接受一个邮政编码并制作一个谷歌地图.在div该地图设置为hidden直到映射而成.制作完地图后,div将设置为display : block.问题是第一次生成地图(并且只是第一次)它看起来像这样: 在此输入图像描述

一旦我再次找到商店按钮,它看起来像这样:

在此输入图像描述

我已经尝试初始调用map方法(我一直隐藏,直到进行真正的调用),但这并不能解决问题.我不想显示我的所有代码(有很多),但这是我如何制作地图.

<div id = "map_canvas" style = " height: 300px; width: 300px;"></div>

//Creates a new center location for the google map
var latlng = new google.maps.LatLng(lat, lng);

//The options for the google map
var mapOptions = {
    zoom: 7,
    maxZoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

//Creates the new map
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Run Code Online (Sandbox Code Playgroud)

另请注意,下面的两个图像都在正确的位置具有正确的标记.

有什么建议?

her*_*ist 6

这是一个常见问题.您需要在更改容器后触发地图重绘.大部分时间这是由显示/隐藏div引起的.

在v3中它是:

google.maps.event.trigger(map, 'resize')
Run Code Online (Sandbox Code Playgroud)

在v2中它是:

map.checkResize()
Run Code Online (Sandbox Code Playgroud)