Карта Google генерируется неправильно

Question

У меня есть программа, которая берет почтовый индекс и делает карту Google. div, что карта установлена ​​на hidden, пока карта не будет создана. Как только карта составлена, div устанавливается на display : block. Проблема в том, что при первом создании карты (и только в первый раз) она выглядит так:

Когда я снова нажимаю кнопку «Найти магазин», она выглядит следующим образом:

Я уже пытался сделать первоначальный вызов метода карты (который я скрывал до тех пор, пока не был сделан настоящий вызов), но это не решает проблему. Я не хочу показывать весь свой код (их много), но вот как я делаю карту.

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

Также обратите внимание, что оба изображения ниже имеют правильные маркеры в правильном месте.

Есть предложения?

Answer 1

это общая проблема.вам нужно вызвать перерисовку карты после смены контейнера.в большинстве случаев это вызвано тем, что показ / скрытие div.

в v3 это:

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

в v2 это:

map.checkResize()

Answer 2

Я подозреваю, что при первом нажатии кнопки «Найти магазин» может возникнуть ошибка, которая может помешать правильному выполнению кода создания карты.

Answer 3

Похоже, что когда вы инициализируете карту, она будет полностью уменьшена, что выдает одну плитку размером 250x250, которую использует Google.