Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<html><head>
<meta charset="UTF-8">
<meta NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Google Analytics -->
<!-- End Google Analytics -->
    <title>Frida's Belgravia in Bloom</title>
	<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700" rel="stylesheet">
    <link href="http://assets.esimedia.co.uk/web/belgravia/style.css" rel="stylesheet">
</head>
<body style="background: #000;">
	<div id="floating-panel-text">
	  <h2>Simply <span id="clickDevice"></span> the flowers <img src="http://assets.esimedia.co.uk/web/belgravia/icons/marker.png" alt="" width="30" style="display:inline; position: relative;
    top: 4px;">  to discover Belgravia in Bloom</h2>
	</div>
    <div id="map">
		<span class="loading">loading tiles...</span>
	</div>
	
	<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgfsVxTGmxeqoH1QRV2sQU77scuW9QD5k&callback=initMap">
    </script>
	
    
</body>
</html>
              
            
!

CSS

              
                @charset "UTF-8";
/* CSS Document */

@font-face{font-family:"Standard Text";src:url(https://static.standard.co.uk/s3fs-public/font/StandardText-RegularWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/StandardText-RegularWEB.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Standard Text";src:url(https://static.standard.co.uk/s3fs-public/font/StandardText-ItalicWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/StandardText-ItalicWEB.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:"Standard Text";src:url(https://static.standard.co.uk/s3fs-public/font/StandardText-BoldWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/StandardText-BoldWEB.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Standard Text";src:url(https://static.standard.co.uk/s3fs-public/font/StandardText-BoldItalicWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/Standard-ExtraboldItalicWEB.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:"Standard Sans";font-weight:400;font-style:normal;src:url(https://static.standard.co.uk/s3fs-public/font/StandardSans-RegularWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/StandardSans-RegularWEB.woff) format("woff2")}@font-face{font-family:"Standard Sans";font-weight:400;font-style:normal;src:url(https://static.standard.co.uk/s3fs-public/font/StandardSans-RegularWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/StandardSans-RegularWEB.woff) format("woff")}@font-face{font-family:"Standard Sans";font-weight:500;font-style:normal;src:url(https://static.standard.co.uk/s3fs-public/font/StandardSans-MediumWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/StandardSans-MediumWEB.woff) format("woff")}@font-face{font-family:"Standard Sans";font-weight:700;font-style:normal;src:url(https://static.standard.co.uk/s3fs-public/font/StandardSans-BoldWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/StandardSans-BoldWEB.woff) format("woff")}@font-face{font-family:"Standard Sans";font-weight:900;font-style:normal;src:url(https://static.standard.co.uk/s3fs-public/font/StandardSans-ExtraboldWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/StandardSans-ExtraboldWEB.woff) format("woff")}@font-face{font-family:"Standard Sans";font-weight:300;font-style:normal;src:url(https://static.standard.co.uk/s3fs-public/font/StandardSans-LightWEB.woff2) format("woff2"),url(https://static.standard.co.uk/s3fs-public/font/StandardSans-LightWEB.woff) format("woff")}
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
h1, h2, h3, h4 {
	font-family: "Standard Text" !important;
	font-weight: 700 !important;
	margin-bottom: 0px !important;
	color:#FB35A4 !important;
}
#floating-panel-text h2 {
	color: #000 !important;
	margin-bottom: 0.84em !important;
	line-height: 21px;
}
p {
	font-family: "Standard Text" !important;
}
      #map {
        height: 100%;
		  max-width: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #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;
    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: 0px !important;
    font-family: 'Fira Sans', sans-serif;
    line-height: 23px;
    font-weight: 400;
    
}
		a.btnlink {
        background: #ed1b37;
    padding: 1px 6px 2px;
    border: 0;
    display: inline-block;
    color: #fff;
    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 {
    background-position-x: -18px !important;
}
		.btnRecentre:hover span {
    color: #000;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
		.gm-style-iw {
			
			    min-height: 200px !important;
    width: 251px !important;
    top: 0 !important;
    left: 1px !important;
    border-radius: 2px 2px 0 0;
		}
		
		.gmnoprint, .gmnoprint img  {
    cursor: pointer !important;
}
		.gm-style-iw {
			min-height: 200px !important;
		}
		
		.iw-content-inner {
    padding-left: 15px;
    padding-right: 15px;
}
		
		.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 #6ea4f4;
			background-color: #6ea4f4;
		}
		.closeContainer img {
			width: 19px !important;
			height: 19px !important;
			top: 2px !important;
			left: 2px !important;
		}
		
		.infoW:before {
        background-image: url(icons/flowers.png);
    background-size: 90px;
    content: ' ';
    width: 86px;
    height: 64px;
    z-index: 9999999;
    position: absolute;
    top: -30px;
    left: -34px;
		}
		.infoW:after {
            background-image: url(icons/flowers-2.png);
    background-size: 56px;
    content: ' ';
    width: 59px;
    height: 60px;
    z-index: 9999999;
    position: absolute;
    bottom: -20px;
    right: -14px;
		}
		
		.gm-style .gm-style-iw {
            background-color: #F9E1F2 !important;
           
         }  
		
		
		.infoW > div > div:nth-child(3) > div > div{
            background-color: #F9E1F2 !important;
            margin: 0;
            padding: 0;
            top: 0;
            
            
        }
		
		#virginLogo:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 1s; 
    /* When the animation is finished, start again */
    animation-iteration-count: infinite; 
	animation-timing-function: ease;
}
		


.loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shake {
    0% { transform:  rotate(0deg); }
    10% { transform:  rotate(-1deg); }
    20% { transform:  rotate(1deg); }
    30% { transform:  rotate(0deg); }
    40% { transform:  rotate(1deg); }
    50% { transform:  rotate(-1deg); }
    60% { transform:  rotate(0deg); }
    70% { transform: rotate(-1deg); }
    80% { transform:  rotate(1deg); }
    90% { transform:  rotate(0deg); }
    100% { transform:  rotate(-1deg); }
}
		
@media only screen and (max-width: 768px) {
			#floating-panel-compass img {
				max-width: 150px;
			}
		}
		@media only screen and (max-width: 599px) {
			#floating-panel-text {
				background: #fff !important;
				top: 2px !important;
				left:2px !important;
				width: calc(100% - 54px) !important;
			}
		}
		
		@media only screen and (max-width: 560px) {
			#floating-panel-compass img {
    			max-width: 100px;
			}
		}
			

              
            
!

JS

              
                // JavaScript Document

if ("ontouchstart" in document.documentElement) {
	$('#clickDevice').text("click on");
}
else {
	$('#clickDevice').text("hover over");
}

      // If you're adding a number of markers, you may want to drop 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: -63.312743192757544, lng: 58.18312380077805}, content : 'See artist Zabou’s mural of Frida Kahlo on the walls of Eccleston Yards, with a 3D floral display crafted by Moyses Stevens', articleTitle : 'Zabou Frida Kahlo Mural', articleImage : 'zabou-frida-kahlo-mural', markerTracking : 'Eccleston Yards'},{position : {lat: -64.3018804677631, lng: 45.83449098827805}, content : 'Visit Peggy Porschen Cakes to see the flower display as part of Belgravia in Bloom', articleTitle : 'Peggy Porschen Cakes', articleImage : 'peggy-porschen-cakes', markerTracking : 'Peggy Porschen Cakes'},{position : {lat: -68.75236369164536, lng: 34.54054567577805}, content : 'Bristol-based artist Eleanor Hardiman has designed some Mexican landscape-inspired window displays at Luke Irwin', articleTitle : 'Luke Irwin Rugs', articleImage : 'luke-irwin', markerTracking : 'Luke Irwin'},{position : {lat: -38.360098841446046, lng: 22.39013671875}, content : 'Visit Jumierah Lowndes to eat and sip your way to Mexico - including the Patron Perfect Margarita and Picante de la Casa', articleTitle : 'Jumeirah Lowndes Hotel', articleImage : 'jumeirah-lowndes-hotel', markerTracking : 'Jumeirah Lowndes Hotel'},{position : {lat: -66.00971373930817, lng: 48.36181640625}, content : 'Head to Dominique Ansel Bakery to enjoy a delicious treat while seeing the Belgravia in Bloom floral display', articleTitle : 'Dominique Ansel Bakery', articleImage : 'dominique-ansel-bakery', markerTracking : 'Dominique Ansel Bakery'},{position : {lat: -65.08204012190677, lng: 49.98779296875}, content : 'Try the Head Full of Flowers cocktail and Frida’s Mexican Flower Garden Plate, available throughout the exhibition run', articleTitle : 'The Jones Family Kitchen', articleImage : 'the-jones-family-kitchen', markerTracking : 'The Jones Family Kitchen'},{position : {lat: -49.36907200764755, lng: 29.20166015625}, content : 'Head to The Hari and sip on a Frida-inspired cocktail while enjoying a 3D floral display of the artist by Chic Flower Designs', articleTitle : 'The Hari', articleImage : 'the-hari', markerTracking : 'The Hari'},{position : {lat: -41.57446193399755, lng: 30.49757692577805}, content : 'Head to Frida’s Brow Bar in the Grace atrium for a range of threading and grooming treatments from £10', articleTitle : 'Grace Belgravia', articleImage : 'grace-belgravia', markerTracking : 'Grace Belgravia'},{position : {lat: -68.80059960932874, lng: 31.0693359375}, content : 'Savour the vibrant, fresh and fiery flavours of Mexico with a menu of limited-edition cocktails', articleTitle : 'The Orange Public House and Hotel', articleImage : 'the-orange-public-house-and-hotel', markerTracking : 'The Orange Public House and Hotel'},{position : {lat: -62.51303074147317, lng: 45.439453125}, content : ' An exclusive collection of handmade and one-off Frida-inspired jewellery featuring hand-painted flowers is available at VICKISARGE', articleTitle : 'VICKI SARGE', articleImage : 'vicki-sarge', markerTracking : 'VICKI SARGE'},{position : {lat: -35.8534396195918, lng: 31.3330078125}, content : 'If you miss out on Judith Blacklock’s floral headdress workshop at Frida’s Parlour, you can catch it at the flower school', articleTitle : 'Judith Blacklock Flower School', articleImage : 'judith-blacklock-flower-school', markerTracking : 'Judith Blacklock Flower School'},{position : {lat: -68.72044056989829, lng: 25.048828125}, content : 'Browse limited-edition Frida-inspired vessels crafted in collaboration with celebrated ceramic artist Marco Tullio Sivigli', articleTitle : 'FBC London', articleImage : 'fbc-london', markerTracking : 'FBC London'},{position : {lat: -41.47566020027822, lng: 24.4775390625}, content : 'Enjoy the floral flavours of Amaya with the violet crush cocktail, alongside flash-grilled rock oysters in coconut and ginger', articleTitle : 'Amaya', articleImage : 'amaya', markerTracking : 'Amaya'},{position : {lat: -65.07213008560696, lng: 46.7578125}, content : 'Choose from a range of Frida-inspired workshops, and make the most of the ultimate Instagram opportunity in the Wallpaper Room', articleTitle : 'Frida’s Parlour', articleImage : 'fridas-parlour', markerTracking : 'Frida’s Parlour'},{position : {lat: -30.864510226258346, lng: 46.8896484375}, content : 'An afternoon tea showcasing head pastry chef Gabriel Le Quang’s creations based on the vibrant colours of Frida Kahlo’s life', articleTitle : 'The Lanesborough', articleImage : 'the-lanesborough', markerTracking : 'The Lanesborough'}];

// Declare Global Variable
var repeatOnXAxis = false; // 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;
		
		
		
/**
* The CenterControl adds a control to the map that recenters the map on
* Chicago.
* This constructor takes the control DIV as an argument.
* @constructor
*/
function CenterControl(controlDiv, map) {
	"use strict";
	// 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(https://assets.esimedia.co.uk/web/belgravia/icons/icon-centre.png);background-size: 33px 15px;"></div><span style="margin-left: 18px;">Recentre</span>';
	controlUI.appendChild(controlText);

	var startZoomLevel = [];
	var minZoomLevel = [];
	var latA = [];
	var lngB = [];
	if ($(window).width() <= 559) {
		startZoomLevel = 2;
		minZoomLevel = 2;
		latA = -46;
		lngB = 48;
	}
	else if ($(window).width() < 1025 && $(window).width() > 559) {
		startZoomLevel = 3;
		minZoomLevel = 3;
		latA = -48;
		lngB = 48;
	} else if ($(window).width() >= 1025) {
		startZoomLevel = 3;
		minZoomLevel = 1;
		latA = -48;
		lngB = 48;
	}


	// Setup the click event listeners: simply set the map to Chicago.
	controlUI.addEventListener('click', function() {
		map.setZoom(startZoomLevel);
		map.setCenter(new google.maps.LatLng(latA, lngB));
	});

}
	
	var startZoomLevel = [];
	var minZoomLevel = [];
	var latA = [];
	var lngB = [];

if ($(window).width() <= 559) {
	 startZoomLevel = 2;
	 minZoomLevel = 2;
	 latA = -46;
	 lngB = 48;
}
else if ($(window).width() < 1025 && $(window).width() > 559) {
	 startZoomLevel = 3;
	 minZoomLevel = 3;
	 latA = -48;
	 lngB = 48;
} else if ($(window).width() >= 1025) {
	 startZoomLevel = 3;
	 minZoomLevel = 1;
	 latA = -48;
	 lngB = 48;
}

		  
		  
		  
		  
function initMap() {
	"use strict";
	map = new google.maps.Map(document.getElementById('map'), {
		center: new google.maps.LatLng(latA, lngB),
		zoom: startZoomLevel,
		minZoom: minZoomLevel,
		maxZoom: 4,
		backgroundColor: '#ffffff',
		streetViewControl: false,
		fullscreenControl: false,
		gestureHandling: 'cooperative',
		mapTypeControl: false,
		mapTypeControlOptions: {
			mapTypeIds: ['belgraviaFrida']
		},
		zoomControl: true,
		zoomControlOptions: {
			position: google.maps.ControlPosition.RIGHT_CENTER
		},
	});



	// Initialization Google Map Temp Infowindow
	infowindow = new google.maps.InfoWindow({
		content: "Initializing...",
		maxWidth: 200,
	});
	var belgraviaFridaMapType = 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 'https://assets.esimedia.co.uk/web/belgravia/map-tyles/' + zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
		} else {
			return 'https://assets.esimedia.co.uk/web/belgravia/map-tyles/empty.png';
		}

		var bound = Math.pow(2, zoom);
		return 'https://assets.esimedia.co.uk/web/belgravia/map-tyles' + '/' + zoom + '_' + normalizedCoord.x + '_' + (bound - normalizedCoord.y - 1) + '.jpg';
	},
		
	tileSize: new google.maps.Size(320, 320),
	maxZoom: 5,
	minZoom: 0,
	//radius: 1738000,
	name: 'Belgravia Frida Map'
	});

	map.mapTypes.set('belgraviaFrida', belgraviaFridaMapType);
	map.setMapTypeId('belgraviaFrida');


	// 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);
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
	"use strict";
	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 drop() for markers
window.onload = function() {
	"use strict";
	myvar = setTimeout (drop, 1000);
};

function drop() {
	"use strict";
	for (var i = 0; i < neighborhoods.length; i++) {
	  addMarkerWithTimeout(neighborhoods[i].position,neighborhoods[i], i * 400, neighborhoods[i].articleImage, neighborhoods[i].content, neighborhoods[i].articleTitle, neighborhoods[i].articleURL, neighborhoods[i].markerTracking);
	}
}

// Function Plot Market with animation
function addMarkerWithTimeout(position, image, timeout, articleImage, content, articleTitle, articleURL, markerTracking) {
	"use strict";
	var marker;
	var xread = [];
	var aTitle = [];
	var cContent = [];
	var aImage = [];
	var videoIcon = [];
	var btn = [];
	
	if (articleURL === 'https://www.virginholidays.co.uk/destinations/florida-holidays') {
		 xread =	 'Discover more';
	} else {
		 xread = 'Read more';
	}
	if (articleTitle === '') {
		 aTitle = '';
	} else {
		 aTitle = '<h2>' + articleTitle + '</h2>';
	}

	if (content === '') {
		 cContent = '';
	} else {
		 cContent = '<p class="infoContent">' + content + '</p>';
	}

	if (articleImage === '') {
		 aImage = '';
		 videoIcon = '';
		 btn = '';
	} else {
		 aImage = '<img src="https://assets.esimedia.co.uk/web/belgravia/images/' + articleImage + '.jpg" alt="" style="width: 100%; height: auto;">';
		//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="https://www.w3.org/2000/svg" xmlns:xlink="https://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>';
		 btn = '<a class="btnlink" href="' + articleURL + '" target="_parent" >' + xread + '</a>';
	}
			
									
	//var aUrl = '<a class="btnlink" href="' + articleURL + '" target="_parent">Read more</a>';									
	var theIcon =  new google.maps.MarkerImage('https://assets.esimedia.co.uk/web/belgravia/icons/marker.png', null, null, null, new google.maps.Size(35,35));
			
	
			

			
			
	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();

		// Removes background shadow DIV
		iwBackground.children(':nth-child(4)').css({'background-color' : '#F8E0F2'});

		// Removes white background DIV
		//iwBackground.children(':nth-child(2)').css({'display' : 'none'});

		// Moves the infowindow 115px to the right.
		iwOuter.parent().addClass('infoW');

		// 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/belgravia/icons/close-btn.png');

		closeBtnX.css({width: '30px;', height: '30px;', backgroundColor: '#6ea4f4'});

		// 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,
		animation: google.maps.Animation.DROP
		});

		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();
		});

		
		
		
		
		
		if ("ontouchstart" in document.documentElement) {
			google.maps.event.addListener(marker, 'click', function() { // Add listener on click to marker mouseover
				
				infowindow.open(map, marker); // Show Infowindow 
				infowindow.setContent('<div class="iw-content">' + aImage + '<div class="iw-content-inner">' + aTitle + cContent + '</div></div>'); // Set Content to Infowindow
				$('#floating-panel-text').fadeOut(300);
				$('.btnRecentre').parent().fadeOut(300);
			});
		}
		else {
			google.maps.event.addListener(marker, 'mouseover', function() { // Add listener on click to marker mouseover
				infowindow.open(map, marker); // Show Infowindow 
				infowindow.setContent('<div class="iw-content">' + aImage + '<div class="iw-content-inner">' + aTitle + cContent + '</div></div>'); // Set Content to Infowindow
				$('#floating-panel-text').fadeOut(300);
				$('.btnRecentre').parent().fadeOut(300);
			});
		}

		google.maps.event.addListener(infowindow, 'closeclick', function() {
			$('.btnRecentre').parent().fadeIn(300);	
		});

		google.maps.event.addListener(map, 'click', function() {
			infowindow.close();
			$('#floating-panel-text').fadeOut(300);
			$('.btnRecentre').parent().fadeIn(300);
		});
		markers.push(marker);
	}, timeout);
			
			
	// Restricting the bounds of your map
	if ($(window).height() > 1) {

		var allowedBounds = new google.maps.LatLngBounds(
		new google.maps.LatLng(-76.51681887717335, -30.234375), //Type the southwest corner of your desired extent/bounds here
		new google.maps.LatLng(57.89149735271008, 108.984375)   //Type the northeast corner of your desired extent/bounds here
		);


		var lastValidCenter = map.getCenter(); //This is just a variable that collects the center of the map each time you stop dragging the map with the mouse

		google.maps.event.addListener(map, 'center_changed', function() {
			if (allowedBounds.contains(map.getCenter())) {
				// i.e., if when you let go of the mouse, your map center is still within valid bounds you set above, save this position as the last valid center
				lastValidCenter = map.getCenter();
				return; 
			}

			// on the hand, if the center is no longer within your allowed bounds, then return it to the last valid position
			map.panTo(lastValidCenter);
		});	
	}
}


              
            
!
999px

Console