Саламалейкум всем!
Данный урок о том как можно встроить Google карту в модуль фотоальбом Ucoz.
Прежде всего заменяем стандартные надписи > ищем Форма добавления модуля "Фотоальбомы" > и там изменяем > "Краткое описание" на "Координаты". Главная » Фотоальбомы » Управление категориями. и Создаем категории к примеру, Москва, Петербург итд и в описание категории вставляем координаты города или села. А так же при добавления фотографии вставляем в поле "Координаты" координаты той местности который сделан снимок и выглядит примерно так "41.74376402131704,48.70391607284546" Потом создаем 2 информера с следующими параметрами > [ Фотоальбомы · Материалы · Дата добавления материала D · Материалы: 300 · Колонки: 1 · Определенные материалы ] и называем его Карта (1 часть) и Карта (2 часть) Почему я выбрал опцию Определенные материалы? Потому что у меня в модуле более 300 фотоснимков отелей и по этому не все отображаются на карте, Теперь вот этот часть кода вставляем в первый информер
Прежде всего заменяем стандартные надписи > ищем Форма добавления модуля "Фотоальбомы" > и там изменяем > "Краткое описание" на "Координаты". Главная » Фотоальбомы » Управление категориями. и Создаем категории к примеру, Москва, Петербург итд и в описание категории вставляем координаты города или села. А так же при добавления фотографии вставляем в поле "Координаты" координаты той местности который сделан снимок и выглядит примерно так "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$);
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>
Между тегами и вставляем следующее
Code
<fieldset><legend><b><font color="#00ff00" size="1">$CAT_NAME$ на карте</font></b></legend> <div class="mappp" id="map"></div> </fieldset>
Ну вот и все ребята 
только не забудьте заменить коды информеров, координаты на свои и изменить прочие мелкие настройки в роде как размер карты и текст на свое предпочтения, просьба статью читать по внимательнее, на работоспособность я гарантирую на все 100% так как я скопировал все коды с шаблона моего сайта. Если у меня работало то и у вас тоже должна работать, вот живой пример на главном странице моего сайта
www.nabran.ru
А если у кого получится по круче, я бы с удовольствием попробовал вашу версию. Удачи при установке.
только не забудьте заменить коды информеров, координаты на свои и изменить прочие мелкие настройки в роде как размер карты и текст на свое предпочтения, просьба статью читать по внимательнее, на работоспособность я гарантирую на все 100% так как я скопировал все коды с шаблона моего сайта. Если у меня работало то и у вас тоже должна работать, вот живой пример на главном странице моего сайта
www.nabran.ru
А если у кого получится по круче, я бы с удовольствием попробовал вашу версию. Удачи при установке.
