Bootstrap Google Map Framework
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<div class=" page-wrapper ">
Content
</div>
<footer class="footer-distributed ">
<div class="footer-left ">
<h3>TiBO<span>IPTV</span></h3>
<div>
<p class="footer-company-name ">TiBO IPTV © 2015</p>
</div>
</div>
<div class="footer-center ">
<div>
<i class="fa fa-map-marker "></i>
<p><span>Blv Gjergj Fishta , Pll G&P,Kati II 1001 </span> Tirane, Albania</p>
</div>
<div>
<i class="fa fa-phone "></i>
<p>+355 67 600 67 67</p>
</div>
<div>
<i class="fa fa-envelope "></i>
<p><a href="mailto:[email protected] ">[email protected]</a></p>
</div>
</div>
<div class="footer-right ">
<p class="footer-company-about ">
<span>About the company</span>
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
</p>
</div>
</footer>
CSS
.page-wrapper {
min-height: 100%;
margin-bottom: -319px;
}
.page-wrapper:after {
content: "";
display: block;
}
.footer-distributed, .page-wrapper:after {
height:229px;
}
JavaScript
$.asm = {};
$.asm.panels = 1;
function sidebar(panels) {
$.asm.panels = panels;
if (panels === 1) {
$('#content').removeClass('span9');
$('#content').addClass('span12 no-sidebar');
$('#sidebar').hide();
} else if (panels === 2) {
$('#content').removeClass('span12 no-sidebar');
$('#content').addClass('span9');
$('#sidebar').show();
$('#mapCanvas').width($('#mapCanvas').parent().width());
$('#mapCanvas').height($(window).height() - 50);
$('#sidebar').height($(window).height() - 50);
return google.maps.event.trigger($.asm.theMap, 'resize');
}
};
$('#toggleSidebar').click(function() {
if ($.asm.panels === 1) {
$('#toggleSidebar i').addClass('icon-chevron-left');
$('#toggleSidebar i').removeClass('icon-chevron-right');
return sidebar(2);
} else {
$('#toggleSidebar i').removeClass('icon-chevron-left');
$('#toggleSidebar i').addClass('icon-chevron-right');
return sidebar(1);
}
});
$(function() {
$.asm.theMap = new google.maps.Map(document.getElementById('mapCanvas'));
});