Google Map as Web Page Background

This is a simple tutorial to learn how to put a google map in the background of your website or webpage without affecting the map’s interactivity.

google map as web page background


First visit

Search for the place you want to put as background, in the google map.

Click the link icon and copy the embed code. (See the image below)

google map as web page background

Paste the embed code in a notepad and remove the <small>...</small> tag.
(All the code inside of it)

Add the id map to the iframe.

Html Markup

Now insert this code in your webpage like below:

 <iframe id="map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=";source=s_q&amp;hl=en&amp;geocode=&amp;q=Valasaravakkam,+Chennai,+Tamil+Nadu,+India&amp;aq=0&amp;oq=valasaravakkam,+chennai,+&amp;sll=13.043889,80.1725&amp;sspn=0.049919,0.084543&amp;ie=UTF8&amp;hq=&amp;hnear=Valasaravakkam,+Chennai,+Tamil+Nadu,+India&amp;t=m&amp;z=14&amp;ll=13.043889,80.1725&amp;output=embed"></iframe>

 <div id="container">

We have included the embed code on top of a div with the id of container.

And inside of the container div, we should put all the code for the page. i.e This div is going to overlay the map.


Add the below necessary CSS code to your page:

body { padding: 0; margin: 0; }
#map { 
	width: 100%;
	z-index: 0;
	top: 0;
	left: 0;

	position: relative;
	z-index: 1;
	width: 800px;
	margin: 0 auto;


Now add the below javascript code, to set the height of the current window to the map:

window.onload = function(){
var heights = window.innerHeight;
document.getElementById("map").style.height = heights + "px";

This is it. Thank you! Keep sharing the post.

Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

2 comments on “Google Map as Web Page Background”

Leave a Reply

Your email address will not be published. Required fields are marked *