//<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
    
      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 

     // global "map" variable
      var map = null;
      var markerclusterer = null;

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html, pointer) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
		icon: pointer,
        // map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        //infowindow.setContent(contentString); 
        //infowindow.open(map,marker);
		closeInfoBox();
		getInfoBox(contentString).open(map, this);
        });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
 
// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize2() {
  // create the map
  var myOptions = {
				zoom: 15,
				center: new google.maps.LatLng(40.63358500459065, 22.952244449737535),
				mapTypeId: google.maps.MapTypeId.ROADMAP,

				mapTypeControl: false,
				mapTypeControlOptions: {
					style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
					position: google.maps.ControlPosition.LEFT_CENTER
				},
				panControl: false,
				panControlOptions: {
					position: google.maps.ControlPosition.TOP_RIGHT
				},
				zoomControl: false,
				zoomControlOptions: {
					style: google.maps.ZoomControlStyle.LARGE,
					position: google.maps.ControlPosition.TOP_RIGHT
				},
				scaleControl: true,
				scaleControlOptions: {
					position: google.maps.ControlPosition.TOP_LEFT
				},
				streetViewControl: false,
				streetViewControlOptions: {
					position: google.maps.ControlPosition.LEFT_TOP
				},
				styles: [{"featureType":"poi","stylers":[{"visibility":"off"}]},{"stylers":[{"saturation":-70},{"lightness":37},{"gamma":1.15}]},{"elementType":"labels","stylers":[{"gamma":0.26},{"visibility":"on"}]},{"featureType":"road","stylers":[{"lightness":0},{"saturation":0},{"hue":"#ffffff"},{"gamma":0}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"lightness":50},{"saturation":0},{"hue":"#ffffff"}]},{"featureType":"administrative.province","stylers":[{"visibility":"on"},{"lightness":-50}]},{"featureType":"administrative.province","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"labels.text","stylers":[{"lightness":20}]}]
			};
  map = new google.maps.Map(document.getElementById("map"),
                                myOptions);
								
	var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: {lat: 40.63358500459065, lng: 22.952244449737535},
            radius: 200
          });    						

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
      // Read the data from example.xml
      downloadUrl("js/odigos/generate.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var id = markers[i].getAttribute("id");
          var marker_name = markers[i].getAttribute("bname");
          var marker_url = markers[i].getAttribute("url");
          var marker_desc = markers[i].getAttribute("desc");
          var marker_image = markers[i].getAttribute("image");
          var hasExpired = markers[i].getAttribute("expired");
          var pointer = 'https://odigospolis.gr/img/icon/' + markers[i].getAttribute("pointer");
          var html = '<div class="marker_info none" id="marker_info">' +
				'<div class="info" id="info">'+
				'<span style="cursor: pointer; position: absolute; right: 0px; top: 20px;" onclick="closeInfoBox();"><i class="fa fa-times"></i></span><img src="https://odigospolis.gr/img/avatars/' + marker_image + '" class="logotype" alt=""/>' +
				'<h2>'+ marker_name +'<span></span></h2>' +
				'<span>'+ marker_desc +'</span>' ;
if(hasExpired == "0") {
				 html = html + '<a href="https://odigospolis.gr/' + marker_url +'" class="green_btn" target="_blank">Μετάβαση</a>'; }
html = html + '<span class="arrow"></span>' +
				'</div>' +
				'</div>';
          // create the marker
          var marker = createMarker(point,id,html, pointer);
        }
		var mcOptions = {gridSize: 50, maxZoom: 16};
        markerCluster = new MarkerClusterer(map, gmarkers, mcOptions);
        // put the assembled side_bar_html contents into the side_bar div
      });
    }
 
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(0,0)
  });
  
		function getInfoBox(item) {
			return new InfoBox({
				content: item,
				disableAutoPan: true,
				maxWidth: 0,
				pixelOffset: new google.maps.Size(40, -210),
				closeBoxMargin: '50px 200px',
				closeBoxURL: '',
				isHidden: false,
				pane: 'floatPane',
				enableEventPropagation: true
			});


		};
    

	
	function hideAllMarkers () {
			for (var key in markers)
				markers[key].forEach(function (marker) {
					marker.setMap(null);
				});
		};

		function toggleMarkers (category) {
			hideAllMarkers();
			closeInfoBox();

			if ('undefined' === typeof markers[category])
				return false;
			markers[category].forEach(function (marker) {
				marker.setMap(mapObject);
				marker.setAnimation(google.maps.Animation.DROP);

			});
		};
		
		function closeInfoBox() {
			$('div.infoBox').remove();
		};
		
		function hideAllMarkers () {
			for (var key in markers)
				markers[key].forEach(function (marker) {
					marker.setMap(null);
				});
		};

		function toggleMarkers (category) {
			hideAllMarkers();
			closeInfoBox();

			if ('undefined' === typeof markers[category])
				return false;
			markers[category].forEach(function (marker) {
				marker.setMap(mapObject);
				marker.setAnimation(google.maps.Animation.DROP);

			});
		};
		
		function closeInfoBox() {
			$('div.infoBox').remove();
		};
    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 
//]]>