Карта Google, показывающая серые области, когда отображается / скрыта

Question

У меня проблема: у меня есть две карты Google на одной странице, показывающие только одну за раз.Один показывает выбранный пользователем предпочтительный магазин.Если пользователь хочет выбрать другой, WebService предоставляет ближайшие, и с этой информацией я скрываю первую карту (и некоторые связанные элементы), создаю другую карту и показываю ее.

Вот скрипка:

http://jsfiddle.net/Osoascam/ReSsM/2/

У меня есть несколько вопросов:

1. Вызов API Google Карт напрямую (не через google.load), есть лиспособ определить, когда скрипт полностью загрузился, чтобы я не столкнулся с ошибкой «Google не определен»?

2. Это нормально, что я делаю, чтобы иметь две карты?Передача ссылок на var currentMapId, searchMapId?Когда я отправлял ссылку, я думал, что это может сработать ... Это работает, но я думаю, что это глупо.Я не знаю, нормально ли иметь одну ссылку.

3. Попробуйте быстро нажимать кнопки снова и снова, карта смещается и появляется большая серая область.Это не имеет большого значения для скрипки, но это для моего приложения, так как иногда оно остается таким всегда, даже если пользователь перетаскивает карту.На самом деле это мой самый важный вопрос, остальные два касаются только организации и оптимизации кода.Как я могу это исправить?

4. Наконец, я не знаю, мое ли это впечатление, но кажется, что карты загружаются очень медленно, когда вы перетаскиваете их.

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

Заранее спасибо,

Óscar

Answer 1

У меня была та же проблема, что и у вас, мой макет действительно сложный, и у меня также есть несколько карт на странице. Чтобы исправить эту проблему, я изменил z-index

Я завернул одну из карт в контейнер, как этот:

<div style="height:0px;overflow:hidden;z-index:-999;">
<div id="map" style="width: 520px; height: 400px"></div>
</div>

это решило проблему, но я действительно не знаю почему. Я надеюсь, что это помогает! Удачи