Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.03.2015, 20:28
Новичок на форуме
Отправить личное сообщение для alex1petrash Посмотреть профиль Найти все сообщения от alex1petrash
 
Регистрация: 19.06.2014
Сообщений: 3

Нужна помощь с скриптом)
Доброго времени суток. Купил давно шаблон друзьям музыкантам сделать сайт по дружбе. Сейчас возник вопрос возможности некоторых скриптов а я в JS дуб дубом. Так то в принципе основопологающие вещи понимаю но сам дописать нужные вещи не смогу вот и обращаюсь к спецам.
Задача скрипта на гугл мапс встроенном в тело сайта генерировать метки с будущими концертами и выстраивать их по порядку по дате.

Собственно задача следующая:
Сделать возможность генерить отдельно прошедшие концерты


сам скрипт :

googleMap: function() {
		"use strict";
		
		if ( typeof myConcerts === 'undefined' || myConcerts.length === 0){
			return false;
		}
		
		var $tis = this;
		var monthTxt = [],
			color = "#3f9f97";
		
		monthTxt[0]="January";
		monthTxt[1]="February";
		monthTxt[2]="March";
		monthTxt[3]="April";
		monthTxt[4]="May";
		monthTxt[5]="June";
		monthTxt[6]="July";
		monthTxt[7]="August";
		monthTxt[8]="September";
		monthTxt[9]="October";
		monthTxt[10]="November";
		monthTxt[11]="December";
		
		var styles = [
			{
				stylers: [
					{ hue: color },
					{ saturation: -50 },
					{ lightness: -5},

				]
			},
			{
				featureType: "administrative",
				elementType: "labels.text.fill",
				stylers: [
					{ saturation: 20 },
					{ lightness: -70},
				]
			},
			{
				featureType: "poi",
				elementType: "geometry.fill",
				stylers: [
					{ hue: color },
					{ saturation: 30 },
					{ lightness: -25},
				]
			},

			{
				featureType: "landscape",
				elementType: "geometry",
				stylers: [
					{ saturation: 30 },
					{ lightness: -15 },
				]
			},
			{
				featureType: "water",
				elementType: "geometry",
				stylers: [
					{ lightness: 40 },
				]
			},
			{
				featureType: "road",
				elementType: "geometry",
				stylers: [
					{ hue: color },
					{ saturation: 15 },
					{ lightness: 20 },

				]
			},
			
			{
				featureType: "road.highway",
				elementType: "geometry",
				stylers: [
					{ hue: color },
					{ saturation: 25 },
					{ lightness: -40},
				]
			},
			{
				featureType: "road",
				elementType: "geometry.stroke",
				stylers: [
					{ saturation: 10 },
					{ lightness: -20},
				]
			},
			{
				featureType: "transit",
				elementType: "geometry",
				stylers: [
					{ hue: color },
					{ saturation: 30 },
					{ lightness: -30},
				]
			}
		];
		
		var styledMap = new google.maps.StyledMapType(styles, {name: "Crawls"});
		
		
		var upcomingConcert = myConcerts[0],
			dateTemp = new Date(upcomingConcert.year, upcomingConcert.month, upcomingConcert.day, 0, 0, 0);
			
		for(var i=0; i < myConcerts.length; i++){
			var newDate = new Date(myConcerts[i].year, myConcerts[i].month, myConcerts[i].day, 0, 0, 0);
			
			myConcerts[i].date = newDate;
			
			if (newDate < dateTemp){
				dateTemp = newDate;
				upcomingConcert = myConcerts[i];
			}			
		}
		
		function sortAsc(a, b) {
			return new Date(a.date).getTime() - new Date(b.date).getTime();
		}
		
		myConcerts.sort(sortAsc);
		
		$(".ccounter").ccountdown(upcomingConcert.year,upcomingConcert.month,upcomingConcert.day);
		$("#concerts-info .date").html(upcomingConcert.day + " " + monthTxt[upcomingConcert.month - 1] + ", " + upcomingConcert.year);
		$("#concerts-info .location").html(upcomingConcert.location);
		
		$tis.myLatlng = new google.maps.LatLng(upcomingConcert.latitude, upcomingConcert.longitude-0.01);
		
		var mapOptions = {
			center:  $tis.myLatlng,
			zoom: 6,
			scrollwheel: false,
			panControl:false,
			mapTypeControl:false,
			zoomControl:true,
			zoomControlOptions: {
				position:google.maps.ControlPosition.RIGHT_CENTER
			}
		};
		
		$tis.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
		$tis.map.mapTypes.set('map_style', styledMap);
		$tis.map.setMapTypeId('map_style');
		
		var createMarker = function(obj){
			var lat = obj.latitude, 
				lng = obj.longitude,
				year = obj.year,
				month = monthTxt[obj.month - 1].slice(0,3),
				day = obj.day,
				//location = obj.location,
				info = obj.infoWindow;
			
			var infowindow = new google.maps.InfoWindow({
				content: '<div class="infoWindow">' + info + '</div>'
			});
			
			var marker = new RichMarker({
				position: new google.maps.LatLng(lat, lng),
				map: $tis.map,
				anchorPoint: new google.maps.Point(29,-68),
				shadow: 'none',
				content: '<div class="marker"><div class="day">' + day +' </div>' +
						'<div class="month">' + month +' </div>' +
						'<div class="year">' + year +' </div>' +
						'</div>'
			});

			google.maps.event.addListener(marker, 'click', function() {
				infowindow.open($tis.map,marker);
			});
		};
		
		for(i=myConcerts.length-1; i >= 0; i--){
			var concert = myConcerts[i];
			createMarker(concert);
			$('#complete-list #list').prepend('<div class="completeInfo" data-id="' + i + '"><div class="completeDate">' + concert.day + " " + monthTxt[concert.month - 1] + ", " + concert.year + '</div><div class="completeLocation">' + concert.location + '</div></div>');
		}
	},





Лист с концертами в отдельном файлике

и имеет такой вид


var myConcerts = [
	
	
	{
		year:2015,
		month:03,
		day:19,
		latitude:50.448592,
		longitude:30.519961,
		location:'location',
		infoWindow:'info'
	},
	
	{
		year:2015,
		month:03,
		day:20,
		latitude:49.425775,
		longitude:26.990463,
		location:'location',
		infoWindow:'info'
	},
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь по javascript darklend Общие вопросы Javascript 0 12.01.2014 23:33
нужна помощь в JavaScript михаил Общие вопросы Javascript 26 30.10.2013 12:07
Нужна помощь: Slider wheel Alex555 Мобильный JavaScript 0 15.05.2013 18:06
Нужна помощь по слайдеру seoguru Работа 3 28.01.2013 22:02
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17