Как сделать модальное окно с картой Яндекс (Гугл)?

artem_wrong

Захожу иногда
78
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

Живу я здесь
3404
428 / 4

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #1 : 03.03.2018, 12:54:00 »

http://fancyapps.com/fancybox/3/ тут как бы уже есть даже пример с Google картой
и для второй версии фансибокса тоже: http://fancyapps.com/fancybox/#examples

Записан

Мой блог по разработке на Joomla CMS!

Skype: aleks.denezh

artem_wrong

Захожу иногда
78
1 / 0

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #2 : 03.03.2018, 13:52:03 »

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

1.PNG (16.95 КБ, 515x208 - просмотрено 49 раз.)

Записан

beliyadm

Легенда
9758
1665 / 66
Севастополь, Россия

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>

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

artem_wrong

Захожу иногда
78
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

Легенда
9758
1665 / 66
Севастополь, Россия

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #5 : 03.03.2018, 15:42:14 »

Этот код я взял из исходного кода страницы с примерами

Цитата: artem_wrong от 03.03.2018, 15:37:07

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

Качаете архив по ссылке третью версию скрипта, там же в документации есть раздел "Quick start" какие скрипты надо вставлять.
Подключать можно по разному, но чтобы не грузить вас лишней информацией (что все js скрипты должны подключаться перед закрытием BODY) вставить в HEAD индекса шаблона, главное - чтобы скрипт jquery подключался выше.

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

artem_wrong

Захожу иногда
78
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

Захожу иногда
78
1 / 0

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #7 : 03.03.2018, 16:14:01 »

Вот еще вопрос - на некоторых страницах идет затемнение фона, а на некоторых - нет. Т.е. модальное окно открывается всегда, но на половине страниц просто фон не затемняется. В чем может быть причина?

main.jpg (512.64 КБ, 1279x709 - просмотрено 75 раз.)

notmain.jpg (350.56 КБ, 1273x651 - просмотрено 42 раз.)

Записан

beliyadm

Легенда
9758
1665 / 66
Севастополь, Россия

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #8 : 03.03.2018, 16:14:54 »

Цитата: artem_wrong от 03.03.2018, 16:14:01

Вот еще вопрос - на некоторых страницах идет затемнение фона, а на некоторых - нет. Т.е. модальное окно открывается всегда, но на половине страниц просто фон не затемняется. В чем может быть причина?

Конфликт стилей скорей всего, надо смотреть конкретно.

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

artem_wrong

Захожу иногда
78
1 / 0

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #9 : 03.03.2018, 16:21:10 »

при бегдом осмотре - не затемняется на Главной, в разделе VirtueMart - Категории, а также всех подкатегориях VM и в карточках товара. В остальных местах все работает норм. то может быть конфликт стилей с VM?

Записан

beliyadm

Легенда
9758
1665 / 66
Севастополь, Россия

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #10 : 03.03.2018, 16:22:34 »

Если бы дали ссылку на сам сайт и на страницы где не затемняется (и где элемент вызывающий карту) - может быть будет понятнее

к сожалению экстрасенсорика у меня страдает

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

artem_wrong

Захожу иногда
78
1 / 0

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #11 : 03.03.2018, 16:29:19 »

эээ... а имеется у вас опенсервер или какой денвер? ибо пока он только на локалке, пилю я его. я бы скинул сайт (все папки) и базу данных. Или может скажите, какие файлы отправить? типа template.css или еще чего)

Записан

beliyadm

Легенда
9758
1665 / 66
Севастополь, Россия

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #12 : 03.03.2018, 16:38:06 »

у меня то есть все, но прошу простить, нет желания разворачивать целый проект, качать\подключать ради такой мелочи.
Так что если не получится самостоятельно - сделайте в сети тестовую площадку и посмотрим

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

artem_wrong

Захожу иногда
78
1 / 0

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #13 : 03.03.2018, 16:46:16 »

элемент называется fancybox-bg, почему-то на определенных страницах стили ему приказывают быть размером 20х20.. буду разбираться

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

1.jpg (564.09 КБ, 1279x799 - просмотрено 22 раз.)

2.jpg (262.98 КБ, 1279x351 - просмотрено 19 раз.)

Записан

draff

Гуру
5801
434 / 7
ищу работу

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #14 : 03.03.2018, 16:51:31 »

Цитата: artem_wrong от 03.03.2018, 16:21:10

может быть конфликт стилей с VM?

Удалите подключение jquery в шаблоне для компонента Вирт.У него свой, потому конфликт яваскриптов, при подключении нескольких jquery.

Записан

Удалю вирус с сайта. Обновление Joomla!, JoomShopping, Virtuemart Интеграция Retailcrm | Отзывы

artem_wrong

Захожу иногда
78
1 / 0

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #15 : 03.03.2018, 17:35:16 »

Теперь другая беда - если вбивать ссылку вида href="https://www.google.lv/maps/place/Googleplex/@37.42... то на карте не пишется нужный адрес, а только карта этого места. Только в <iframe> можно добиться надписи на карте. Подскажите, как iframe засунуть в модальное окно?

3.jpg (376.96 КБ, 1198x575 - просмотрено 18 раз.)

Записан

beliyadm

Легенда
9758
1665 / 66
Севастополь, Россия

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #16 : 03.03.2018, 17:37:59 »

Снова открываем http://fancyapps.com/fancybox/3/ и смотрим раздел Showcase - там описаны варианты и ифрейма и инлайна и другого типа контента

Не владеете инглишем - запихните текст или всю страницу в https://translate.google.com и будет счастье

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

artem_wrong

Захожу иногда
78
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

Легенда
9758
1665 / 66
Севастополь, Россия

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #18 : 03.03.2018, 18:53:14 »

Ну видимо то, что изначально скрипт фанки заточен под Google карты (определять тип ссылки) и про Яндекс он знать не знает.
Можно код Яндекс карты завернуть в скрытый div и показывать в Lightbox как инлайн контент

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

Aleks.Denezh

Живу я здесь
3404
428 / 4

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #19 : 03.03.2018, 18:54:55 »

потому что в ссылку надо вставлять не то что вы скопировали в строке адреса, а то что даётся если поделиться картой!
то есть вот это

Цитировать

https://yandex.by/map-widget/v1/-/CBegIRsyHD

Записан

Мой блог по разработке на Joomla CMS!

Skype: aleks.denezh

beliyadm

Легенда
9758
1665 / 66
Севастополь, Россия

Re: Как сделать модальное окно с картой Яндекс (Гугл)?

« Ответ #20 : 03.03.2018, 19:12:28 »

Цитата: Aleks.Denezh от 03.03.2018, 18:54:55

потому что в ссылку надо вставлять не то что вы скопировали в строке адреса, а то что даётся если поделиться картой!
то есть вот это

я не проверял, фанки действительно умеет работать с Яндекс картами так же как с гуглом по умолчанию без всяких параметров просто по URL определять?

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

artem_wrong

Захожу иногда
78
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

Захожу иногда
78
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 даже приятнее выглядит: можно поставить свою метку с названием, и адрес пишется. У Яндекс - лишь метка стоит в нужном месте. Но уже гуд, что все пашет.

янд.jpg (480.15 КБ, 1279x667 - просмотрено 30 раз.)

гуг.jpg (269.69 КБ, 1279x670 - просмотрено 26 раз.)

Записан

shortcodes ultimate - не вставляет документы из гугл-докс Автор Квинта	Ответов: 2 Просмотров: 1174	21.09.2022, 14:36:48 от Bobbi86
Не вставляется документ из гугл-iframe Автор Квинта	Ответов: 2 Просмотров: 908	02.08.2022, 08:07:47 от Квинта
Как сделать кликабельный телефон на сайте Автор kit_andrei	Ответов: 6 Просмотров: 5868	02.07.2022, 10:13:46 от marksetter
Как сделать ссылку на личный кабинет пользователя VirtueMart в Joomla 3? Автор Stayer1986	Ответов: 4 Просмотров: 1098	09.03.2022, 19:44:37 от Stayer1986
SEO плагины для Яндекс Автор Ася К.	Ответов: 8 Просмотров: 1137	16.02.2022, 12:21:28 от draff

Новый способ добавления и рендера полей в Joomla Form - метод renderControlFields() (Joomla 5.3+)

Joomla: как тестировать? Всего 8 минут

JoomGallery 4.1.0 - компонент галереи изображений для Joomla

v.4.1.0. Что нового?

Похожие темы