[Ликбез]
Форма входа
Меню сайта
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать... » Яндекс карты для сайта
Яндекс карты для сайта
[1] Komoff [15.08.2015, 15:17]
Привет, дружисче! Нашел на форуме только тему про Google maps, а про карты Яндекса нет, поэтому решил создать отдельную. Думаю, будет интересна многим.
Для формы добавления доски объявлений и вида материала, хочу добавить яндекс карты. Есть вот такой скрипт:
Код
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init () {
ymaps.geocode('Барнаул', {results: 1}).then(function (res) {
var aMap = res.geoObjects.get(0);
var bMap = new ymaps.Map('map', {
center: aMap.geometry.getCoordinates(),
zoom: 15,
controls:  ['smallMapDefaultSet'],
type: 'yandex#hybrid'
});
bMap.geoObjects.add(res.geoObjects);
bMap.controls.remove('geolocationControl').remove('searchControl');
});
}
</script>
<div id="map" style="width:600px;height:300px"></div>

Кое-что взял взял с форума юкоз, кое что доработал сам из описания API. Хоть и работает как надо, но посмотри, пожалуйста, может где ошибся.
Сейчас не получается у меня сделать Создание карты по требованию. Пытался сделать сам, но похоже что попало делаю:
Код
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init () {

var bMap;
$('#toggle').bind({
click: function () {
if (!bMap) {

ymaps.geocode('Барнаул', {results: 1}).then(function (res) {
var aMap = res.geoObjects.get(0);
var bMap = new ymaps.Map('map', {
center: aMap.geometry.getCoordinates(),
zoom: 15,
controls:  ['smallMapDefaultSet'],
type: 'yandex#hybrid'
});
bMap.geoObjects.add(res.geoObjects);
bMap.controls.remove('geolocationControl').remove('searchControl');
});

$("#toggle").attr('value', 'Скрыть карту');
}
else {
bMap.destroy();
bMap = null;
$("#toggle").attr('value', 'Показать карту снова');
}
}
});

}
</script>
<input type="button" value="Показать на карте" id="toggle"><br>
<div id="map" style="width:600px;height:300px"></div>

Есть ещё в Песочнице пример.
[2] Komoff [16.08.2015, 22:13]
Или может завернуть карту в системный спойлер? Просто с их API мне кажется карта именно подгружается, а не просто скрывается.
А с SuggestView у меня вообще беда. Вроде получается добавить, но почему-то подсказка выводится не под input, а в верхней части страницы слева. Не получается задать ей родителем input.
Уже подумываю сделать все проще, но менее функционально. sad
[3] likbezz [17.08.2015, 13:29]
Komoff,
Цитата Komoff, Сб, 15.08.2015, 15:17:36
Хоть и работает как надо, но посмотри, пожалуйста, может где ошибся.

Позже, сейчас нагружен по самое небалуйся..

Цитата Komoff, Вс, 16.08.2015, 22:13:13
Или может завернуть карту в системный спойлер?

Нет, те же яйца, только в профиль.
Инициализацию самого скрипта нужно делать по клику.

Цитата Komoff, Вс, 16.08.2015, 22:13:13
Вроде получается добавить, но почему-то подсказка выводится не под input, а в верхней части страницы слева. Не получается задать ей родителем input.

Копай в стилях.

Цитата Komoff, Вс, 16.08.2015, 22:13:13
Уже подумываю сделать все проще, но менее функционально.

Зачастую, это наиболее верное решение - редко кому нужен полный функционал.
© Краткость - сестра таланта.
[4] Komoff [17.08.2015, 17:31]
С SuggestView я погорячился, работает нормально. Есть какая-то проблема его работы в таблицах, пока тоже не было времени разобраться.
[5] Komoff [17.08.2015, 20:54]
Короче, решил проблему с SuggestView. Почему-то оно убегало если input отображался в таблицах с определенными стилями, не понял до конца какими. Но помогло если взять его в блок div и добавить CSS position:relative.

Посему, выкладываю пример, как добавить подсказку с географическими данными для дополнительного поля в модуле "Доска объявлений" на uCoz.
На странице добавления материалов, между тегами <head> и </head>, вставляем следующее:
Код
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&load=SuggestView" type="text/javascript"></script>
<script type='text/javascript'>
window.onload=function(){
ymaps.load(function () {
var suggestView = new ymaps.SuggestView('bdF13');
});
}
</script>

Где bdF13 - это id "Дополнительного поля 1", к которому мы прикрепляем подсказку, его можно узнать из исходного кода страницы. Если подсказка как у меня выводится не под полем или вообще не выводится, попробуйте добавить туда же следующее:
Код
<style type="text/css">
#bdM36{position:relative}
</style>

bdM36 - это id ячейки таблицы где выводится "Дополнительное поле 1".
Всё.
Полная версия сайта