HTML markup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<section class="ct-u-backgroundLight ct-js-mapSection"> <div class="container"> <div class="row"> <div class="col-md-12 text-center ct-u-paddingBottom100"><img src="../assets/images/demo-content/delimondo/icon-contact.png" alt="Image"> <h6 class="ct-u-fontTypeBold ct-u-colorMotiveLight ct-u-paddingBottom10 ct-u-fontSize22 ct-u-paddingTop55">lets get in contact</h6> <h2 class="ct-u-fontTypeLight ct-u-lineHeight60 ct-u-paddingBottom80">lets get in contact</h2> </div> </div> </div> <div class="ct-mapSection"> <div class="ct-innerMap"><img src="../assets/images/demo-content/delimondo/photo-map.jpg" alt="Image"> <div data-location="666 Broadway, New York City" data-height="490" data-zoom="14" class="ct-googleMap ct-googlemapStyle"></div> <div class="ct-itemProducts"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"><img src="../assets/images/demo-content/delimondo/ornamant.png" alt="Image"></div> <div class="ct-u-displayTableCell"><img src="../assets/images/demo-content/delimondo/delimond-map.png" alt="Image"></div> <div class="ct-u-displayTableCell"><img src="../assets/images/demo-content/delimondo/ornamant.png" alt="Image"></div> </div> <div class="ct-content text-center"> <div class="ct-header">DELIMONDO RESTAURANT CORP.</div> <p>666 Broadway, Ground Fl. · New York City, NY 10017</p> <p>E-Mail: info@delimondo.com · Tel: 123-456-7890</p> <div class="ct-divideLine ct-divideLine--another"></div> <div class="ct-header">HOURS</div> <p>Monday - Friday 8:00am - 22:00pm</p> <p>Saturday: 10:00am - 15:00pm</p> <p>Sunday: 10:00am - 15:00pm</p> <div class="ct-divideLine ct-divideLine--another"></div> <ul class="ct-socials ct-socials--second list-inline list-unstyled"> <li data-toggle="tooltip" data-placement="top" title="Facebook"><a href="https://www.facebook.com/createITpl"><i data-icon-size="18" class="fa fa-facebook ct-js-iconSize"></i></a></li> <li data-toggle="tooltip" data-placement="top" title="Twitter"><a href="https://twitter.com/createitpl"><i data-icon-size="18" class="fa fa-twitter ct-js-iconSize"></i></a></li> <li data-toggle="tooltip" data-placement="top" title="Rss"><a href="#"><i data-icon-size="18" class="fa fa-rss ct-js-iconSize"></i></a></li> <li data-toggle="tooltip" data-placement="top" title="Google Plus"><a href="#"><i data-icon-size="18" class="fa fa-google-plus ct-js-iconSize"></i></a></li> </ul> </div> </div> <div data-top="100" data-right="100" class="ct-mapButtonOuther ct-js-position"><a href="#" class="ct-mapButton ct-js-mapButton"><span data-hover="show image">show image</span></a></div> </div> </div> </section> <div class="section ct-u-backgroundLightDark ct-info"> <div class="container"> <div class="row text-center"><a href="#" class="ct-js-btn">hide information</a><i class="fa fa-caret-up"></i></div> </div> </div> |
If the user click on the HIDE INFORMATION button, the map will slide up and the button changed the text. The component works like a accordion.
— Here we have a map from Google Map Plugin
HTML markup
1 2 |
<div data-location="666 Broadway, New York City" data-height="490" data-zoom="14" class="ct-googleMap ct-googlemapStyle"></div> <pre> |
Google maps – data attributes explanation
— data-location – use it for display your location on the Google map (e.g. can be a string: “New York”, or cords: 40.7198584,-74.0021416)
— data-height – use it for height adjustment
— data-zoom – use it to set the zoom
JavaScript – for both version
<script src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script src=”../assets/js/gmaps/gmap3.min.js”></script>
<script src=”../assets/js/gmaps/init.js”></script>