Code a custom Google Maps lightbox with Featherlight


Sam Goddard explains how the many Windows Of The World were given a view using Google Maps and a lightweight jQuery plugin



Introducing Featherlight

Windows Of The World utilises Nöel Bossart’s Featherlight lightbox ( to show the Google Maps content on click. The entire plugin weighs less than 6KB so it was ideal for this mobile-first responsive site. It also came with IFrame support built in, which was perfect for working with Google Maps and showing the ‘view’ outside each world window. Over the next few steps we’ll explain how you can achieve a similar technique!

Prepare the assets

The first step in using Featherlight.js is to include all the necessary plugin assets which are helpfully hosted on a Content Delivery Network (CDN), ready for you to make use of. Just simply include the CSS in the <head> and JavaScript before your page’s closing </body> tag as we have shown below in this code, or download the ZIP and check out the full plugin documentation over at Make sure that you add the latest jQuery library also:

001 <link href=""/>     
002 …    
003 <script src=""></script>                    
005 <script src="" type="text/javascript"></script>     
006 </body>    

Putting it into practice

Once attached to your page, the plugin fires on all elements that are using the ‘data-featherlight’ attribute. So it’s a simple case of assigning this to your chosen <a> anchor tags and creating a separate container with a matching id for the lightbox content. So here we’ve got a simple text link opening another <div> to illustrate what we’ve done:

001 <div class=”container”>         
003 <a href="#" data-featherlight="#the Lightbox">Click to open lightbox</a>    
004 <div id="theLightbox">This div will be opened inside a lightbox</div>    
006 </div>    

Keeping elements hidden

One of the things that you may have noticed at this point in our Google Maps workshop is that currently our target <div> is visible on our main page. The site works around this precisely by placing link and target element within a container <div>, and you can see that we have done this already in the previous step. By setting display to ‘none’ in a CSS selector class referencing container and element, the element only shows within the lightbox – and this will work exactly as we’ve desired it!

001 .container #theLightbox{     
002 display: none !important;    
003 }

Google Maps link

The next step was to find unique places for each country that we want to use in our project by searching for them and looking on Google Maps. This process was done very simply by going into Google Street View; just explore all the different areas until you find a good-looking location that suits the site you want to build. With your desired spot found, simply click the settings cog at the bottom right and then select the ‘embed image’ tab at the top. Grab this iframe embed code, before copying and pasting it right into your div. You can then set the width and height as desired (we’re using 900 x 500px) inline or via CSS:

001 <div id="theLightbox">         
003 <iframe src="!1m0!3m2!1sen!2suk!4v1434110416454!6m8!1m7!1sDznZta_zvxbaUqSrygOgLA!2m2!1d50.714728!2d-1.87489!3f0!    4f0!5f0.7820865974627469"
005 </div>

Override the overlay

Lastly you may wish to begin customising Featherlight’s default styles. A very simple yet effective amendment would be to change the background colour of the default overlay to match that of your company branding or to contrast perhaps with your site’s colour scheme. This would be achieved very simply by amending the RGB values below, with a hex code as a fallback for older browsers:

001 .featherlight {     
002 background: #000;    
003 background: rgba(0,0,0,0.5);
004 }