777 Seventh Road. Bonosri
Rampura - Dhaka.
+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> 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>