//copy and paste this code in your html page
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css" >
#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: 250px;
margin: 5px auto 0 770px;
padding: 5px;
background: coral;
height: auto;
opacity: .80; /*Set the opacity for a slightly transparent Google Form*/
color:white;
text-align:center ;
}
</style>
</head>
<body>
<div id="googlemaps"></div>
<div id="contactform">
<h2>NOIDA</h2>
<p style="font-family:Calibri;">
A-10 A, Sector – 68, Noida-201301,<br />
District – Gautam Budh Nagar,<br />
Uttar Pradesh, INDIA<br />
+91-120-6759600<br />
cylmktg@afflatusfravure.com<br />
</p>
</div>
</body>
</html>
<!--!-- 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 = [28.6046998, 77.3900557];
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 have to just change the co-ordinates
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css" >
#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: 250px;
margin: 5px auto 0 770px;
padding: 5px;
background: coral;
height: auto;
opacity: .80; /*Set the opacity for a slightly transparent Google Form*/
color:white;
text-align:center ;
}
</style>
</head>
<body>
<div id="googlemaps"></div>
<div id="contactform">
<h2>NOIDA</h2>
<p style="font-family:Calibri;">
A-10 A, Sector – 68, Noida-201301,<br />
District – Gautam Budh Nagar,<br />
Uttar Pradesh, INDIA<br />
+91-120-6759600<br />
cylmktg@afflatusfravure.com<br />
</p>
</div>
</body>
</html>
<!--!-- 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 = [28.6046998, 77.3900557];
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 have to just change the co-ordinates
