1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 22 Ответов
  • 900 Просмотров
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Как сделать модальное окно с картой Яндекс (Гугл)?
« : 03.03.2018, 11:44:31 »
Здрасьте

Подскажите, в каком месте подключать скрипты JS и jquery?
Имеется такой код (подсмотренный):

HTML
Код
<a class="fancybox-media" href="#map" title="Некоторый заголовок FancyBox">Хочу карту</a>.

<div id="map"></div>

CSS
Код
.fancybox-media {
  display: inline-block;
  margin: 1em;
  padding: 5px 10px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  background: #5A8AB1;
  color: #fff;
}

#map {
  display: none;
  width: 950px;
  height: 600px;
}

JS
Код
$(function() {
  var init = false;

  $('.fancybox-media').fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    beforeLoad: function() {
      if (init) return;
      loadMap(950, 650, 'map');
      init = true;
    },
    helpers: {
      title: {
        type: 'inside',
        position: 'bottom'
      },
      media: {}
    }
  });

  function loadMap(width, height, target) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//api-maps.yandex.ru/services/constructor/1.0/js/?sid=XVr6Wn450cnx--RaZkc_gtiOXSQFMB9O&width=' + width + '&height=' + height + '&lang=ru_RU&sourceType=constructor&id=' + target;
    document.head.appendChild(script);
  }
});

Вот как это выглядит на примере http://jsfiddle.net/PFVxK/2879/

Блок с HTML и стили создать - это не проблема. Но на выходе я получаю просто кнопку, нажимая на которую ничего не происходит. Куда мне вставить этот скрипт? я пробовал ссылку на скрипт вставить и в HEAD, и перед закрывающим BODY, прописав что-то вроде <script src="js/1.js"></script> , где в файле 1.js прописан этот код. Но тишина.
Подскажите кто знает, куда подключать скрипты?
Записан
*

Aleks.Denezh

  • Живу я здесь
  • 3399
  • 422 / 4
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #1 : 03.03.2018, 12:54:00 »
http://fancyapps.com/fancybox/3/ тут как бы уже есть даже пример с Google картой
и для второй версии фансибокса тоже: http://fancyapps.com/fancybox/#examples
Записан
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #2 : 03.03.2018, 13:52:03 »
Да, я видел этот сайт, но думал можно проще реализовать это. Тут вроде окно уже начало открываться, но в нем - ошибка (скрин).
И все же про мой пример - там недостаточно этого кода, надо еще библиотеки какие-то подключать?
Записан
*

beliyadm

  • Легенда
  • 9046
  • 1627 / 64
  • Севастополь == Россия
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #3 : 03.03.2018, 14:50:52 »
Куда уж проще? Aleks.Denezh ссылку дал на документацию, делается одной строкой

Код
<a data-fancybox="" href="https://www.google.lv/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572">Google Map</a>
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #4 : 03.03.2018, 15:37:07 »
Теперь совсем полный тупняк..

beliyadm, тот код, который вы дали, я вообще не вижу в документация, поскольку там был только

Код
<li>
		<a class="various fancybox.iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a>
	</li>

Ок, пусть я мал и глуп и не понимаю очевидных вещей. Но мне и на русском-то с трудом порой понять, а там и вовсе на англ)
Половину дела сделали, я создаю в нужном мне месте страницы следующий блок:
Код
<a data-fancybox="" href="https://www.google.lv/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572">Google Map</a>

Если опустить стили, то в какую часть шаблона (между HEAD, перед закрыв. BODY или где) нужно вставить скрипт и какой? Пока, создав этот блок без скриптов, он просто открывает новую страницу с Г-картой.
Записан
*

beliyadm

  • Легенда
  • 9046
  • 1627 / 64
  • Севастополь == Россия
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #5 : 03.03.2018, 15:42:14 »
Этот код я взял из исходного кода страницы с примерами
Цитата: artem_wrong от 03.03.2018, 15:37:07
Если опустить стили, то в какую часть шаблона (между HEAD, перед закрыв. BODY или где) нужно вставить скрипт и какой?
Качаете архив по ссылке третью версию скрипта, там же в документации есть раздел "Quick start" какие скрипты надо вставлять.
Подключать можно по разному, но чтобы не грузить вас лишней информацией (что все js скрипты должны подключаться перед закрытием BODY) вставить в HEAD индекса шаблона, главное - чтобы скрипт jquery подключался выше.
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #6 : 03.03.2018, 16:05:10 »
Спасибо, все заработало!
Только в общем и целом если - качать этот архив фэнсибокс 3 было совсем необязательно, поскольку HTML можно было взять из второй ссылки (http://fancyapps.com/fancybox/#examples) или из исходного кода, как это сделал beliyadm.
А в квик старте вверху страницы в head надо было добавить следующие строки:
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

только я поменял вторую строчку с третьей, раз уж скрипты превыше всего. Да, это то, что нужно было. Теперь буду причесывать стили и подгонять под мобильную. Еще раз спасибо
Записан
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #7 : 03.03.2018, 16:14:01 »
Вот еще вопрос - на некоторых страницах идет затемнение фона, а на некоторых - нет. Т.е. модальное окно открывается всегда, но на половине страниц просто фон не затемняется. В чем может быть причина?
Записан
*

beliyadm

  • Легенда
  • 9046
  • 1627 / 64
  • Севастополь == Россия
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #8 : 03.03.2018, 16:14:54 »
Цитата: artem_wrong от 03.03.2018, 16:14:01
Вот еще вопрос - на некоторых страницах идет затемнение фона, а на некоторых - нет. Т.е. модальное окно открывается всегда, но на половине страниц просто фон не затемняется. В чем может быть причина?
Конфликт стилей скорей всего, надо смотреть конкретно.
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #9 : 03.03.2018, 16:21:10 »
при бегдом осмотре - не затемняется на Главной, в разделе VirtueMart - Категории, а также всех подкатегориях VM и в карточках товара.  В остальных местах все работает норм. то может быть конфликт стилей с VM?
Записан
*

beliyadm

  • Легенда
  • 9046
  • 1627 / 64
  • Севастополь == Россия
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #10 : 03.03.2018, 16:22:34 »
Если бы дали ссылку на сам сайт и на страницы где не затемняется (и где элемент вызывающий карту) - может быть будет понятнее :) к сожалению экстрасенсорика у меня страдает
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #11 : 03.03.2018, 16:29:19 »
эээ... а имеется у вас опенсервер или какой денвер? ибо пока он только на локалке, пилю я его. я бы скинул сайт (все папки) и базу данных. Или может скажите, какие файлы отправить? типа template.css или еще чего)
Записан
*

beliyadm

  • Легенда
  • 9046
  • 1627 / 64
  • Севастополь == Россия
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #12 : 03.03.2018, 16:38:06 »
у меня то есть все, но прошу простить, нет желания разворачивать целый проект, качать\подключать ради такой мелочи.
Так что если не получится самостоятельно - сделайте в сети тестовую площадку и посмотрим
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #13 : 03.03.2018, 16:46:16 »
элемент называется fancybox-bg, почему-то на определенных страницах стили ему приказывают быть размером 20х20.. буду разбираться

Самое последнее и верное - !important 100% width и height
Записан
*

draff

  • Живу я здесь
  • 4190
  • 283 / 7
  • Ищу работу
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #14 : 03.03.2018, 16:51:31 »
Цитата: artem_wrong от 03.03.2018, 16:21:10
может быть конфликт стилей с VM?
Удалите подключение jquery в шаблоне для компонента Вирт.У него свой, потому конфликт яваскриптов, при подключении нескольких jquery.
Записан
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #15 : 03.03.2018, 17:35:16 »
Теперь другая беда - если вбивать ссылку вида href="https://www.google.lv/maps/place/Googleplex/@37.42... то на карте не пишется нужный адрес, а только карта этого места. Только в <iframe> можно добиться надписи на карте. Подскажите, как iframe засунуть в модальное окно?
Записан
*

beliyadm

  • Легенда
  • 9046
  • 1627 / 64
  • Севастополь == Россия
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #16 : 03.03.2018, 17:37:59 »
Снова открываем http://fancyapps.com/fancybox/3/ и смотрим раздел Showcase - там описаны варианты и ифрейма и инлайна и другого типа контента

Не владеете инглишем - запихните текст или всю страницу в https://translate.google.com и будет счастье
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #17 : 03.03.2018, 18:04:20 »
ок, бог с ним с айфреймом. я вместо ссылки Google вставляю ссылку Яндекс, но при открытии модального окна ответ - The request content cannot be loaded. Please try again later

Подскажите, что не так в коде?

Код
<a data-fancybox="" href="https://yandex.by/maps/157/minsk/?clid=1929744&ll=27.530600%2C53.909351&z=15&mode=search&ol=geo&ouri=ymapsbm1%3A%2F%2Fgeo%3Fll%3D27.531%252C53.909%26spn%3D0.001%252C0.001%26text%3D%25D0%2591%25D0%25B5%25D0%25BB%25D0%25B0%25D1%2580%25D1%2583%25D1%2581%25D1%258C%252C%2520%25D0%259C%25D0%25B8%25D0%25BD%25D1%2581%25D0%25BA%252C%2520%25D1%2583%25D0%25BB%25D0%25B8%25D1%2586%25D0%25B0%2520%25D0%259C%25D0%25B0%25D0%25BA%25D1%2581%25D0%25B8%25D0%25BC%25D0%25B0%2520%25D0%25A2%25D0%25B0%25D0%25BD%25D0%25BA%25D0%25B0%252C%252034%25D0%25BA2%2520">КАРТА</a>
Записан
*

beliyadm

  • Легенда
  • 9046
  • 1627 / 64
  • Севастополь == Россия
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #18 : 03.03.2018, 18:53:14 »
Ну видимо то, что изначально скрипт фанки заточен под Google карты (определять тип ссылки) и про Яндекс он знать не знает.
Можно код Яндекс карты завернуть в скрытый div и показывать в Lightbox как инлайн контент
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

Aleks.Denezh

  • Живу я здесь
  • 3399
  • 422 / 4
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #19 : 03.03.2018, 18:54:55 »
потому что в ссылку надо вставлять не то что вы скопировали в строке адреса, а то что даётся если поделиться картой!
то есть вот это
Цитировать
https://yandex.by/map-widget/v1/-/CBegIRsyHD
Записан
*

beliyadm

  • Легенда
  • 9046
  • 1627 / 64
  • Севастополь == Россия
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #20 : 03.03.2018, 19:12:28 »
Цитата: Aleks.Denezh от 03.03.2018, 18:54:55
потому что в ссылку надо вставлять не то что вы скопировали в строке адреса, а то что даётся если поделиться картой!
то есть вот это
я не проверял, фанки действительно умеет работать с Яндекс картами так же как с гуглом по умолчанию без всяких параметров просто по URL определять?
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #21 : 03.03.2018, 23:00:38 »
Цитата: Aleks.Denezh от 03.03.2018, 18:54:55
потому что в ссылку надо вставлять не то что вы скопировали в строке адреса, а то что даётся если поделиться картой! то есть вот это

увы - The request content cannot be loaded. Please try again later. Подозреваю, что тут и правда дело в том, что заточено все под Google.
Но даже если взять Google - как сделать, чтобы в открывшейся карте писался и адрес также и метка стояла, а не просто карта с примерным местом нахождением?
Записан
*

artem_wrong

  • Захожу иногда
  • 50
  • 1 / 0
Re: Как сделать модальное окно с картой Яндекс (Гугл)?
« Ответ #22 : 03.03.2018, 23:44:45 »
Все, Артем разобрался.
Делать можно через iframe. Надеюсь, это кому-нибудь понадобится:
Создаем html:

Код
<a data-fancybox="iframe" data-src="https://yandex.ru/map-widget/v1/?um=constructor%3A1ff2981c28ea9db865a0bad283427e078c9a558d9bf94319967e81a003eb8eca&amp;source=constructor" data-type="iframe" href="javascript:;">Карта</a>

Ссылка получается из конструктора карт, которая iframe. У Google ищем адрес, далее жмем Поделиться - Код. И там также копируем ссылку на iframe, начиная с http...
У Google даже приятнее выглядит: можно поставить свою метку с названием, и адрес пишется. У Яндекс - лишь метка стоит в нужном месте. Но уже гуд, что все пашет.
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Метки, сделать лого (фото) в списке, каждого материала....

Автор Igor5

 Ответов: 0
Просмотров: 168 		Последний ответ 24.04.2019, 15:24:49
от Igor5
Сделать редактируемым дополнительное поле из таблицы в базе.

Автор Zelyonkin

 Ответов: 0
Просмотров: 107 		Последний ответ 19.03.2019, 13:24:08
от Zelyonkin
Как грамотно сделать выпадающее меню?

Автор YouRock

 Ответов: 2
Просмотров: 185 		Последний ответ 08.03.2019, 13:56:57
от zaspola
Как сделать псеведоним пункта меню и как разрешить пользователям добавлять видео?

Автор YouRock

 Ответов: 6
Просмотров: 217 		Последний ответ 25.02.2019, 13:23:02
от YouRock
Белое окно при сохранении материала

Автор dsafronov

 Ответов: 1
Просмотров: 160 		Последний ответ 10.12.2018, 16:05:53
от NewUsers