Яндекс карта

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

ram333
ram333
Репутация: 0
Сообщения: 7
Зарегистрирован: 08.09.2019
С нами: 4 года 6 месяцев

Сообщение #1 ram333 » 14.06.2021, 11:11

Как вставить карту (несколько карт) на страницу контакты например?
Код вырезается системой.

Aleks
Aleks
Репутация: 56
Сообщения: 382
Зарегистрирован: 24.05.2021
С нами: 2 года 10 месяцев

Сообщение #2 Aleks » 14.06.2021, 15:11

Идем в design\okay_shop\html.
Ищем файл feedback.tpl.
Внизу файла есть {* Map *}
Приводим его к такому виду:
{if $settings->iframe_map_code}
<div class="block block--boxed block--border">
Здесь код карты Яндекса: <iframe src="https://yandex.ru.......</frame>
</div>
{if}
Ставил на локальном сервере, работает.

ram333
ram333
Репутация: 0
Сообщения: 7
Зарегистрирован: 08.09.2019
С нами: 4 года 6 месяцев

Сообщение #3 ram333 » 15.06.2021, 13:37

Спасибо. Примерно так и думал.
Но хочется в страницу карту вставить, точнее карты.
На старом сайте в контактах карты с описанием и их несколько.
Как код в страницу вставить?

Aleks
Aleks
Репутация: 56
Сообщения: 382
Зарегистрирован: 24.05.2021
С нами: 2 года 10 месяцев

Сообщение #4 Aleks » 15.06.2021, 20:13

<div class="block block--boxed block--border">
Здесь код карты Яндекса: <iframe src="https://yandex.ru.......</frame>
</div>
<div class="block block--boxed block--border">
Здесь код карты Яндекса: <iframe src="https://yandex.ru.......</frame>
</div>
<div class="block block--boxed block--border">
Здесь код карты Яндекса: <iframe src="https://yandex.ru.......</frame>
</div>
Так я не вставлял, нет нужды. Попробуйте, только явно разные карты вставляйте.
Это в Контакты, видимо, сработает.
На какую именно другую страницу вы хотите вставить карту?

ram333
ram333
Репутация: 0
Сообщения: 7
Зарегистрирован: 08.09.2019
С нами: 4 года 6 месяцев

Сообщение #5 ram333 » 18.06.2021, 20:42

Aleks писал(а):<div class="block block--boxed block--border">
Здесь код карты Яндекса: <iframe src="https://yandex.ru.......</frame>
</div>
не работает..

Aleks
Aleks
Репутация: 56
Сообщения: 382
Зарегистрирован: 24.05.2021
С нами: 2 года 10 месяцев

Сообщение #6 Aleks » 19.06.2021, 22:01

Прилагаю код из файла feedback.tpl и скрин. Сделано на локальном сервере Open Server.
На скрине 2 карты. Ставил 3 карты- работает. Попробуйте заменить файл feedback.tpl
{* Map *}
{if $settings->iframe_map_code}
<div class="block block--boxed block--border">
<iframe src="https://yandex.ru/map-widget.......</iframe>
</div>
<div class="block block--boxed block--border">
<iframe src="https://yandex.ru/map-widget.......</iframe>
</div>
{/if}

Dysha-Kuzbass M
Аватара
Dysha-Kuzbass M
Возраст: 37
Репутация: 3
Сообщения: 155
Зарегистрирован: 17.05.2017
С нами: 6 лет 10 месяцев
Откуда: Кузбасс
ВКонтакте

Сообщение #7 Dysha-Kuzbass » 20.06.2021, 02:48

Можно сделать красиво! К примеру, вот так!

*.code
Спойлер
<div id="footer-map" >
<div class="container">
<div class="map-content ">
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A718e3aee83e7852c1bc5aa7920a24f3aaea0e0e29b5e0ac971cbfb2d06419e72&amp;width=600&amp;height=450&amp;lang=ru_RU&amp;scroll=true"></script>
<div class="btn-group close-map">
<button type="button" class="btn btn-danger" onclick="toogleMap()"><i class="fa fa-times"></i> Закрыть</button>
</div>
<div class="glass"></div>
</div>
<div class="map-toogle" data-toggle="tooltip" data-trigger="hover" title="Развернуть схему проезда">
<a id="mapToogle" onclick="toogleMap();">
<span class="fa fa-map-marker" aria-hidden="true" style="padding:10px;"></span>
</a>
</div>
</div>
</div>

<script>
function toogleMap() {
if ($('body').hasClass('map-open')) {
$('body').removeClass('map-open');
$('#footer-map .map-content').height(100);
} else {
$('body').addClass('map-open');
$('#footer-map .map-content').height($(window).innerHeight() + 15);
$('html, body').animate({ scrollTop: $('#footer-map').offset().top}, 250);
}
}
</script>

*.css
Спойлер
/*Карта в футуре*/
#footer-map {
background: #fff /* url('../images/bg.png') 50% 50px no-repeat */;
background-attachment: fixed;
position: relative;
}

#footer-map .close-map{
position: absolute;
top: 47px;
right: 10px;
display: none;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
#footer-map .close-map button{

}
#footer-map .close-map .btn-contacts{
width: 200px;
}

#footer-map .map-toogle{
position: absolute;
bottom: -35px;
left: 50%;
margin-left: -22px;
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid #bbb;
padding: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
#footer-map .map-toogle:before{
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #fff;
border-radius: 50%;
z-index:3;
}
#footer-map .map-toogle a{
font-size: 14px;
z-index: 4;
position: relative;
display: block;
border-radius: 50%;
height: 100%;
width: 100%;
background: #d9534f;
color: #fff;
font-size: 14px;
opacity: 1;
line-height: 36px;
text-align: center;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
cursor: pointer;
}

#footer-map .glass,
#footer-map .glass:before,
#footer-map .glass:after{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#footer-map .glass:before{
content: "";
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}
#footer-map .glass:after{
content: "";
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}

#footer-map .map-content{
position: relative;
height: 80px;
overflow: hidden;
opacity: 1;
}

#footer-map .map-content > ymaps{
width: auto!important;
height: 100%!important;
}
#footer-map .ymaps-2-1-29-copyrights-pane{
display: none;
}
#footer-map .ymaps-2-1-29-controls-pane{
opacity: 0;
}

.map-open{
overflow: hidden;
}
.map-open #footer-map .container{
width: 100%;
padding: 0;
}
.map-open #footer-map .close-map{
display: block;
}
.map-open #footer-map .glass{
visibility: hidden;
}
.map-open #footer-map .ymaps-2-1-29-controls-pane{
opacity: 1;
}

#footer-map + .container > .footer-box{
margin-top: 0;
}


Название раздела: Вопросы по работе с OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Вопросы по работе с OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 27 гостей