{Theme} has option to switch to the image instead of map. If you want to swap it, click on the button SHOW IMAGE/ SHOW MAP on the map section.
Map With Image Component
HTML markup
|
1 |
<div class="ct-innerMap"><img src="../assets/images/demo-content/delimondo/photo-map.jpg" alt="Image"> |
JavaScript – can be find in main.js file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//Button on the map showing and hiding map and picture //------------------------------------------------------------------------------------ var element2 = $('body').find(".ct-mapSection"); $(".ct-js-mapButton").on("click",function(){ if ((element2).hasClass('ct-active')) { $(element2).removeClass('ct-active'); $(this).find("span").text('show image').attr("data-hover",'show image'); $(element2).find(".ct-googleMap").fadeIn(1000).css('display','block'); $(element2).find(".ct-innerMap > img").css('display','none'); } else { $(element2).find(".ct-googleMap").css('display','none'); $(element2).find(".ct-innerMap > img").fadeIn(1000).css('display','block'); $(element2).addClass('ct-active'); $(this).find("span").text('show map').attr("data-hover",'show map'); } return false; }) |
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>