How To Set Google Maps as Background for Webpage

Do you have a question “How To Set Google Maps as Background for Webpage” ? If your contact page in your website or blog shows a map as background wouldn’t that nice? Yes it is. It is possible and really easy. Don’t worry if you don’t have a blog or website. Here is a tutorial to help you to start a blog. I will share how you can use google map as your page background.

You can zoom in and out, drag to view closer, turn on street view if available and also change to satellite view in your page background. Basically there are two layers in this page. One is your contact page fields and another one is of course the Google Map.  Here is a sample screenshot of how it may look like.

Here we use the z-index property of CSS to define the stack order. The form has a higher z-index than Google Maps and thus the latter appears in the background.

Let’s move to coding part now.

HTML Part

We are using two div elements . One is having id as googlemap and another one is contactform. Our map will render inside the div with id as googlemap and all contents inside the contact form will be added into div with id contactform.

1 2 3 4

<div id="googlemaps"></div> <div id="contactform"> <!—If you want you can use google forms here --> </div>

Now we can do something with design part.

CSS Part

We have to add the google map to entire page. So that we are using height and width as 100%. But the contact form will have a width of fixed length. You can make your contact form little transparent by changing the opacity.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

#googlemaps { height: 100%; width: 100%; position:absolute; top: 0; left: 0; z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */ } #contactform { position: relative; z-index: 1; /* The z-index should be higher than Google Maps */ width: 300px; margin: 60px auto 0; padding: 10px; background: black; height: auto; opacity: .45; /* Set the opacity for a slightly transparent Google Form */ color: white; }

Let’s do some scripts now.

JavaScript Part

Now go to http://maps.google.com and find the latitude and longitude of your place which want to show in the map, and replace that co-ordinates in variable position (line #7).

Next step is really easy for you. Just copy below code and past it in your page (Add it in footer or bottom of page. It will help to load page more quickly).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<!-- Include the Google Maps API library - required for embedding maps --> <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> // The latitude and longitude of your business / place var position = [27.1959739, 78.02423269999997]; function showGoogleMaps() { var latLng = new google.maps.LatLng(position[0], position[1]); var mapOptions = { zoom: 16, // initialize zoom level - the max value is 21              streetViewControl: false, // hide the yellow Street View pegman scaleControl: true, // allow users to zoom the Google Map mapTypeId: google.maps.MapTypeId.ROADMAP, center: latLng }; map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions); // Show the default red marker at the location marker = new google.maps.Marker({ position: latLng, map: map, draggable: false, animation: google.maps.Animation.DROP }); } google.maps.event.addDomListener(window, 'load', showGoogleMaps); </script>

You can make contact form as per your needs. Use JQuery form submit your form without refreshing or loading entire page again

That’s all buddy. Now you are done. You can edit my codes as per your needs.

Thanks for reading. Please share your feed backs below. You can use this contact form if you want to contact me privately.