Blog of Andrey Vystavkin

Google Maps with Bootstrap CSS and toggle sidebars

For those who like dynamic content navigation, and fullscreen mode of map viewing, toggling sidebars might be quite useful.

The sample involves Bootstrap CSS framework, jQuery framework, and a bit of Google Maps v3.

<div class="container" id="content">

<div class="mapwrap" style="width:100%;height:100%">

<div id="map"></div>

</div>

<div class="sidebar" id="sidebar">

<ul>.....</ul>

</div>

<a href="#" title="Toggle Sidebar Menu"><i class="icon-shevron-right icon-white"></i></a>

</div>

Here's an approximate HTML structure. And a bit of custom CSS:

#mapwrap{
float: left;
width: 100%;
height:100%;
margin-right: -280px;
}

#map{
margin:0; padding:0;
margin-right: 280px;
height:100%;
}
#content {
position:relative;
margin:0;padding:0;
float:left;
width:100%;
}

#sidebar {
margin:0;padding:0;
margin-top:2px;
float:right;
width: 276px;
height:80%;
}

And a tiny JavaScript method to toggle'em all:

$('a.toggles').click(function() {
$('a.toggles i').toggleClass('icon-chevron-right icon-chevron-left');

$('#sidebar').animate({
width: 'toggle'
}, 200, function(){
var m = get_your_map_object();

if( $('#sidebar').is(':visible') ) {
$('#map').css({'margin-right':'280px'});
} else {
$('#map').css({'margin-right':'0px'});
}

google.maps.event.trigger(m, 'resize'); //do not forget to trigger resizing otherwise map will remain unchanged
});

});