• +11 (019) 25184203
  • raid@mail.com
Page Banner

Map

Title Shape

  • contact info

  • 777 Seventh Road. Bonosri

    Rampura - Dhaka.

  • +11 (019) 25184203

    +11 (019) 25184203

  • domain@email.com

    mail@email.com


<div class="map-contact clearfix">
<div class="googleMap-info">
<div class="map-2" id="googleMap"></div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="main-contact-info">
<ul class="contact-info">
<li><h3>contact info</h3></li>
<li>
<i class="fa fa-map-marker"></i>
<div class="text">
<p>777 Seventh Road. Bonosri</p>
<p>Rampura - Dhaka.</p>
</div>
</li>
<li>
<i class="fa fa-phone"></i>
<div class="text">
<p>+11 (019) 25184203</p>
<p>+11 (019) 25184203</p>
</div>
</li>
<li>
<i class="fa fa-paper-plane-o"></i>
<div class="text">
<p>domain@email.com</p>
<p>mail@email.com</p>
</div>
</li>
<li>
<div class="social-share contact-social">
<ul class="clearfix">
<li><a href="#"><i class="fa fa-google"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>



#googleMap.map-2 {height: 500px;}
.contact-info li h3 {
    color: #1b1b1b;
    font-size: 22px;
    margin: 7px 0;
    text-transform: uppercase;
}
.contact-info > li {
    border-bottom: 1px solid #ddd;
    display: block;
    float: none;
    height: 95px;
    padding: 30px;
}
.contact-info {
    background: #fff none repeat scroll 0 0;
    bottom: -40px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.35);
    position: absolute;
    width: 400px;
}
.contact-info > li > i {
	color: #555;
	float: left;
	font-size: 16px;
	margin-right: 15px;
	margin-top: 12px;
}
.contact-info  li .text {overflow: hidden;}
.contact-info li .text p {color: #555;}
/* social-share */
.contact-social.social-share li a {
	margin-left: 60px;
	opacity: 1;
}
.contact-social.social-share li a i {
	color: #555;
	font-size: 22px;
	margin-right: 0;
}
.contact-social.social-share {
	margin-top: 0;
	position: inherit;
}
.contact-social ul {padding: 8px 0;}


		
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_Agsvf36du-7l_mp8iu1a-rXoKcWfs2I"></script>
<script>
	function initialize() {
		var mapOptions = {
		zoom: 14,
		zoom: 17,
		hue: '#E9E5DC',
		scrollwheel: false,
			center: new google.maps.LatLng(23.760772, 90.424790)
		};
		var map = new google.maps.Map(document.getElementById('googleMap'),
		mapOptions);
		var marker = new google.maps.Marker({
			position: map.getCenter(),
			animation:google.maps.Animation.BOUNCE,
			icon: '../img/map-marker.png',
			map: map
		});
	}
	google.maps.event.addDomListener(window, 'load', initialize);		
</script>