Google Map внутри сайдинга - серые квадраты - PullRequest
1 голос
/ 05 ноября 2011

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

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

Вот эффект, который я пытаюсь воссоздать - 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 Ответ

0 голосов
/ 05 ноября 2011

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...