<div id="recenterGreece" onClick="rGreece()">
		<div title="Click to recentre the map" style="background-color: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; cursor: pointer; margin: 10px; text-align: center;"><div class="btnRecentre" style="color: rgb(103, 103, 103); font-family: Roboto, Arial, sans-serif; font-size: 12px; line-height: 20px; padding-left: 5px; padding-top: 1px; padding-right: 5px;">
			<div class="btn-recentre-icon" style="width: 15px;height: 15px;display: block;vertical-align: middle;top: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-centre.png);background-size: 33px 15px;"></div><span style="margin-left: 18px;">Recentre</span></div>
		</div>
	</div>
	<div id="recenterSkiathos" onClick="rSkiathos()">
		<div title="Click to recentre the map" style="background-color: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; cursor: pointer; margin: 10px; text-align: center;"><div class="btnRecentre" style="color: rgb(103, 103, 103); font-family: Roboto, Arial, sans-serif; font-size: 12px; line-height: 20px; padding-left: 5px; padding-top: 1px; padding-right: 5px;">
			<div class="btn-recentre-icon" style="width: 15px;height: 15px;display: block;vertical-align: middle;top: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-centre.png);background-size: 33px 15px;"></div><span style="margin-left: 18px;">Recentre</span></div>
		</div>
	</div>
	<div id="recenterMykonos" onClick="rMykonos()">
		<div title="Click to recentre the map" style="background-color: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; cursor: pointer; margin: 10px; text-align: center;"><div class="btnRecentre" style="color: rgb(103, 103, 103); font-family: Roboto, Arial, sans-serif; font-size: 12px; line-height: 20px; padding-left: 5px; padding-top: 1px; padding-right: 5px;">
			<div class="btn-recentre-icon" style="width: 15px;height: 15px;display: block;vertical-align: middle;top: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-centre.png);background-size: 33px 15px;"></div><span style="margin-left: 18px;">Recentre</span></div>
		</div>
	</div>
	<div id="recenterSantorini" onClick="rSantorini()">
		<div title="Click to recentre the map" style="background-color: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; cursor: pointer; margin: 10px; text-align: center;"><div class="btnRecentre" style="color: rgb(103, 103, 103); font-family: Roboto, Arial, sans-serif; font-size: 12px; line-height: 20px; padding-left: 5px; padding-top: 1px; padding-right: 5px;">
			<div class="btn-recentre-icon" style="width: 15px;height: 15px;display: block;vertical-align: middle;top: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-centre.png);background-size: 33px 15px;"></div><span style="margin-left: 18px;">Recentre</span></div>
		</div>
	</div>
	  <div id="floating-panel-text">
		  <h2>Simply click on the <span style="color: #d33820;">red</span> markers to explore Greece</h2>
	  </div>
	  
    <div id="map"><span class="loading">loading tiles...</span></div>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAM0aYiPzja4gFTzytMNRyxU2nWwV5U29c&callback=initMap">
    </script>
/* no links to other maps */
		
		
		
		
		
		
		
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
		  max-width: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
		#backToGreece, #backToMykonos-fromSantorini, #backToSkiathos, #backToSantorini, #backToMykonos-fromSkiathos {
			display: none;
		}
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Fira Sans','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
      #floating-panel {
        margin-left: -52px;
      }
		#floating-panel-compass {
        position: absolute;
        bottom: 15px;
        left: 0px;
        z-index: 5;
        padding: 5px;
        border: none;
        text-align: center;
        font-family: 'Fira Sans','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
		
		#floating-panel-text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    padding: 5px;
    border: none;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 0 25px;
    font-size: 0.7em;
    font-family: 'Fira sans', sans-serif;
}
      
		span.loading {
				display: block;
				text-align: center;
				font: 300 italic 72px/400px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
			}
		.gm-style-iw > div {
    max-width: 400px !important;
}
		.gm-style-iw h2 {
    margin-top: 10px;
    font-size: 19px;
    margin-bottom: 10px !important;
    font-family: 'Fira Sans', sans-serif;
    line-height: 23px;
    text-transform: ;
    font-weight: 400;
    
}
		a.btnlink {
    background: #ffffff;
    padding: 1px 6px 2px;
    border: 1px solid #000;
    display: inline-block;
    color: #000;
    text-decoration: none;
    font-family: 'Fira Sans', sans-serif;
	margin-top: 15px;
}
		a.btnlink:hover {
    background: #ec1a2e;
	border-color: #ec1a2e;
	color: #fff;	
	
}
		p.infoContent {
    margin-top: 5px;
	margin-bottom: 1px;
    font-size: 13px;
    line-height: 17px;
	font-family: 'Fira Sans', sans-serif;
		}
		a > img { cursor: pointer;}
		.btnRecentre:hover .btn-recentre-icon, #backToGreece:hover .btn-back-to-greece-icon {
    background-position-x: -18px !important;
}
		.btnRecentre:hover span, #backToGreece:hover span {
    color: #000;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
		.gm-style-iw {
			padding: 7px 0 3px !important;
		}
		
		@media only screen and (max-width: 599px) {
			#floating-panel-text {
				background: #fff !important;
				top: 2px !important;
				left:2px !important;
				width: calc(100% - 54px) !important;
			}
		}
		.gmnoprint, .gmnoprint img  {
    cursor: pointer !important;
}
		.gm-style-iw {
			min-height: 200px !important;
		}
		.closeContainer {
			width: 23px !important;
			height: 23px !important;
			border-radius: 50px !important;
			background: #fff;
			box-shadow: 2px -2px 1px -2px #888888;
			top: -10px !important;
			right: -10px !important;
			border: 3px solid #ffffff;
		}
		.closeContainer img {
			width: 23px !important;
			height: 23px !important;
			top: 0px !important;
			left: 0px !important;
		}
		
		@keyframes rotate360 {
  	/*to { transform: rotate(360deg); }*/
	0%   { opacity: 0.5; }
  	50% { opacity: 1; }
	100%   { opacity: 0.5; }
}
		@-webkit-keyframes rotate360 {
 	/*to { transform: rotate(360deg); }*/
	0%   { opacity: 0.5; }
  	50% { opacity: 1; }
	100%   { opacity: 0.5; }
}
@-moz-keyframes rotate360 {
  	/*to { transform: rotate(360deg); }*/
	0%   { opacity: 0.5; }
  	50% { opacity: 1; }
	100%   { opacity: 0.5; }
}
@-o-keyframes rotate360 {
  	/*to { transform: rotate(360deg); }*/
	0%   { opacity: 0.5; }
  	50% { opacity: 1; }
	100%   { opacity: 0.5; }
}
@keyframes rotate360 {
	/*to { transform: rotate(360deg); }*/
  	0%   { opacity: 0.5; }
  	50% { opacity: 1; }
	100%   { opacity: 0.5; }
}
/*img[src*="icons/marker-clusterer.svg"] { animation: 2s rotate360 infinite linear; }*/
/* TODO: Add -vendor-prefixes for different browsers */
				
#recenterGreece, #recenterSkiathos, #recenterMykonos, #recenterSantorini {
	display: none;
	cursor: pointer !important;
	z-index: 1; position: absolute; right: 0px; top: 0px;
}
// If you're adding a number of markers, you may want to dropMykonos them on the map
      // consecutively rather than all at once. This example shows how to use
      // window.setTimeout() to space your markers' animation.

	var neighborhoods = [
 	{position : {lat: -22, lng: -36}},
  {position : {lat: 4, lng: 19}},
  {position : {lat: 11, lng: 32}}
]; 
		  
		  
		  
		  
	var neighborhoodsskiathos = [
		  {position : {lat: 0, lng: 12.3046875}, content : 'Sit beneath a mulberry tree in the ancient quarter’s Taverna Alexandros and you might just get serenaded while you eat', articleTitle : 'Sample local cuisine', articleURL : 'https://www.standard.co.uk/lifestyle/travel/ba-cityairport/why-skiathos-is-a-great-holiday-destination-for-adventurers-a3781866.html?cmpid=bacityflyer_traditionaltaverna', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/skiathos/taverna-alexandros.jpg'},{position : {lat: 17.4764322, lng: 8.0859375}, content : 'Set among olive groves and ancient vineyards, The Monastery of Evangelistria is a fascinating place to explore', articleTitle : 'Visit a piece of history', articleURL : 'https://www.standard.co.uk/lifestyle/travel/ba-cityairport/why-skiathos-is-a-great-holiday-destination-for-adventurers-a3781866.html?cmpid=bacityflyer_monastryofevangelistria', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/skiathos/monastery-of-evangelistria.jpg'},{position : {lat: 7.972197714, lng: -1.7578125}, content : 'With fantastic hiking routes and well-marked pathways, it’s definitely worth walking around the island’s forests and lush valleys', articleTitle : 'Discover the sights by foot', articleURL : 'https://www.standard.co.uk/lifestyle/travel/ba-cityairport/why-skiathos-is-a-great-holiday-destination-for-adventurers-a3781866.html?cmpid=bacityflyer_outonfoot', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/skiathos/walking-pathways.jpg'},{position : {lat: -16.55196172, lng: -2.98828125}, content : 'Spend a day on the Blue Flag Kanapitsa beach where you can rent a pedalo and have dinner on the waterfront', articleTitle : 'Take a dip before dinner', articleURL : 'https://www.standard.co.uk/lifestyle/travel/ba-cityairport/why-skiathos-is-a-great-holiday-destination-for-adventurers-a3781866.html?cmpid=bacityflyer_kanapitsabeach', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/skiathos/kanapitsa-beach.jpg'},{position : {lat: -6.577303118, lng: -30.5859375}, content : 'Giddy up and appreciate the island’s Mandraki forest and beautiful coastal views', articleTitle : 'Explore on horseback', articleURL : 'https://www.standard.co.uk/lifestyle/travel/ba-cityairport/why-skiathos-is-a-great-holiday-destination-for-adventurers-a3781866.html?cmpid=bacityflyer_horseback', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/skiathos/equestrian-centre.jpg'},{position : {lat: 27.13736836, lng: 6.328125}, content : 'Only accessible by water, this secluded spot boasts turquoise waters and white pebbles', articleTitle : 'Hop on a boat to Lalaria beach', articleURL : 'https://www.standard.co.uk/lifestyle/travel/ba-cityairport/why-skiathos-is-a-great-holiday-destination-for-adventurers-a3781866.html?cmpid=bacityflyer_lalariabeach', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/skiathos/lalaria-beach.jpg'}
	  ];
    var neighborhoodsmykonos = [
		  {position : {lat: -9.925565912, lng: 1.23046875}, content : 'With sunset bars and glamorous hotel lounges, Paradise Beach is the ideal place to spend an evening', articleTitle : 'Party the night away', articleURL : 'https://www.standard.co.uk/lifestyle/ba-cityairport/what-to-do-on-a-city-break-to-mykonos-a3782531.html?cmpid=bacityflyer_paradisebeach', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/mykonos/paradise-beach.jpg'},{position : {lat: 0.834931386, lng: -5.09765625}, content : 'To Ma’ereio has a range of hearty options, from louza and kopanisti to psaronefri and meatballs – ideal for foodies', articleTitle : 'Book a table at a homely restaurant', articleURL : 'https://www.standard.co.uk/lifestyle/ba-cityairport/what-to-do-on-a-city-break-to-mykonos-a3782531.html?cmpid=bacityflyer_tomaereio', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/mykonos/ma-ereio.jpg'},{position : {lat: -8.407168164, lng: 2.724609375}, content : 'From Paradise Beach you can explore wrecks, caverns and various reefs – it’s the perfect activity for thrill seekers', articleTitle : 'Take a dive', articleURL : 'https://www.standard.co.uk/lifestyle/ba-cityairport/what-to-do-on-a-city-break-to-mykonos-a3782531.html?cmpid=bacityflyer_diveawreck', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/mykonos/dive-a-wreck.jpg'},{position : {lat: 0.6591651463, lng: -3.69140625}, content : 'Head to Lena’s house, a heritage museum providing an authentic taste of a 19th-century Mykonian family home', articleTitle : 'Immerse yourself in Mykonos’s past', articleURL : 'https://www.standard.co.uk/lifestyle/ba-cityairport/what-to-do-on-a-city-break-to-mykonos-a3782531.html?cmpid=bacityflyer_lenashouse', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/mykonos/lena-s-house.jpg'},{position : {lat: 2.021065119, lng: -4.833984375}, content : 'A stylish area with plenty of arty cafés and independent boutiques, this is a great place to spend an afternoon', articleTitle : 'Stop for a coffee in Little Venice', articleURL : 'https://www.standard.co.uk/lifestyle/ba-cityairport/what-to-do-on-a-city-break-to-mykonos-a3782531.html?cmpid=bacityflyer_littlevenice', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/mykonos/little-venice.jpg'},{position : {lat: 1.801460929, lng: -3.33984375}, content : 'Wander the narrow streets of the old town, making an effort to stop off at the charming Paraportiani in Kastro', articleTitle : 'Get lost in the Hora', articleURL : 'https://www.standard.co.uk/lifestyle/ba-cityairport/what-to-do-on-a-city-break-to-mykonos-a3782531.html?cmpid=bacityflyer_thehora', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/mykonos/paraportiani-in-kastro.jpg'}
	  ]; 
	var neighborhoodssantorini = [
		  {position : {lat: -13.03870978, lng: 29.97070313}, content : 'During the summer months you can make the most of the balmy weather on Kamari Beach, where cult movies are put on outdoors', articleTitle : 'Catch a film at an open-air cinema', articleURL : 'https://www.standard.co.uk/lifestyle/travel/a-wellnesslovers-guide-to-ibiza-a3776721.html?cmpid=bacityflyer_kamaribeach', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/santorini/kamari-beach.jpg'},{position : {lat: -18.53368614, lng: -3.33984375}, content : 'Head to the family-run Taverna Aeolos to dine on fresh seafood with the locals', articleTitle : 'Eat some delicious seafood', articleURL : 'https://www.standard.co.uk/lifestyle/travel/a-wellnesslovers-guide-to-ibiza-a3776721.html?cmpid=bacityflyer_traditionaltaverna', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/santorini/taverna-aeolos.jpg'},{position : {lat: 22.87744046, lng: -9.31640625}, content : 'The ruins are a popular spot for tourists wanting to capture the perfect shot of a stunning Santorini sunset', articleTitle : 'Take a snap from a Byzantine Castle', articleURL : 'https://www.standard.co.uk/lifestyle/travel/a-wellnesslovers-guide-to-ibiza-a3776721.html?cmpid=bacityflyer_sunset', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/santorini/byzantine-castle.jpg'},{position : {lat: -22.60580239, lng: 1.40625}, content : 'Discovered in the late 19th century, the archaeological site of ancient Akrotiri is a fascinating insight into pre-historic Greece', articleTitle : 'See some volcanic ruins', articleURL : 'https://www.standard.co.uk/lifestyle/travel/a-wellnesslovers-guide-to-ibiza-a3776721.html?cmpid=bacityflyer_akrotiri', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/santorini/akrotiri.jpg'},{position : {lat: -7.811038138, lng: 13.62304688}, content : 'At Santo Wines Winery, you can experience an 18-glass wine flight while gazing out from the cliffs of Pyrgos', articleTitle : 'Sip fine wine with a view', articleURL : 'https://www.standard.co.uk/lifestyle/travel/a-wellnesslovers-guide-to-ibiza-a3776721.html?cmpid=bacityflyer_wineflight', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/santorini/santo-wines.jpg'},{position : {lat: 4.434044005, lng: 11.68945313}, content : 'Take the picturesque route from Fira to Oia to wind through some beautiful towns and get your heart racing', articleTitle : 'Go on a scenic hike', articleURL : 'https://www.standard.co.uk/lifestyle/travel/a-wellnesslovers-guide-to-ibiza-a3776721.html?cmpid=bacityflyer_firatooia', articleImage : 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/images-locations/santorini/fira-to-oia-hike.jpg'}
	  ];
	
		  
		  
	// Declare Global Variable
	var repeatOnXAxis = true; // Do we need to repeat the image on the X-axis? Most likely you'll want to set this to false

     	
	var image;
	var markers = [];
	var map;
	var infowindow;
	var markersGreece = [];
	var markersSkiathos = [];
	var markersMykonos = [];
	var markersSantorini = [];
		 
		
		
		
		/**
       * The CenterControl adds a control to the map that recenters the map.
       * This constructor takes the control DIV as an argument.
       * @constructor
       */
    /*  function CenterControl(controlDiv, map) {

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,0.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '11px';
        controlUI.style.textAlign = 'center';
		controlUI.style.margin = '10px';
        controlUI.title = 'Click to recentre the map';
        controlDiv.appendChild(controlUI);
	

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.color = '#676767';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '12px';
        controlText.style.lineHeight = '20px';
        controlText.style.paddingLeft = '5px';
		controlText.style.paddingTop = '1px';
        controlText.style.paddingRight = '5px';
		controlText.classList = 'btnRecentre';
        controlText.innerHTML = '<div class="btn-recentre-icon" style="width: 15px;height: 15px;display: block;vertical-align: middle;top: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-centre.png);background-size: 33px 15px;"></div><span style="margin-left: 18px;">Recentre</span>';
        controlUI.appendChild(controlText);
		  
		
		 
		  
        // Setup the click event listeners: simply set the map to Chicago.
        controlUI.addEventListener('click', function() {
			
			if ($(window).width() < 620) {
				var czoom = 2;
				var initialViewLat = 0;
				var initialViewLng = 0;
			}
			else {
				var czoom = 3;
				var initialViewLat = 0;
				var initialViewLng = 2;
			}
			  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
				map.setZoom(czoom);
				map.setCenter(vc);
        });

      }*/
		  
		  
		  
function CenterControlGreece(controlDivX, map) {

  // Set CSS for the control border.
  var controlUIx = document.createElement('div');
  controlUIx.id = 'backToGreece';
  controlUIx.style.backgroundColor = '#fff';
  controlUIx.style.border = '2px solid #fff';
  controlUIx.style.borderRadius = '3px';
  controlUIx.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,0.3)';
  controlUIx.style.cursor = 'pointer';
  controlUIx.style.marginBottom = '11px';
  controlUIx.style.textAlign = 'center';
  controlUIx.style.margin = '10px';
  controlUIx.title = 'Click to recentre the map';
  controlDivX.appendChild(controlUIx);

  // Set CSS for the control interior.
  var controlTextx = document.createElement('div');
  controlTextx.style.color = '#676767';
  controlTextx.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlTextx.style.fontSize = '12px';
  controlTextx.style.lineHeight = '20px';
  controlTextx.style.paddingLeft = '5px';
  controlTextx.style.paddingTop = '1px';
  controlTextx.style.paddingRight = '5px';
  controlTextx.innerHTML = '<div class="btn-back-to-greece-icon" style="width: 15px;height: 15px;display: block;vertical-align: middle;top: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-back-to-greece.png);background-size: 33px 15px;"></div><span style="margin-left: 18px;">Back to Greece</span>';
  controlUIx.appendChild(controlTextx);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUIx.addEventListener('click', function() {
    map.setMapTypeId('baGreece');
	  	
	if ($(window).width() < 620) {
		  	var czoom = 2;
			var initialViewLat = -10;
			var initialViewLng = 3;
		}
		else {
		   	var czoom = 3;
			var initialViewLat = -16;
			var initialViewLng = 0;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
		setTimeout(greeceMarkers, 300);	
	  
	  clearMarkers();
	  $('#backToGreece').fadeOut(300);
	  $('#backToMykonos-fromSantorini').fadeOut(300);
	  $('#backToMykonos-fromSkiathos').fadeOut(300);
	  $('#backToSantorini').fadeOut(300);
	  $('#backToSkiathos').fadeOut(300);
	  	$('#recenterGreece').show();
		$('#recenterSkiathos').hide();
		$('#recenterMykonos').hide();
		$('#recenterSantorini').hide();
          	
  });

}
function CenterControlSk(controlDivM, map) {

  // Set CSS for the control border.
  var controlUIm = document.createElement('div');
  controlUIm.id = 'backToSkiathos';
  controlUIm.style.backgroundColor = '#fff';
  controlUIm.style.border = '2px solid #fff';
  controlUIm.style.borderRadius = '3px';
  controlUIm.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,0.3)';
  controlUIm.style.cursor = 'pointer';
  controlUIm.style.marginBottom = '11px';
  controlUIm.style.textAlign = 'center';
  controlUIm.style.margin = '10px';
  controlUIm.title = 'Click to recentre the map';
  controlDivM.appendChild(controlUIm);

  // Set CSS for the control interior.
  var controlTextM = document.createElement('div');
  controlTextM.style.color = '#676767';
  controlTextM.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlTextM.style.fontSize = '12px';
  controlTextM.style.lineHeight = '20px';
  controlTextM.style.paddingLeft = '5px';
  controlTextM.style.paddingTop = '1px';
  controlTextM.style.paddingRight = '5px';
  controlTextM.innerHTML = '<div class="btn-back-to-greece-icon" style="width: 15px;height: 15px;display: block;vertical-align: middle;top: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-left.png);background-size: 33px 15px;"></div><span style="margin-left: 18px;">Skiathos</span>';
  controlUIm.appendChild(controlTextM);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUIm.addEventListener('click', function() {
    map.setMapTypeId('baGreeceSkiathos');
	$('#backToSkiathos').fadeOut(300);
	$('#backToMykonos-fromSantorini').fadeOut(300);
	$('#backToMykonos-fromSkiathos').fadeIn(300);
	$('#backToSantorini').fadeIn(300);
	$('#backToGreece').fadeIn(300);
	  if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 9;
			var initialViewLng = 0;
		}
		else {
		   	var czoom = 4;
			var initialViewLat = 7;
			var initialViewLng = 0;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
	  $('#recenterGreece').hide();
		$('#recenterSkiathos').show();
		$('#recenterMykonos').hide();
		$('#recenterSantorini').hide();
	  
	  clearMarkers();
	  setTimeout(dropSkiathos, 300);
	  $('#backToGreece').fadeIn(300);
          	
  });

}
function CenterControlMykonos(controlDivMykonos, map) {

  // Set CSS for the control border.
  var controlUIi = document.createElement('div');
  controlUIi.id = 'backToMykonos-fromSantorini';
  controlUIi.style.backgroundColor = '#fff';
  controlUIi.style.border = '2px solid #fff';
  controlUIi.style.borderRadius = '3px';
  controlUIi.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,0.3)';
  controlUIi.style.cursor = 'pointer';
  controlUIi.style.marginBottom = '11px';
  controlUIi.style.textAlign = 'center';
  controlUIi.style.margin = '10px 10px -5px';
  controlUIi.title = 'Click to recentre the map';
  controlDivMykonos.appendChild(controlUIi);

  // Set CSS for the control interior.
  var controlTextI = document.createElement('div');
  controlTextI.style.color = '#676767';
  controlTextI.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlTextI.style.fontSize = '12px';
  controlTextI.style.lineHeight = '20px';
  controlTextI.style.paddingLeft = '5px';
  controlTextI.style.paddingTop = '1px';
  controlTextI.style.paddingRight = '5px';
  controlTextI.innerHTML = '<div class="btn-back-to-greece-icon" style="width: 15px;height: 15px;display: block;vertical-align: middle;top: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-left.png);background-size: 33px 15px;"></div><span style="margin-left: 18px;">Mykonos</span>';
  controlUIi.appendChild(controlTextI);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUIi.addEventListener('click', function() {
    map.setMapTypeId('baGreeceMykonos');
	$('#backToMykonos-fromSantorini').fadeOut(300);
	$('#backToSantorini').fadeIn(300);
	$('#backToGreece').fadeIn(300);
	  if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 0;
			var initialViewLng = 5;
		}
		else {
		   	var czoom = 4;
			var initialViewLat = 0;
			var initialViewLng = 2;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
	  
	  clearMarkers();
	  setTimeout(dropMykonos, 300);
	  
	  $('#recenterGreece').hide();
		$('#recenterSkiathos').hide();
		$('#recenterMykonos').show();
		$('#recenterSantorini').hide();
	  $('#backToGreece').fadeIn(300);
          	
  });

}
function CenterControlSantorini(controlDivSantorini, map) {

  // Set CSS for the control border.
  var controlUIp = document.createElement('div');
  controlUIp.id = 'backToSantorini';
  controlUIp.style.backgroundColor = '#fff';
  controlUIp.style.border = '2px solid #fff';
  controlUIp.style.borderRadius = '3px';
  controlUIp.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,0.3)';
  controlUIp.style.cursor = 'pointer';
  controlUIp.style.marginBottom = '11px';
  controlUIp.style.textAlign = 'center';
  controlUIp.style.margin = '10px 10px 20px';
  controlUIp.title = 'Click to recentre the map';
  controlDivSantorini.appendChild(controlUIp);

  // Set CSS for the control interior.
  var controlTextP = document.createElement('div');
  controlTextP.style.color = '#676767';
  controlTextP.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlTextP.style.fontSize = '12px';
  controlTextP.style.lineHeight = '20px';
  controlTextP.style.paddingLeft = '5px';
  controlTextP.style.paddingTop = '1px';
  controlTextP.style.paddingRight = '5px';
  controlTextP.innerHTML = '<span style="margin-right: 18px;">Santorini</span><div class="btn-back-to-palma" style="width: 15px;height: 15px;right: 15px;display: block;vertical-align: middle;top: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-right.png);background-size: 33px 15px;"></div>';
  controlUIp.appendChild(controlTextP);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUIp.addEventListener('click', function() {
    map.setMapTypeId('baGreeceSantorini');
	$('#backToMykonos-fromSantorini').fadeIn(300);
	$('#backToMykonos-fromSkiathos').fadeOut(300);
	$('#backToSantorini').fadeOut(300);
	$('#backToSkiathos').fadeIn(300);
	$('#backToGreece').fadeIn(300);
	  if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 0;
			var initialViewLng = 10;
		}
		else {
		   	var czoom = 3;
			var initialViewLat = -5;
			var initialViewLng = 5;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
	  
	  clearMarkers();
	  setTimeout(dropSantorini, 300);
	  $('#recenterGreece').hide();
		$('#recenterSkiathos').hide();
		$('#recenterMykonos').hide();
		$('#recenterSantorini').show();

	  $('#backToGreece').fadeIn(300);
          	
  });

}
function CenterControlMykonosII(controlDivMykonosII, map) {

  // Set CSS for the control border.
  var controlUIii = document.createElement('div');
  controlUIii.id = 'backToMykonos-fromSkiathos';
  controlUIii.style.backgroundColor = '#fff';
  controlUIii.style.border = '2px solid #fff';
  controlUIii.style.borderRadius = '3px';
  controlUIii.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,0.3)';
  controlUIii.style.cursor = 'pointer';
  controlUIii.style.marginBottom = '11px';
  controlUIii.style.textAlign = 'center';
  controlUIii.style.margin = '10px 10px -5px';
  controlUIii.title = 'Click to recentre the map';
  controlDivMykonosII.appendChild(controlUIii);

  // Set CSS for the control interior.
  var controlTextIi = document.createElement('div');
  controlTextIi.style.color = '#676767';
  controlTextIi.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlTextIi.style.fontSize = '12px';
  controlTextIi.style.lineHeight = '20px';
  controlTextIi.style.paddingLeft = '5px';
  controlTextIi.style.paddingTop = '1px';
  controlTextIi.style.paddingRight = '5px';
  controlTextIi.innerHTML = '<div class="btn-back-to-greece-icon" style="width: 15px;height: 15px;display: block;vertical-align: middle;top: 15px; right: 15px;position: absolute;background-repeat: no-repeat;background: url(http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/icon-right.png);background-size: 33px 15px;"></div><span style="margin-right: 18px;">Mykonos</span>';
  controlUIii.appendChild(controlTextIi);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUIii.addEventListener('click', function() {
    map.setMapTypeId('baGreeceMykonos');
	$('#backToMykonos-fromSantorini').fadeOut(300);
	$('#backToMykonos-fromSkiathos').fadeOut(300);
	$('#backToSantorini').fadeIn(300);
	$('#backToSkiathos').fadeIn(300);
	$('#backToGreece').fadeIn(300);
	  if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 0;
			var initialViewLng = 5;
		}
		else {
		   	var czoom = 4;
			var initialViewLat = 0;
			var initialViewLng = 2;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
	  
	  clearMarkers();
	  setTimeout(dropMykonos, 300);
	  
	  $('#recenterGreece').hide();
		$('#recenterSkiathos').hide();
		$('#recenterMykonos').show();
		$('#recenterSantorini').hide();
	  
	  $('#backToGreece').fadeIn(300);
          	
  });

}
	  
		  
		  
		
		if ($(window).width() < 620) {
		  	var xzoom = 2;
			var latA = -10;
			var lngB = 3;
		}
		else {
		   	var xzoom = 3;
			var latA = -16;
			var lngB = 0;
		}

    function initMap() {
		
		
   		map = new google.maps.Map(document.getElementById('map'), {
		center: new google.maps.LatLng(latA, lngB),
		zoom: xzoom,
		minZoom: 2,
		maxZoom: 5,
		backgroundColor: '#e7e5dc',
		streetViewControl: false,
		fullscreenControl: false,
		gestureHandling: 'cooperative',
		mapTypeControl: false,
		mapTypeControlOptions: {
				mapTypeIds: ['baGreeceMykonos', 'baGreeceSkiathos', 'baGreecePlama', 'baGreece']
          	},
		zoomControl: true,
		zoomControlOptions: {
				position: google.maps.ControlPosition.RIGHT_CENTER
			},
        });
		
		
		greeceMarkers();
		
		
		$('#recenterGreece').show();
		$('#recenterSkiathos').hide();
		$('#recenterMykonos').hide();
		$('#recenterSantorini').hide();
		
		
	// Initialization Google Map Temp Infowindow
	  infowindow = new google.maps.InfoWindow({
		content: "Initializing...",
		  maxWidth: 200,
	  });
		
		
		
	var baGreeceSkiathosMapType = new google.maps.ImageMapType({
		  getTileUrl: function(coord, zoom) {
			 var normalizedCoord = getNormalizedCoord(coord, zoom);
			 if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
				return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/skiathos/' + zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
			} else {
				return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/skiathos/empty.jpg';
			}
			  
			  var bound = Math.pow(2, zoom);
			  return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/skiathos' +
				  '/' + zoom + '_' + normalizedCoord.x + '_' +
				  (bound - normalizedCoord.y - 1) + '.jpg';
		  },
		  tileSize: new google.maps.Size(256, 256),
		  maxZoom: 5,
		  minZoom: 3,
		  //radius: 1738000,
		  name: 'BA Skiathos Map'
	});


	map.mapTypes.set('baGreeceSkiathos', baGreeceSkiathosMapType);
	map.setMapTypeId('baGreeceSkiathos');
		
	  var baGreeceMykonosMapType = new google.maps.ImageMapType({
		  getTileUrl: function(coord, zoom) {
			 var normalizedCoord = getNormalizedCoord(coord, zoom);
			 if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
				return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/mykonos/' + zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
			} else {
				return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/mykonos/empty.jpg';
			}
			  
			  var bound = Math.pow(2, zoom);
			  return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/mykonos' +
				  '/' + zoom + '_' + normalizedCoord.x + '_' +
				  (bound - normalizedCoord.y - 1) + '.jpg';
		  },
		  tileSize: new google.maps.Size(256, 256),
		  maxZoom: 5,
		  minZoom: 3,
		  //radius: 1738000,
		  name: 'BA Mykonos Map'
	});


	map.mapTypes.set('baGreeceMykonos', baGreeceMykonosMapType);
	map.setMapTypeId('baGreeceMykonos');
		
		var baGreeceSantoriniMapType = new google.maps.ImageMapType({
		  getTileUrl: function(coord, zoom) {
			 var normalizedCoord = getNormalizedCoord(coord, zoom);
			 if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
				return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/santorini/' + zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
			} else {
				return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/santorini/empty.jpg';
			}
			  
			  var bound = Math.pow(2, zoom);
			  return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/santorini' +
				  '/' + zoom + '_' + normalizedCoord.x + '_' +
				  (bound - normalizedCoord.y - 1) + '.jpg';
		  },
		  tileSize: new google.maps.Size(256, 256),
		  maxZoom: 4,
		  minZoom: 3,
		  //radius: 1738000,
		  name: 'BA Santorini Map'
	});


	map.mapTypes.set('baGreeceSantorini', baGreeceSantoriniMapType);
	map.setMapTypeId('baGreeceSantorini');
		
		
		var baGreeceMapType = new google.maps.ImageMapType({
		  getTileUrl: function(coord, zoom) {
			 var normalizedCoord = getNormalizedCoord(coord, zoom);
			 if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
				return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/greece/' + zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
			} else {
				return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/greece/empty.jpg';
			}
			  
			  var bound = Math.pow(2, zoom);
			  return 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/greece' +
				  '/' + zoom + '_' + normalizedCoord.x + '_' +
				  (bound - normalizedCoord.y - 1) + '.jpg';
		  },
		  tileSize: new google.maps.Size(256, 256),
		  maxZoom: 4,
		  minZoom: 2,
		  //radius: 1738000,
		  name: 'BA Greece Map'
	});


	map.mapTypes.set('baGreece', baGreeceMapType);
	map.setMapTypeId('baGreece');
		
		
	
/*
		
		// Create the DIV to hold the control and call the CenterControl()
        // constructor passing in this DIV.
        var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
		
		*/
		//Back to greece
		var centerControlDivX = document.createElement('div');
  		var centerControlX = new CenterControlGreece(centerControlDivX, map);

  		centerControlDivX.index = 1;
  		map.controls[google.maps.ControlPosition.TOP_LEFT].push(centerControlDivX);
		//Go to Skiathos
		var centerControlDivM = document.createElement('div');
  		var centerControlM = new CenterControlSk(centerControlDivM, map);

  		centerControlDivM.index = 1;
  		map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(centerControlDivM);
		//Go to Mykonos
		var centerControlDivI = document.createElement('div');
  		var centerControlI = new CenterControlMykonos(centerControlDivI, map);

  		centerControlDivI.index = 1;
  		map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(centerControlDivI);
		
		
		//Go to Santorini
		var centerControlDivP = document.createElement('div');
  		var centerControlP = new CenterControlSantorini(centerControlDivP, map);

  		centerControlDivP.index = 1;
  		map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(centerControlDivP);
		
		//Go to Mykonos
		var centerControlDivIi = document.createElement('div');
  		var centerControlIi = new CenterControlMykonosII(centerControlDivIi, map);

  		centerControlDivIi.index = 1;
  		map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(centerControlDivIi);
		
		//
		
		
			google.maps.event.addListener(map, 'drag', function() { // Add listener on click to marker
				$('#floating-panel-text').fadeOut(300);
			});	
			google.maps.event.addListener(map, 'zoom_changed', function() { // Add listener on click to marker
				$('#floating-panel-text').fadeOut(300);
			});	
			google.maps.event.addListener(map, 'click', function() {
				 infowindow.close();
				var xdt = map.getMapTypeId();
				if(xdt == 'baGreece'){
				   	$('#backToGreece').fadeOut(300);
				   } else {
				   	$('#backToGreece').fadeIn(300);
				   }
				$('#floating-panel-text').fadeOut(300);
				$('.btnRecentre').parent().fadeIn(300);
			});
		
		
	}
		  
		  
		  
		  

// Normalizes the coords that tiles repeat across the x axis (horizontally)
      // like the standard Google map tiles.
      function getNormalizedCoord(coord, zoom) {
		if (!repeatOnXAxis) return coord;
        var y = coord.y;
        var x = coord.x;

        // tile range in one direction range is dependent on zoom level
        // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
        var tileRange = 1 << zoom;

        // don't repeat across y-axis (vertically)
        if (y < 0 || y >= tileRange) {
          return null;
        }

        // repeat across x-axis
        if (x < 0 || x >= tileRange) {
			x = (x % tileRange + tileRange) % tileRange;
		}

        return {x: x, y: y};
      }
		  
		  
		  
		
      // Auto Execute dropMykonos() for markers
		window.onload = function() {
			
			//myvar = setTimeout (dropMykonos, 1000);
		}
		
	function dropMykonos() {
        for (var i = 0; i < neighborhoodsmykonos.length; i++) {
          addMarkerWithTimeout(neighborhoodsmykonos[i].position,neighborhoodsmykonos[i], i * 400, neighborhoodsmykonos[i].articleImage, neighborhoodsmykonos[i].content, neighborhoodsmykonos[i].articleTitle, neighborhoodsmykonos[i].articleURL);
			
        }
      }
		  
	function dropSantorini() {
        for (var i = 0; i < neighborhoodssantorini.length; i++) {
          addMarkerWithTimeout(neighborhoodssantorini[i].position,neighborhoodssantorini[i], i * 400, neighborhoodssantorini[i].articleImage, neighborhoodssantorini[i].content, neighborhoodssantorini[i].articleTitle, neighborhoodssantorini[i].articleURL);
			
        }
      }
	function dropSkiathos() {
        for (var i = 0; i < neighborhoodsskiathos.length; i++) {
          addMarkerWithTimeout(neighborhoodsskiathos[i].position,neighborhoodsskiathos[i], i * 400, neighborhoodsskiathos[i].articleImage, neighborhoodsskiathos[i].content, neighborhoodsskiathos[i].articleTitle, neighborhoodsskiathos[i].articleURL);
			
        }
      }
		

      // Function Plot Market with animation
		function addMarkerWithTimeout(position, image, timeout, articleImage, content, articleTitle, articleURL) {
		  	var marker;
		  
			if (articleTitle == '') {
				var aTitle = '';
			} else {
				var aTitle = '<h2>' + articleTitle + '</h2>';
			}
			
			if (content == '') {
				var cContent = '';
			} else {
				var cContent = '<p class="infoContent">' + content + '</p>';
			}
			
			if (articleImage == '') {
				var aImage = '';
				var videoIcon = '';
				var btn = '';
			} else {
				var aImage = '<a class="imglink" href="' + articleURL + '" target="_parent" ><img src="' + articleImage + '" alt="" style="width: 100%; height: auto;"></a>';
				//var videoIcon = '<div class="vf-video-icon" style="position: absolute; width: 60px; height: 60px; top: 4px; left: -2px; z-index: 999;"><a class="imglink" href="' + articleURL + '" target="_parent" style="display:block;"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"><style type="text/css">	.st0{fill:#EC1A2E;}	.st1{fill:#FFFFFF;}</style><g>	<ellipse class="st0" cx="24.9" cy="24.9" rx="19.1" ry="18.4"/></g><g>	<path class="st1" d="M20,16.9v16l13.4-8L20,16.9z"/></g></svg></a></div>';
				//var btn = '<a class="btnlink" href="' + articleURL + '" target="_parent" >Read more</a>';
			}
			
			
			
			
			
			
			
			
		var theIcon = {

			path: "M19.9,11.9c-1.1,8.7-4.8,13.4-8,19.8c-0.8,1.7-1.8,3.2-2.9,5.3c-0.7-0.8-4.1-8.4-5.3-11.6C2,20.8,0.5,16.1,0.1,11.2			C-0.2,8,0.5,5.3,2.9,2.9c3-2.8,6.4-3.5,10-2.5C16.7,1.5,20.6,6.8,19.9,11.9z M14.3,9.9c0-2.1-1.6-3.7-3.8-3.8 c-1.8,0-3.7,2.1-3.8,4.1c0,2.5,1.7,4.6,3.9,4.7C12.9,15,14.2,13.2,14.3,9.9z",
			fillColor: '#d33820',
			fillOpacity: 1,
			anchor: new google.maps.Point(8,35),
			strokeWeight: 0.8,
			strokeColor: "#fff",
			scale: 0.9
		}
			
	
			

			
			
			google.maps.event.addListener(infowindow, 'domready', function() {

			// Reference to the DIV that wraps the bottom of infowindow
			var iwOuter = $('.gm-style-iw');

			/* Since this div is in a position prior to .gm-div style-iw.
			 * We use jQuery and create a iwBackground variable,
			 * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
			*/
			var iwBackground = iwOuter.prev();
			// Reference to the div that groups the close button elements.
			var iwCloseBtn = iwOuter.next();

			// Apply the desired effect to the close button
			iwCloseBtn.css({opacity: '1'});
			iwCloseBtn.addClass('closeContainer');

			var closeBtnX = $('.closeContainer img');
				closeBtnX.attr('src', 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/close-btn.png');
				closeBtnX.css({width: '30px;', height: '30px;'});
			// If the content of infowindow not exceed the set maximum height, then the gradient is removed.
			if($('.iw-content').height() < 300){
			  $('.iw-bottom-gradient').css({display: 'none !important'});
			}

			// The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
			iwCloseBtn.mouseout(function(){
			  $(this).css({opacity: '1'});
			});
		  });
			
			
			
			
		  window.setTimeout(function() {
				marker = new google.maps.Marker({
				optimized: false,
			  	position: position,
				clickable: true,
			  	map: map,
			  	icon: theIcon
			});
			  
			google.maps.event.addListener(map, 'drag', function() { // Add listener on click to marker
				$('#floating-panel-text').fadeOut(300);
			});	
			  google.maps.event.addListener(map, 'zoom_changed', function() { // Add listener on click to marker
				$('#floating-panel-text').fadeOut(300);
				infowindow.close();
				  $('.btnRecentre').parent().fadeIn(300);
			});	
			  
			  $('.btnRecentre').click(function(){
					 infowindow.close();
				});
			google.maps.event.addListener(marker, 'click', function() { // Add listener on click to marker
			  	
			  	infowindow.setContent('<div class="iw-content">' +aImage + aTitle + cContent + '<a class="btnlink" href="' + articleURL + '" target="_parent">Read more</a></div>'); // Set Content to Infowindow
				setTimeout(function(){infowindow.open(map, marker)},100); // Show Infowindow 
				$('#floating-panel-text').fadeOut(300);
				$('.btnRecentre').parent().fadeOut(300);
				$('#backToGreece').fadeOut(300);
			});
			google.maps.event.addListener(infowindow, 'closeclick', function() {
				 $('.btnRecentre').parent().fadeIn(300);
				$('#backToGreece').fadeIn(300);
			});
			
			markers.push(marker);
		  });
		}
		
		 
		  
		 
		  function greeceMarkers() {
			  var markerClusterer = {
			
			anchor: new google.maps.Point(25, 20),
			scaledSize: new google.maps.Size(50, 50),
			//size: new google.maps.Size(50, 50),
			//scale: 3,
			url: 'http://assets.esimedia.co.uk/web/ba-city-flyer/greece/map/icons/marker-clusterer.svg'
		};
		var markerGreeceSkiathos = new google.maps.Marker({
          position: {lat: 8.841651120809145, lng: 4.74609375},
          map: map,
			icon: markerClusterer,
			label: {text: '6', color: '#fff', fontSize: '18px'},
          title: 'Click to view Skiathos',
			zIndex: 8
        });
		var markerGreeceMykonos = new google.maps.Marker({
          position: {lat: -28.92163128242129, lng: 39.55078125},
          map: map,
			icon: markerClusterer,
			label: {text: '6', color: '#fff', fontSize: '18px'},
          title: 'Click to view Mykonos',
			zIndex: 9
        });
		var markerGreeceSantorini = new google.maps.Marker({
          	position: {lat: -47.4578085307503, lng: 40.60546875},
          	map: map,
			icon: markerClusterer,
			label: {text: '6', color: '#fff', fontSize: '18px'},
          	title: 'Click to view Santorini',
			zIndex: 10
        });
			  
		markerGreeceSkiathos.addListener('click', function() {
			map.setCenter(new google.maps.LatLng(8.841651120809145, 4.74609375));
			map.setZoom(4);
			setTimeout(function(){
			$('#recenterGreece').hide();
			$('#recenterSkiathos').show();
			$('#recenterMykonos').hide();
			$('#recenterSantorini').hide();
			$('#floating-panel-text').fadeOut(300);
			markerGreeceSkiathos.setMap(null);
          	markerGreeceMykonos.setMap(null);
			markerGreeceSantorini.setMap(null);
			$('#backToGreece').fadeIn(300);
			$('#backToSantorini').fadeIn(300);
			$('#backToMykonos-fromSkiathos').fadeIn(300);
			map.setMapTypeId('baGreeceSkiathos');
			
			if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 9;
			var initialViewLng = 0;
		}
		else {
		   	var czoom = 4;
			var initialViewLat = 7;
			var initialViewLng = 0;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
			myvar = setTimeout (dropSkiathos, 300);
				}, 500);
        });
		
	 
		markerGreeceMykonos.addListener('click', function() {
			map.setCenter(new google.maps.LatLng(-28.92163128242129, 39.55078125));
			map.setZoom(4);
			setTimeout(function(){
			$('#recenterGreece').hide();
			$('#recenterSkiathos').hide();
			$('#recenterMykonos').show();
			$('#recenterSantorini').hide();
			$('#floating-panel-text').fadeOut(300);
          	markerGreeceSkiathos.setMap(null);
          	markerGreeceMykonos.setMap(null);
			markerGreeceSantorini.setMap(null);
			$('#backToGreece').fadeIn(300);
			$('#backToSkiathos').fadeIn(300);
			$('#backToSantorini').fadeIn(300);
			map.setMapTypeId('baGreeceMykonos');
			
			
		if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 0;
			var initialViewLng = 5;
		}
		else {
		   	var czoom = 4;
			var initialViewLat = 0;
			var initialViewLng = 2;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
			myvar = setTimeout (dropMykonos, 300);
				}, 500);
        });
		markerGreeceSantorini.addListener('click', function() {
			map.setCenter(new google.maps.LatLng(-47.4578085307503, 40.60546875));
			map.setZoom(4);
			setTimeout(function(){
			map.setMapTypeId('baGreeceSantorini');
			$('#recenterGreece').hide();
			$('#recenterSkiathos').hide();
			$('#recenterMykonos').hide();
			$('#recenterSantorini').show();
			$('#floating-panel-text').fadeOut(300);
          	markerGreeceSkiathos.setMap(null);
          	markerGreeceMykonos.setMap(null);
			markerGreeceSantorini.setMap(null);
			$('#backToGreece').fadeIn(300);
			$('#backToMykonos-fromSantorini').fadeIn(300);
			$('#backToSkiathos').fadeIn(300);
			
			
			if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 0;
			var initialViewLng = 10;
		}
		else {
		   	var czoom = 3;
			var initialViewLat = -5;
			var initialViewLng = 5;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
			myvar = setTimeout (dropSantorini, 300);
				}, 500);
        });
			  
			  google.maps.event.addListener(map, 'drag', function() { // Add listener on click to marker
				$('#floating-panel-text').fadeOut(300);
			});	
			   google.maps.event.addListener(map, 'click', function() { // Add listener on click to marker
				$('#floating-panel-text').fadeOut(300);
			});	
			  google.maps.event.addListener(map, 'zoom_changed', function() { // Add listener on click to marker
				$('#floating-panel-text').fadeOut(300);
				  $('.btnRecentre').parent().fadeIn(300);
			});	
		  }
		  
		   function clearMarkers() {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
        }
        markers = [];
      }
		  
		 function rGreece() {
			 if ($(window).width() < 620) {
		  	var czoom = 2;
			var initialViewLat = -10;
			var initialViewLng = 3;
		}
		else {
		   	var czoom = 3;
			var initialViewLat = -16;
			var initialViewLng = 0;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
		 }
		  
		  function rSkiathos() {
			if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 9;
			var initialViewLng = 0;
		}
		else {
		   	var czoom = 4;
			var initialViewLat = 7;
			var initialViewLng = 0;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc); 
		 }
		  
		  function rMykonos() {
			 if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 0;
			var initialViewLng = 5;
		}
		else {
		   	var czoom = 4;
			var initialViewLat = 0;
			var initialViewLng = 2;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
		 }
		  
		  function rSantorini() {
			 if ($(window).width() < 620) {
		  	var czoom = 3;
			var initialViewLat = 0;
			var initialViewLng = 10;
		}
		else {
		   	var czoom = 3;
			var initialViewLat = -5;
			var initialViewLng = 5;
		}
		  var vc = new google.maps.LatLng(initialViewLat, initialViewLng) ;
			map.setZoom(czoom);
          	map.setCenter(vc);
		 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js