"map card"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="map"> <div id="map"></div> <div class="map-c"> <h1>ABC Stores</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium id cumque est dolores voluptatibus.</p> <div class="det"><i class="fa fa-map-marker"></i> 102 New Road, New City</div> <div class="det"><i class="fa fa-phone"></i> 001 2045 509</div> <div class="det"><i class="fa fa-globe"></i> www.abcstores.com</div> <center> <button class="fa fa-car"></button> <button class="fa fa-envelope"></button> </center> </div> </div>
body { margin: 0; background: #78909C } .map { width: 700px; height: 380px; margin: calc(50vh - 190px) auto; box-shadow: 0 0 40px -10px black; background: rgb(240, 240, 240); font-family: 'Montserrat', sans-serif; max-width: calc(100vw - 60px) } #map { width: 65%; height: 380px; display: inline-block } .map-c { float: right; width: 35%; height: 100%; padding: 25px; box-sizing: border-box } h1 { margin: 0; font-weight: normal; color: rgb(60, 60, 70); font-size: 28px } p { font-size: 13px; margin-top: 20px; margin-bottom: 30px } .det { font-size: 12px; margin-bottom: 15px } i { float: left; font-size: 18px !important; margin: 0 8px 0 0 } button { margin: 15px 4px; padding: 13px 9px; display: inline-block; cursor: pointer; background: none; color: #546973; border: 2px solid #78909C; transition: all 0.3s; border-radius: 8px; outline:0 } button:hover { border-color: rgb(90, 90, 90); color: rgb(90, 90, 90) } button:after { content: 'Directions'; font-family: 'Montserrat', sans-serif; display: block; font-size: 11px; margin-top: 8px } .fa-envelope:after { content:'Email'; margin:8px 13px 0 } @media only screen and (max-width: 720px) { .map { height: 450px; margin: calc(50vh - 225px) auto; overflow: hidden } #map { width: 100%; height: 200px; } .map-c { float: right; width: 100%; } button { float: right; margin-top: -75px } } @media only screen and (max-width: 460px) { p { display: none } h1 { margin-bottom:20px } button { float: none; margin-top: 10px } .det { margin-bottom: 9px } }
var myCenter = new google.maps.LatLng(51.308742, -0.320850); function initialize() { var mapProp = { center: myCenter, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapProp); var marker = new google.maps.Marker({ position: myCenter, }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize);

Related: See More


Questions / Comments: