Google地图生成错误 [英] Google map generating incorrectly

问题描述

我有一个可以接收邮政编码并制作Google地图的程序.映射被设置为hidden之前的div，直到映射完成.制作地图后，将div设置为display : block.问题在于，第一次(仅第一次)生成地图时，它看起来像这样:

I have a program that takes in a zip code and makes a google map. The div that the map is set tohidden until the map is made. Once the map is made the div is set to display : block. The problem is that the first time the map is generated (and only the first time) it looks like this:

一旦我再次点击查找商店"按钮，它就会看起来像这样:

Once I hit the find a store button again it looks like this:

我已经尝试过对map方法进行初始调用(在进行实际调用之前，该方法一直处于隐藏状态)，但这不能解决问题.我不想显示所有代码(很多)，但这是我制作地图的方式.

I have already tried to make a initial call to the map method (which I kept hidden until a real call is made) but this does not fix the issue. I don't want to show all my code (there is a lot) but here is how I make the 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);

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

Also note that both images below have the correct markers in the correct place.

有什么建议吗?

推荐答案

这是一个常见问题.您需要在更改容器后触发地图重绘.大多数情况下，这是由于显示/隐藏div引起的.

this is a common problem. you need to trigger a map redraw after changing the container. most of the time this is caused by showing/hiding the div.

在v3中是:

google.maps.event.trigger(map, 'resize')

在v2中是:

map.checkResize()

这篇关于Google地图生成错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！