Как установить карту яндекс или google на сайт?

Question

[mUchenik]

Всем привет!
Друзья, скажите, как можно установить карту на сайт, таким образом, что бы активной она становилась только по щелчку мыши?
Я хочу установить две карты, в разделе контакты, но установить хочу на всю ширину страницы. Если просто копировать код, который предлагает Яндекс, то при скролинге, когда дохожу до карты, активным становится только блок карты (активируется зум этой карты) и неудобно листать дальше.
Спасибо.

Answer 1

[Евгений Власов]

Вот рабочий вариант https://jsfiddle.net/skodnik/vs4vg74z/ по мотивам примера Денис Янчевский

Comments

[mUchenik]

Ни чего понять не могу... В примере, который вы показали, всё работает как мне надо! А у меня ни как не хочет работать.

[Евгений Власов]

Дайте ссылку, скажу в чем дело.

[mUchenik]

boulinaw.bget.ru/kontakty Вот ссылка

[Евгений Власов]

mUchenik: Все верно, кроме того, что не определены стили для .front-map-overlay. Точнее они определены, но игнорируются браузерами, т.к. им предшествует ошибка в в style.css в строке 1543 лишняя "}". Ну и нет смысла их указывать дважды.

[Евгений Власов]

mUchenik: С медиа-запросами нужно разобраться. Скобки стоят не верно, нет закрывающих.

Answer 2

[Денис Янчевский]

Привет.

Разместить перед контейнером карты div

<div class="front-map-overlay" onclick="style.pointerEvents='none'" style="pointer-events: none;"></div>

и добавить css-код

.front-map-overlay {
    position: relative;
    height: 400px;
    top: 400px;
    margin-top: -400px;
    z-index: 2;
}

400 — это высота блока с картой.

Comments

[mUchenik]

Быть может я что то не так делаю, но проблема в том, что карта становится неактивной... :(

<div class="front-map-overlay" onclick="style.pointerEvents='none'" style="pointer-events: none;">
<div class="maps"> Офис "

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=uglTJfFO_MOc1lwvdSTy1WXPXEK67lis&amp;width=100%&amp;height=432&amp;lang=ru_RU&amp;sourceType=constructor&amp;scroll=true"></script>
</div>
</div>

Вот так я делал...

[Константин Нагибович]

mUchenik: первый div уберите - он перекрывает карту. Без него все работает.

[Денис Янчевский]

mUchenik: Карта должна становится активной после щелчка по ней.

[Денис Янчевский]

mUchenik: вот здесь можно посмотреть пример реализации demo.themeisle.com/zerif-pro . Внизу страницы есть карта, работающая аналогичным образом.

[mUchenik]

ни чего не срабатывает... :( Редактирую тему Zerif Lite пока что не выходит...

[mUchenik]

Карта вызывается скриптом

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=uglTJfFO_MOc1lwvdSTy1WXPXEK67lis&amp;width=100%&amp;height=328&amp;lang=ru_RU&amp;sourceType=constructor&amp;scroll=true"></script>

Answer 3

[Олег]

<!-- Карта -->
<div id="map"></div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script>
ymaps.ready(function () {

   var myMap = new ymaps.Map('map', {...});

       myMap.behaviors.disable('scrollZoom'); // отключаем скролл

});
</script>

Answer 4

[barashkANY]

Все на самом деле просто.
1) Сделайте ЯндексКарту по инструкции
2) В полученной коде строку "scroll=true" замените на "scroll=false".