Доброго времени суток. Купил давно шаблон друзьям музыкантам сделать сайт по дружбе. Сейчас возник вопрос возможности некоторых скриптов а я в 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'
},