We learn today how to Use google map as background html of your Webpage.

Some days ago client give me a project. In this project its new to me use Google map as background html of webpage. When I find out the solution of this problem there is no effective links about this tutorial. When I done this job and apply successfully use Google map as a background I wrote this tutorial for you.

There is a simple example in which embeds a Google map in the background. In this example behind a contact form use a Google map. You can zoom in and out and also turn on street view.

There are basically two layers on the page. One layer is used for display map and second layer is used for contact form. We use the z-index property of CSS. We apply higher z-index than Google maps. Now actual code here.


You May Also Like:


HTML

There are two div elements

The map add inside the element with ID #googlemaps while everything that you add inside #contactform will show up in your form.

	<div id="googlemaps"></div>
<div id="contactform">
<!-- You can even embed a Google Form here -->
</div>

CSS

  • #googlemaps element have height and width of page
  • #contactform has a fixed width. Yoy can also change the opacity level of #contactform to make your forms slightly transparent.
#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;
}

 JavaScript

Find the latitude and longitude of your place and replace the co-ordinates in line #7. You can then copy-paste the modified JavaScript code in the footer of your HTML page.

<!-- 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>

About The Author

Related Posts

Leave a Reply

Your email address will not be published.