Приветствую Вас Прохожий | RSS Воскресенье, 04.12.2016, 23:19
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 12
Гостей: 11
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты информеры

Скрипт карты на подобие Picasa из фотоальбома Ucoz

Саламалейкум всем!
Данный урок о том как можно встроить Google карту в модуль фотоальбом Ucoz.<br>

Прежде всего заменяем стандартные надписи > ищем Форма добавления модуля "Фотоальбомы" > и там изменяем > "Краткое описание" на "Координаты".

Главная » Фотоальбомы » Управление категориями. и Создаем категории к примеру, Москва, Петербург итд и в описание категории вставляем координаты города или села.
А так же при добавления фотографии вставляем в поле "Координаты" координаты той местности который сделан снимок и выглядит примерно так "41.74376402131704,48.70391607284546"
Потом создаем 2 информера с следующими параметрами > [ Фотоальбомы · Материалы · Дата добавления материала D · Материалы: 300 · Колонки: 1 · Определенные материалы ] и называем его Карта (1 часть) и Карта (2 часть)
Почему я выбрал опцию Определенные материалы? Потому что у меня в модуле более 300 фотоснимков отелей и по этому не все отображаются на карте,

Теперь вот этот часть кода вставляем в первый информер


Code

var onMarkerClick$NUMBER$ = function() {
var marker = this;
var latLng = marker.getPosition();
infoWindow.setContent('<font color="#ff0000" id="firstHeading" class="firstHeading">$CAT_NAME$</font>
<br>
<a title="Перейти на страницу фотоальбома $CAT_NAME$" href="$CAT_URL$">$PHOTO$</a>');

infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});

var iconImage$NUMBER$ = new google.maps.MarkerImage('http://www.nabran.ru/Iconki/maps/5.png', <!-- Иконки на карте -->
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(20,40)
);
var iconShadow$NUMBER$ = new google.maps.MarkerImage('http://www.nabran.ru/Iconki/maps/5.png', <!-- Иконки на карте -->
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(20, 40)
);
var marker$NUMBER$ = new google.maps.Marker({
map: map,
icon: iconImage$NUMBER$,
shadow: iconShadow$NUMBER$,
title:"$CAT_NAME$ [Координаты $PHOTO_DESCR$]",
position: new google.maps.LatLng($PHOTO_DESCR$)
});



И во второй информер вставляем этот часть


Code


google.maps.event.addListener(marker$NUMBER$, 'click', onMarkerClick$NUMBER$);



Дальше идем редактировать шаблон фотоальбома
До тега </head> вставляем вот это

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

Code


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10, <!-- Увеличение карты -->
center: new google.maps.LatLng(41.74376402131704,48.70391607284546), <!-- Сюда координаты -->
mapTypeId: google.maps.MapTypeId.SATELLITE
});

var infoWindow = new google.maps.InfoWindow;
$MYINF_23$ <!-- информер номер 1 -->
$MYINF_24$ <!-- информер номер 2 -->
});
</script>

<style type="text/css">
#map{width:555px; height:500px;} <!-- Размеры карты -->
.mappp{background:url('http://www.nabran.ru/images/loaders/loader4525.gif')no-repeat;background-position:250px 250px;}
#bodyContent {text-align:left;font-weight:normal;font-size:10pt;color:#FF0000;}
</style>



А вот на страницу со списком фотографии альбома вставляйте точно в таком форме


Code


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15, <!-- Увеличение карты -->
center: new google.maps.LatLng($CAT_DESCR$), <!-- Сюда координаты или тег $CAT_DESCR$ -->
mapTypeId: google.maps.MapTypeId.SATELLITE
});

var infoWindow = new google.maps.InfoWindow;
$MYINF_23$ <!-- информер номер 1 -->
$MYINF_24$ <!-- информер номер 2 -->
});
</script>

<style type="text/css">
#map{width:555px; height:500px;} <!-- Размеры карты -->
.mappp{background:url('http://www.nabran.ru/images/loaders/loader4525.gif')no-repeat;background-position:250px 250px;}
#bodyContent {text-align:left;font-weight:normal;font-size:10pt;color:#FF0000;}
</style>



Между тегами <body> и </body> вставляем следующее

Code


<fieldset><legend><b><font color="#00ff00" size="1">$CAT_NAME$ на карте</font></b></legend>
<div class="mappp" id="map"></div>
</fieldset>



Ну вот и все ребята :) только не забудьте заменить коды информеров, координаты на свои и изменить прочие мелкие настройки в роде как размер карты и текст на свое предпочтения, просьба статью читать по внимательнее, на работоспособность я гарантирую на все 100% так как я скопировал все коды с шаблона моего сайта. Если у меня работало то и у вас тоже должна работать, вот живой пример на главном странице моего сайта

А если у кого получится по круче, я бы с удовольствием попробовал вашу версию. Удачи при установке.
Автор\Источник: http://www.nabran.ru/

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 1639 | Комментарии: 2 | Рейтинг: 3.3/7 | |Категория: Скрипты информеры | Добавил: Nabran | Дата: 09.01.2012 | Скачали: 0
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 2
1 Мари   Дата: 28.10.2012  Время: 19:39   [№ 13962]
В принципе неплохо, но напрягают всплывающие окна. И без того рекламы дофига. еще и эти закрывать приходится. Ощущение замусоренности

2 Generous   Дата: 28.10.2012  Время: 19:41   1 [№ 13963]
Всплывающие окна где это Вы имеете в виду?


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru