Писать на форуме DIAFAN.CMS могут только зарегистрированные пользователи. Войдите или зарегистрируйтесь.

Форум Сайт на DIAFAN.CMS Вопросы от новичков Как вставить код яндекс карт.


Пётр (blagoff) 920 декабря 2010 г.

Составляю карту, получаю от яндекса код, иду на страничку, жмак HTML, далее вставляю полученный код.. и ничего кроме ссылочки "Создано с помощью инструментов Яндекс.Карт" не появляется. только у меня так?

Марина Дорохина (DIAFAN.CMS) 720 декабря 2010 г.

Сервис Яндекс.Карты предоставляют HTML и JS код. Код можно добавить в исходный код страницы в визуальном редакторе или в шаблон страницы с картой (например, themes/site_yandex_map.php).

Аналогичным образом добавляются любые другие части, не содержащие PHP-код: ролики с YouTube, видеоплееры и пр.

Марина Дорохина (DIAFAN.CMS) 720 декабря 2010 г.

У Вас визуальный редактор в целях безопасности вырезал подключение сторонней библиотеки:
Код
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=..." type="text/javascript"></script>

Включите ее в шаблон страницы. Лучше создать отдельный шаблон для этой страницы, чтобы библиотека не грузилась на других.

Пётр (blagoff) 920 декабря 2010 г.

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

  1. Создаем на яндекс картах желаемое. То есть то, что в итоге хотим видеть на сайте.
  2. Код, который выдал яндекс для удобства можно вставить в любой временный файл
  3. Идем в локальную папку сайта и находим там папку themes
  4. Берем файлик site.php (тот который отвечает за вывод шаблона Вашего сайта) и копируем его в эту же папку, получив что то вроде "копия_site.php"
  5. Переименовываем "копия_site.php" в "site_yandex_map.php", к примеру. Назвать на самом деле можно как угодно, важно чтобы первое слово в названии файла было site.
  6. Открываем файлик в notepad++ или другом доступном редакторе и между тегами head вставляем строчки из того кода что выдал яндекс:

  7. Код
    <script src="http://api-maps.yandex.ru/1.1/?key=ADg8D00BAAAAEK4kagIAcqPdfd1yC9pnApff8g4PqaFyw5AAAAAAAAAAAACPeKzS0lKl-lmk-Ho6JXVE6O7QWQ==&modules=pmap&wizard=constructor" type="text/javascript"></script>

  8. Берем любой FTP менеджер и заливаем на хостинг файлик "site_yandex_map.php" в папку themes
  9. Логинемся в системе управления своим сайтом и открываем страничку, на которую планируется установка карты.
  10. Нажимаем кнопку "дополнительно" и в пункте "дизайн страницы" выбираем наш файл "site_yandex_map.php".
  11. Нажимаем кнопку html в редакторе и туда вставляем полностью код, который предлагает яндекс и нажимаем обновить. Еще раз нажимаем html в редакторе и для собственного удовлетворения удаляем пустые строки в начале
    Код
    <script type="text/javascript"></script>
  12. сохраняем страничку и готово.

Виталий (DIAFAN.CMS) 63420 декабря 2010 г., редакция 15 октября 2012 г.

Немного подправлю пост с учетом актуальности последних версий
Можно так, как пишет Петр. А можно шаги 3-7 пропустить, а вместо шага 9 в "Дополнительно" в поле javascript вписать то, что выдал Яндекс. Затем уже на шаге 10 в HTML источник вставляется оставшийся код, как описано.

Павел (plaha) 1008 февраля 2012 г., редакция 08 февраля 2012 г.

Я думаю ничего страшного не будет если разрешить тег <script> в админском тинимце, ну и в догонку и <style> =)
в config.js, при инициализации добавляем
Код
valid_children : "+body[style],+body[script]"


стили и jquery ui работают точно !

Евгений (mbytez) 2316 октября 2012 г., редакция 16 октября 2012 г.

Кстати, если необходимо вывести на яндекс карте адрес объекта (дом, квартира и т.п), можно сделать следующим способом:
в файле show.view.id.php
Код

echo ' <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ваш ключ"
type="text/javascript"></script><div id="ya_map" style="width:490px;height:400px"></div>
<script type="text/javascript">
var map, geoResult, show;
window.onload = function () {
map = new YMaps.Map(document.getElementById("ya_map"));
map.removeOverlay(geoResult);
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());

Показать весь код
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.ScaleLine());
var geocoder = new YMaps.Geocoder("';
echo $result['param'][0]['value'] . " " . $result['param'][1]['value'];
echo '", {results: 1, boundedBy: map.getBounds()});

YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
if (this.length()) {
geoResult = this.get(0);
map.addOverlay(geoResult);
map.setBounds(geoResult.getBounds());
} else {
alert("Извините, объект на карте не найден")
}

});
}
</script>';


где:
$result['param'][0]['value'] - характеристика, где указана Область (город)
$result['param'][1]['value'] - характеристика выводящая адрес
Предварительно, конечно в админке необходимо создать характеристики к категории выводимых объектов, номера оттуда-же.

Максим (ai1r) 304 октября 2013 г.

Недавно поменялся Яндекс.API. Теперь простенького редактора, описанного Петром нету(по крайней мере пока). Я бы хотел рассказать подробнее как сделать свою карту со своим логотипом вместо стандартной точки и подключить её к diafan.
Итак, начем:
Для начала нам необходимо определить координаты точки.

Для этого
1. Идем на ресурс http://api.yandex.ru/maps/tools/getlonglat/
2. Находим наш адрес на карте
3. В поле центр карты появятся координаты(напр. 37.610805,55.854769)
4. Меняем их местами, чтобы получилось 55.854769, 37.610805 (новые АПИ яндекс карт воспринимают координаты наоборот)
Теперь у нас есть координаты.

Далее пишем скрипт карты:
Код

<script type="text/javascript">
var myMap;
ymaps.ready(init);
function init () {
myMap = new ymaps.Map("your_div_id", //В этой строке your_div_id это ИД которым будет вызываться карта.
{
center: [55.854769, 37.610805], //Говорим, что центр карты будет по координатам 55.854769, 37.610805
zoom: 10, // Маштаб карты, допустимо от 1 до 16
behaviors: ['drag','scrollZoom'], // Добавляем возможно скролить карту колесиком мышки (scrollZoom) и перетаскивать левой кнопкой мыши (drag)

Показать весь код
type: "yandex#hybrid" // Тип покрытия карты: "Гибрид".(Возможные варианты: yandex#satellite (Спутник), yandex#map (Обычная), yandex#publicMap (Народная)
});
myMap.controls
.add("zoomControl", {right: 5, top : 325}) // Кнопка изменения масштаба и ее положение. См css3 -> position: absolute

.add(new ymaps.control.TypeSelector(["yandex#map", //Добавляем выпадающий список типов карты
"yandex#satellite",
"yandex#hybrid",
"yandex#publicMap"])
);

myMap.geoObjects //Тут мы начинаем добавлять точки на карту(можно сколько душе угодно).
.add(new ymaps.Placemark([55.854769, 37.610805], //Добавляем точку с координатами 55.854769, 37.610805
{balloonContent: "Какое-то абстрактное место в Москве"}, //Это будет выводится при клике на точку(можно использовать html теги)
{iconImageHref: 'http://site.ru/img/mapicons/mapicon.png', //Говорим, что точка должна выводится картинкой и подсказываем скрипту где эта картинка находится.
iconImageSize: [45, 45], //Размеры иконки
iconImageOffset: [-30, -30]})) // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки).

.add(new ymaps.Placemark([55.777446, 37.770106], //Вторую точку добавляем по аналогии(если она конечно нужна)
{balloonContent: "Вот те еще одно место в Москве"},
{iconImageHref: 'http://site.ru/img/mapicons/mapicon.png',
iconImageSize: [45, 45],
iconImageOffset: [-30, -30]}))
};
</script>


После этого идем в административную часть сайта, создаем страницу Контакты и наполняем её нужным контентом
и затем нажимааем кнопку "HTML" в визуальном редакторе и пишем туда
Код

<div id="your_div_id" style="width: 600; height: 500px;">&nbps;</div>


Затем идем в "Дополнительные параметры" и в поле JavaScript вставляем следующее:
Код

<script src="//api-maps.yandex.ru/2.0/?load=package.standard,package.traffic&lang=ru-RU" type="text/javascript"></script> //Подключаем яндекс АПИ 2.0


и затем весь наш скрипт карты включая теги <script type="text/javascript">

З.Ы. Не забывайте, что содержимое вышеупомянутого поля JavaScript не выводится если в шаблоне нету <insert name="show_js">

Александр Биг Эпл (ba5) 8304 октября 2013 г.

А не проще через api.yandex.ru/maps/tools/constructor/ ?

Максим (ai1r) 304 октября 2013 г.

Не так гибко! :) Когда нужна кастомная карта нужно писать скрипт!

Евгений (mbytez) 2304 октября 2013 г.

Цитата
Затем идем в "Дополнительные параметры" и в поле JavaScript вставляем следующее:

Это для какой версии инструкция?

Виталий (DIAFAN.CMS) 63405 октября 2013 г.

Для любой пятерки. Сейчас покопаться в архивах не могу, но по-моему, отдельное поле для js мы ввели еще в 4.5

Евгений (mbytez) 2305 октября 2013 г.

Как раз работал в каталоге, и там и искал )) Нашёл в страницах
Цитата
А не проще через api.yandex.ru/maps/tools/constructor/ ?

Иконку свою добавить нельзя, как и ещё одно место на карте.

Александр Биг Эпл (ba5) 8312 октября 2013 г.

У меня почему-то метки не отображаются, в чем проблема?

Александр Биг Эпл (ba5) 8312 октября 2013 г.

и че-то не найду где там ключ прописывается, наверно в этом проблема

Максим (ai1r) 313 октября 2013 г.

Начиная с версии API 2.0 яндекс отменил ключи. Покажите Ваш код сообществу, тогда мы сможем посмотреть что не так.

Denis (Drachoon) 13911 февраля 2014 г.

Скорее всего путь к файлу с иконкой не правильный.
Всё работает отлично взял на заметку и освоил. Очень удобно кстати. Чего и всем советую.
С конструктором быстрее создать, зато вставить как хочется, может стать камнем приткновения. Вообщем не советую пользоваться конструктором.

P.S. Максу бы плюс в карму поставил как разработчику, но увы нет такой фишки пока.

Максим (ai1r) 303 июля 2014 г.

Спасибо, Денис! Приятно! :)

Если у кого есть вопросы по сабжу, с удовольствием отвечу! )

Александр Биг Эпл (ba5) 8303 июля 2014 г.

Я делал через отдельные точки, приписанные у объекта, только там момент, что в этом решении надо менять местами координаты полученные от яндекса.

вот пример: http://www.regmlm.ru/buro_biosea/

Код
<script src="//api-maps.yandex.ru/2.0/?load=package.standard,package.traffic&amp;lang=ru-RU" type="text/javascript"></script>

На примере 2х точек
Код

<script type="text/javascript">// <![CDATA[
var myMap;
ymaps.ready(init);

function init () {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id (map)
var myMap = new ymaps.Map("map", {
// При инициализации карты, обязательно нужно указать

Показать весь код
// ее центр и коэффициент масштабирования
center: [65.106416,92.541517], // Москва
zoom: 3
});

//Добавляем элементы управления
myMap.controls
// Кнопка изменения масштаба
.add("zoomControl")
// Список типов карты
.add("typeSelector")
// Стандартный набор кнопок
.add("mapTools")
//Линейка масштаба
.add(new ymaps.control.ScaleLine())
//Обзорная карта, с заданным типом
.add("searchControl", { left: 120, top: 5 })
;



myMap.behaviors.enable("scrollZoom");

myMap.geoObjects //Тут мы начинаем добавлять точки на карту(можно сколько душе угодно).



.add(new ymaps.Placemark([46.698973,141.866854], //Добавляем точку с координатами 55.854769, 37.610805
{balloonContent: '<a href=http://www.regmlm.ru/>Невельск, Сахалинская область</a><br>Адрес: ул. Железнодорожная<br>www.regmlm.ru'}, //Это будет выводится при клике на точку(можно использовать html теги)
{iconImageHref: 'http://regmlm.ru/maps/yandex.png', //Говорим, что точка должна выводится картинкой и подсказываем скрипту где эта картинка находится.
iconImageSize: [26, 26], //Размеры иконки
iconImageOffset: [-13, -13]})) // Смещение левого верхнего угла иконки относительно её ножки (точки привязки).




.add(new ymaps.Placemark([42.809527,132.873398], //Добавляем точку с координатами 55.854769, 37.610805
{balloonContent: '<a href=http://www.regmlm.ru/>Находка, Приморский край</a><br>Адрес: ул. Ленинская, д.2а, кор. 2, оф. 202<br>www.regmlm.ru'}, //Это будет выводится при клике на точку(можно использовать html теги)
{iconImageHref: 'http://regmlm.ru/maps/yandex.png', //Говорим, что точка должна выводится картинкой и подсказываем скрипту где эта картинка находится.
iconImageSize: [26, 26], //Размеры иконки
iconImageOffset: [-13, -13]})) // Смещение левого верхнего угла иконки относительно её ножки (точки привязки).



};
// ]]></script>

Ильдар (kazanfisher) 09 марта 2015 г.

Всем доброго времени суток. Вопрос а как добавить яндекс карты в форум. Т.е как сделать так чтоб можно было добавлять всем скрипт яндекс карт в ответах и вопросах форума????
Заранее всем спасибо!!!

Петр (peter66) 2809 марта 2015 г.

Геокарта есть. По аналогии с объявлениями. Подключили, потом выводите echo $this->diafan->_geomap->get($result["id"], 'модуль');
Спасибо сказали: Ильдар (kazanfisher)

Ильдар (kazanfisher) 10 марта 2015 г.

спасибо конечно но я ничего в этом не понимаю. Не могли бы вы как то по подробней написать что куда тыркнуть))) А я тыркну а чо))))

Владимир (voha2006) 5910 марта 2015 г.

Я тоже не понимаю, но пытаюсь. Готовый код просить, плохой тон.
Для многих это хлеб!
Спасибо сказали: Валерий Викторович (Sherrlok)

Ильдар (kazanfisher) 11 марта 2015 г.

молодец

Александр Биг Эпл (ba5) 8311 марта 2015 г., редакция 11 марта 2015 г.

попробуйте так:

1. Идете на api.yandex https://tech.yandex.ru/maps/tools/constructor/, генерите карту, копируете код
2. Создает блок на сайте, и ставите галочку, что это html-код. туда копируете код с Яндекса
3. Вставляете блок, который у вас получился на страницу там где надо, к примеру, Контакты через кнопку в левом углу html у редактора

Код
<insert name="show_block" module="site" id="13">


id свой конечно же
Спасибо сказали: Ильдар (kazanfisher)

Петр (peter66) 2811 марта 2015 г.

Только точка будет постоянной.
Спасибо сказали: Ильдар (kazanfisher)

Александр Биг Эпл (ba5) 8311 марта 2015 г.

А надо как?
Спасибо сказали: Ильдар (kazanfisher)

Ильдар (kazanfisher) 11 марта 2015 г.

А как добавить его как пункт вон среди смайликов чтоб можно было просто нажать кнопку и добавить скрипт в описание и фсе.

Ильдар (kazanfisher) 11 марта 2015 г., редакция 11 марта 2015 г.

вот например вставил между этим тегом скрипт и все работает code сюда /code

Александр Биг Эпл (ba5) 8312 марта 2015 г.

надо капать в htmleditor

Ильдар (kazanfisher) 17 марта 2015 г.

кто сможет вскопать

Александр Биг Эпл (ba5) 8318 марта 2015 г.

Создаете блок - вставляете скрипт яндекс карт от сюда https://tech.yandex.ru/maps/tools/constructor/
там ставите галочку html-код

на странице вставляете

<insert name="show_block" module="site" id="12">

Александр Биг Эпл (ba5) 8318 марта 2015 г.

id-свой