Карта Google внутри панели сайдинга - серые квадраты

#jquery #google-maps

#jquery #google-карты

Вопрос:

спасибо, что нашли время проверить мой вопрос.

Вот оно — я видел реализацию Карт Google, которую я пытаюсь воспроизвести на клиентском сайте, но у меня возникли трудности.

Вот эффект, который я пытаюсь воссоздать —http://www.franckmaurin.com /. Когда вы нажимаете «Войти в контакт», карта Google расширяется с верхней части страницы, перемещая содержимое вниз.

Итак, вот как я пытаюсь это сделать —

 <body>
<div id="map-container">
<div id="map_canvas"></div>
</div>
<p id="open-map">Open The Map</a>

.. rest of content

</body>

И затем мой CSS

 #map_canvas {
height:350px;
width:100%;
}

#map-container {
height:0px;
}

..и затем JS

 $('.open-map').click(function() {
  $('#map-container').css("height",350);
});

.. очевидно, что это урезанная версия. Я тоже хочу анимировать выпадающий список.. но я продолжаю получать неполную карту, которая выглядит такhttp://d.pr/rNnr. Неполный, с большим количеством серого. Я пробовал разные подходы к открытию и закрытию (включая настройку {height: 350px; display: none} на контейнере, но эта проблема всегда существует. Если я не скрою контейнер карты, проблем с картой не будет.

У кого-нибудь есть идеи, что я мог здесь делать не так?

Ответ №1:

вы должны установить #map-container стиль css,

 #map-container {
  float:left;
  height:350px;
  width:960px;//or other width you need
  display:none;
}

затем используйте jquery для управления #map-container slideUp и slideDown

1. Спасибо! Но я нашел другое решение… Я установил map-container на высоту: 350 пикселей и использовал позицию: абсолютная вершина:-350 пикселей. Итак, в этот момент карта фактически полностью визуализирована, но находится в большом div в верхней части экрана. (Я действительно думаю, что проблема вызвана отображением карты внутри «закрытого» / скрытого div). Затем я также установил для body значение absolute и использовал jquery для переключения анимации <body> на top:350px, чтобы открыть панель, и top: 0px, чтобы закрыть.

2. @К.К. Смит, так ты можешь разобрать больше кода? например, http://jsfiddle.net/ я хотел бы помочь вам больше.