#if($SliderList.Count > 0)
<div class="ProGmapBox $ThemeName map-loading" id="ProGmap${ModuleID}">
  <div class="ProGmap " style=" width:${xf.ViewXmlSetting("gmapwidth","100%")} "> </div>
   #if(${xf.ViewXmlSetting("displaydescription","true")}=="true")
  <div class="Description">
    <div class="DescriptionBox">
      <ul>
        #foreach($SliderItem in $SliderList)
        <li>
					#if(${xf.ViewSliderSetting($SliderItem,"data","")} != "") 
						<h3>${xf.ViewSliderSetting($SliderItem,"data","")}</h3>
					#end
					${xf.ViewSliderSetting($SliderItem,"Description","")} 
				</li>
        #end
      </ul>
    </div>
    <span class="gmapclose"></span> <span class="gmapup"></span> <span class="gmapdown"></span> </div>
    #end
</div>
<style type="text/css">
#ProGmap${ModuleID} .ProGmap{
	height:${xf.ViewXmlSetting("gmapheight","700")}px;
}
@media only screen and (max-width: 1199px) {
	#ProGmap${ModuleID} .ProGmap{
		height:${xf.ViewXmlSetting("thDesktop","600")}px;
	}
}
@media only screen and (max-width: 979px) {
	#ProGmap${ModuleID} .ProGmap{
		height:${xf.ViewXmlSetting("thDesktopSmall","500")}px;
	}
}
@media only screen and (max-width: 768px) {
	#ProGmap${ModuleID} .ProGmap{
		height:${xf.ViewXmlSetting("thTable","400")}px;
	}
}
@media only screen and (max-width: 479px) {
	#ProGmap${ModuleID} .ProGmap{
		height:${xf.ViewXmlSetting("thMobile","300")}px;
	}
}

</style>


<script type="text/javascript">
if(mapapikey && mapapikey!=""){
	
}else{
	var mapapikey = "${xf.ViewXmlSetting("APIKey","")}";
}

if (typeof mapcallback == 'function') { 
var customMap${ModuleID} = mapcallback;
	mapcallback = function(){
		customMap${ModuleID}();
		customNewMap${ModuleID}();
	}
}else{
	mapcallback = function(){
		customNewMap${ModuleID}();
	}
}

var customNewMap${ModuleID} = function(){
jQuery(document).ready(function () {
	
	var e = $("#ProGmap${ModuleID}"),
		GmapBox = e.children(".ProGmap"),
		Description = e.children(".Description"),
		Gmapclose=Description.children(".gmapclose"),
		Gmapup=Description.children(".gmapup"),
		Gmapdown=Description.children(".gmapdown"),
		Gmapdinfobox=Description.children(".DescriptionBox"),
		Gmapdlist=Gmapdinfobox.children("ul").children("li");
	var index=0,
		map,
		markers=[],
		l=Gmapdlist.length,
		onsor=true;
	#if(${xf.ViewXmlSetting("SVPanorama","false")}=="true")	
	var fenway = new google.maps.LatLng(${xf.ViewXmlSetting("SVPanoramaLatLng","42.345573,-71.098326")});
	#end
	GmapBox.gmap3({
		marker:{
			values:[
				#foreach($SliderItem in $SliderList)
				{
					
					address:"${xf.ViewSliderSetting($SliderItem,"Title","")}", 	
					#if(${xf.ViewSliderSetting($SliderItem,"data","")} != "") 
						data:"<div data-id=\"${velocityCount}\" class=\"markersLink\">${xf.ViewSliderSetting($SliderItem,"data","")}</div>", 
					#end
					#if(${xf.PictureUrl($SliderItem,"MarkerIcon","")} != "")
						options:{
							icon: "${xf.PictureUrl($SliderItem,"MarkerIcon","")}",
							content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
						}
					#end
				
				},
				#end			
			],
            events:{
			
			
              mouseover: function(marker, event, context){
				  index= $(context.data).data("id")-1;
                  var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({get:{name:"infowindow"}});
				  
				#if(${xf.ViewXmlSetting("displaytooltips","true")}=="true")  
					if (infowindow){
					  infowindow.open(map, marker);
					  infowindow.setContent(context.data);
					} else {
					  $(this).gmap3({
						infowindow:{
						  anchor:marker, 
						  options:{content: context.data}
						}
					  });
					}
				#end 
              },
              mouseout: function(){
				#if(${xf.ViewXmlSetting("displaytooltips","true")}=="true")    
                var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.close();
                }
				#end
              },
			 
			 #if(${xf.ViewXmlSetting("displaydescription","true")}=="true")
			  click:function(marker){
				  	Description.fadeIn()
					Gmapdlist.eq(index).show().siblings().hide()
					if(onsor){
					Gmapdinfobox.css({"max-height":GmapBox.height()*0.8});	
					 Gmapdinfobox.mCustomScrollbar({
						autoHideScrollbar:true,
						theme:"light-thin"
					 });
					 onsor=false
					} 
					 jQuery.each(markers, function(i, marker){
						marker.setAnimation(null);
					});
					marker.setAnimation(google.maps.Animation.BOUNCE);
			  }
			 #end  
			  
            }
		},
		#if(${xf.ViewXmlSetting("displayroute","false")}=="true")
		getroute:{
			options:{
				origin:"#foreach($SliderItem in $SliderList)#if(${velocityCount}==1)${xf.ViewSliderSetting($SliderItem,"Title","")}#end#end",
				destination:"#foreach($SliderItem in $SliderList)#if(${velocityCount}==2)${xf.ViewSliderSetting($SliderItem,"Title","")}#end#end",
				travelMode: google.maps.DirectionsTravelMode.DRIVING
			},
			callback: function(results){
				
			if (!results) return;
			$(this).gmap3({
				directionsrenderer:{
					#if(${xf.ViewXmlSetting("displayconroute","false")}=="true")
					container: $(document.createElement("div")).addClass("googleline").insertAfter(GmapBox),
					#end
					options:{
						directions:results
					} ,
						suppressInfoWindows:false
				}
			});
			
			}
		},
		#end
		map:{
			address:"${xf.ViewXmlSetting("defaultaddress","")}",
			options:{
				mapTypeId: google.maps.MapTypeId.${xf.ViewXmlSetting("gMapType","ROADMAP")},
				mapTypeControl: true,
				mapTypeControlOptions: {
				  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
				},
				navigationControl: true ,
				scrollwheel: ${xf.ViewXmlSetting("Scrollwheel","true")},
				streetViewControl: true,
				zoom: ${xf.ViewXmlSetting("gmapzoom","12")}
				#if(${xf.ViewXmlSetting("SVPanorama","false")}=="true")
				,
				center: fenway 
				#end
			},
			callback:function() { 
				 markers = this.gmap3({
				  get:{
					name:"marker",
					all: true
				  }
				});
				map = GmapBox.gmap3("get");
				#if(${xf.ViewXmlSetting("SVPanorama","false")}=="true")
				GmapBox.gmap3({	
				  streetviewpanorama:{
					  options:{
					  container: $(document.createElement("div")).addClass("googlemap").prependTo(GmapBox),
					  opts:{
						enableCloseButton:true,
						position: fenway,
						pov: {
						  heading: ${xf.ViewXmlSetting("SVPanoramaheading","54")},
						  pitch: ${xf.ViewXmlSetting("SVPanoramapitch","10")},
						  zoom: ${xf.ViewXmlSetting("SVPanoramazoom","1")}
						}
						
					  }
					}
				  }
				})
				#end
			}
		},

	})
#if(${xf.ViewXmlSetting("displaydescription","true")}=="true")	
	Description.mouseevents({
		mousedown: function() {
			startX = mouseevent.clientX;
			startY = mouseevent.clientY;
			objX=Description.position().left;
			objY=Description.position().top;
			Description.css("cursor","move")
			
		},
		mouseup: function() {
			Description.css("cursor","default")
		},
		mousemove: function() {
			x=mouseevent.clientX-startX;
			y=mouseevent.clientY-startY
			Description.css({
			  left:objX + x,
			   top:objY + y
			})
		}
	})
	Gmapclose.on("click",function(){
		Description.fadeOut();
	 jQuery.each(markers, function(i, marker){
		marker.setAnimation(null);
	});
	})
	
var gmapMagnify=function(index) {
	 Gmapdlist.eq(index).show().siblings().hide();
	 Gmapdinfobox.mCustomScrollbar("scrollTo","top",{scrollInertia:0});
	 Gmapdinfobox.mCustomScrollbar("update");
	 Gmapdinfobox.find("img").load(function(){
		 Gmapdinfobox.mCustomScrollbar("update");
	 })
	 map.setCenter(markers[index].getPosition());
	 map.setZoom(${xf.ViewXmlSetting("gmapzoom","12")});
	 jQuery.each(markers, function(i, marker){
		marker.setAnimation(null);
	  });
	 markers[index].setAnimation(google.maps.Animation.BOUNCE);
	}
	
	Gmapup.on("click",function(){
		index= index - 1 < 0? l-1 : index - 1;
		gmapMagnify(index);
	})
	Gmapdown.on("click",function(){
		index= index + 1 >= l ? 0:index+1;
		gmapMagnify(index);
	})
	
	if(l<2){
		Gmapup.hide();
		Gmapdown.hide();
	}
	
#end

//e.delay(4000).removeClass("map-loading")
})

}


	
</script> 
#end