Сделать так, чтобы карта Google занимала длинные страницы

0

У меня очень длинная веб-страница, то есть пользователю нужно прокрутить страницу вниз, чтобы увидеть всю информацию, которая там есть.

Я использую карты Google в качестве фона для страницы. Однако карта Google заполняет только первую страницу веб-сайта. Как только я прокручу вниз, карты больше нет, и она заполняет только 100% первоначального вида.

Я наткнулся на этот ответ, который говорит о том, что карта Google не знает 100% того, что нужно охватить, поэтому нужно явно указать высоту: 100% в теле, так что, когда высота: 100% упоминается в div, содержащем карты Google, он знает, что он должен охватывать весь веб-сайт.

Я пробовал вышеупомянутое решение, но оно не решает мою проблему. Как получить карты Google для просмотра очень длинной веб-страницы?

Базовая настройка выглядит так:

<body>
<div id="main-content">  <!--The main data is held here. This is the forefround-->
        This in turn contains several divs and the main information
</div>
<div id="map-canvas">

</div>
</body>

Css выглядит следующим образом:

#map-canvas {
  width: 100%;
  height: 100%;
  position: absolute; /*changing this to fixed makes the map dissapear*/
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  z-index: 0;
}

#main-content {
  z-index: 100;
  position: relative;
}

html, p, body {
    margin: 0;
    padding: 0;
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;                
    height: 100%;
}

Как было предложено в одном из ответов, было бы неплохо, если фон карты остается постоянным, а остальная часть страницы прокручивается.

  • 1
    Можете ли вы опубликовать ссылку на пример или показать свой код? Не видя ваших настроек, довольно сложно помочь.
  • 0
    Да, мы можем увидеть код, пожалуйста.
Показать ещё 1 комментарий
Теги:
google-maps
google-maps-api-3

1 ответ

0
Лучший ответ

Как установить фиксированную позицию на карте-контейнере.
Я наткнулся на эту скрипту в Интернете:

http://jsfiddle.net/X5r8r/927/

#map-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

Он привяжет карту к странице на размер окна.
Любой другой контент может оставаться прокручиваемым.

Поделиться
  • 0
    Я использовал положение: абсолют. Изменение на фиксированное останавливает отображение карты. Но мне нравится ваше решение. Было бы хорошо, если бы карта оставалась фиксированной, в то время как другой контент можно прокручивать.
  • 0
    Ну, если вы хотите использовать его в качестве фона, то это, мне кажется, самое логичное решение. Если карта больше не отображается, проверьте ширину / высоту и Z-индекс. Это должно определенно появиться.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню