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

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
  2. https://maps.googleapis.com/maps/api/js?key=AIzaSyAgfsVxTGmxeqoH1QRV2sQU77scuW9QD5k&callback=initMap