How To Embed Google Map into Responsive Website

How to embed Google Map into Responsive Website

I recently purchased a responsive web template but wanted to include a Google Map of the website business being promoted.  I wanted the Google Map to be responsive just like the site.  Here’s how to do it in a few steps.

Go to Google Maps and search for the business and position the map the way you want it (see image above).  To the left you will find a blue ‘share’ icon.  Click on the icon to reveal the panel below. Notice I selected the ‘Embed map’ tab at the top.  Again, position the business location as you wish it to appear  on your site. It works best to center your business. You will need the iframe source code as it appears so keep your Google Map open.

How to embed Google Map into responsive website.

Inset the  code below into your html editor where you wish the Google Map to appear on your webpage.  Copy and paste your own iframe code  into the blue section below (everything in blue starting with <iframe src+ to  </iframe>.

<style>
.google-maps {
position: relative;
padding-bottom: 50%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>

<div class=”google-maps”>
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d90515.6634804483!2d-77.28440024127889!3d44.84978387909846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cd309858e7f1fcd%3A0x5e130c5536ebcfba!2s45+Degrees+Latitude+Digital+Filming+%26+Production+Co.!5e0!3m2!1sen!2sca!4v1482010625602″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
</div>

Source: Thanks to Amit Agarwal for the code. http://www.labnol.org/internet/embed-responsive-google-maps/28333/ 

One other adjustment is the upper blue line of code which I set at 50%. This is the aspect ratio.  You can change this figure to your liking for example, if you wish to decrease the vertical dimension of the map, decrease the 50% to say, 40%.  If you wish a wish to increase the map’s vertical dimension increase this to 75% or so.  Tweak to your liking.

Viola!  That should do it. Check the map on a smartphone, tablet or desktop.  It should work perfectly.  Good luck!

About Ken

Ken Hook is a Partner with 45 Degrees Latitude Digital Filming & Production Co. He is a Videographer and an Apple Certified Professional Video Editor, FCPX. Versed in website development and SEO, Ken helps businesses combine video with the web.
This entry was posted in Getting Started, Tips and Tricks and tagged , , , , , , , , , , , , , , . Bookmark the permalink.