1
<div class="sidebar_map_block" id="map"></div>
<button onclick="maxMap()">увеличить</button>

поставил в footer заработал

<script>
var mapWrap = document.getElementById("map");

function maxMap() {
  mapWrap.style.height = '500px';
  // св-во style предоставляет доступ к свойствам стиля элемента
}
</script>

Сейчас появилась другая проблема, яндекс карты не раскрываются по идеи там element style стоит на 100% ширину diva введите описание изображения здесь

вот код самого яндекса

<div id="[[+mapId]]" [[+style]]></div>
<script type="text/javascript">
    ymaps.ready(function(){
        [[+mapId]] = new ymaps.Map("[[+mapId]]", {
            center: [[+map.center]],
            zoom: [[+map.zoom]]
        });
        [[+mapId]].setType("[[+map.type]]");
        var [[+mapId]]Controls = "[[+controls]]".split(',');
        for(var i = 0; i < [[+mapId]]Controls.length; i++){
            [[+mapId]].controls.add([[+mapId]]Controls[i]);
        }
        [[+placemarks]]
        [[+polylines]]
        [[+polygons]]
        [[+routes]]
    });
</script>
1
  • У вас скрипт находится в head-ере, должен находиться либо ниже блока <div class="sidebar_map_block" id="map"></div>, либо используйте функцию window.onload, потому что на момент исполнения строчки var mapWrap = document.getElementById("map"); блока такого еще не существует
    – ThisMan
    Commented 15 апр. 2015 в 10:38

2 ответа 2

1

поставил в head
var mapWrap = document.getElementById("map");

На момент исполнения скрипта элемента ещё нет, поэтому document.getElementById("map") вернёт null. По хорошему, надо бы дождаться загрузки документа, а потом искать элемент. Другой рабочий вариант - поместить этот скрипт после элемента (или вообще в конец body). А я бы искал элемент непосредственно при клике - не вижу смысла держать лишнюю переменную.

9
  • а как быть с элементом который внутри дива? при клике на кнопку увеличивается высота дива, но не элемента у которого стоит 100%
    – reddyk
    Commented 15 апр. 2015 в 11:18
  • @reddyk, ну так его и увеличивать. Или ему height 100% прописать.
    – Qwertiy
    Commented 15 апр. 2015 в 12:38
  • у sidebar_map_block стоит 280px, а у yandex map height:100% и так стоит, если через этот скрипт увеличивать до 500px, то карта всеравно остается с 280px
    – reddyk
    Commented 15 апр. 2015 в 12:41
  • @reddyk, Потому что 100% должно быть внутри.
    – Qwertiy
    Commented 15 апр. 2015 в 12:44
  • не понял? так карта внутри этого дива и принимает 100% значение этого же и дива
    – reddyk
    Commented 15 апр. 2015 в 12:45
0

Какой то шаблонизатор используете?

var mapWrap = document.getElementById(/* тут id блока */);

function maxMap() {
  mapWrap.style.height = '500px';
  // св-во style предоставляет доступ к свойствам стиля элемента
}

Теперь повесьте на клик функцию maxMap

На счет второго вопроса: у ya.map должен быть метод resize, нужно использовать его, потому что автоматически height не изменяется. ( не сильно знаком с api, поэтому точное название метода не скажу )

7
  • это на modx revo, всмысле <div id="maxMap"></div> ?
    – reddyk
    Commented 15 апр. 2015 в 10:12
  • Не совсем, допустим у вас есть кнопка button, тогда что бы на нее повесить обработчик, нужно написать <button onclick="maxMap">
    – ThisMan
    Commented 15 апр. 2015 в 10:17
  • поставил но вроде не работает, изменил сам вопрос
    – reddyk
    Commented 15 апр. 2015 в 10:29
  • @reddyk Забыл, необходимо скобочки поставить, что бы функция выполнилась <button onclick="maxMap()">увеличить</button>
    – ThisMan
    Commented 15 апр. 2015 в 10:30
  • всеравно не хочет, id блока map, а класс другой, может function какой то из них ставить?
    – reddyk
    Commented 15 апр. 2015 в 10:37

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.