jquery - Bootstrap Woes. Resizing Google Maps -
i'm having sorts of problems re sizing google maps using twitter's bootstrap. stands right have gigantic white outline , nav bar covering area left of it. i'm tried sorts of wizardry full screen without cutting off controls attempts have been fruitless. there inline javascript tried use achieve did not seem trick.
the code:
<!doctype html> <html> <head> <title>map project</title> <link href="css/style.css" rel="stylesheet"> <link href="css/sidebar.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> html, body, #map-canvas { height: 100%; margin: 0; padding: 0; display: block; } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasydd8vlwh0ukzt-3zksnluqqzoqxnq9_0fe"> </script> </head> <body> <div id="container"> <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle location information</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <img class="img-responsive logowiki" src="img/wiki_logo.png" /> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul data-bind="foreach: articlelist" class="nav navbar-nav"> <li><a data-bind="attr: {href: url}, text: content"></a></li> </ul> </div> </div> </nav> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"> <a href="#"> neighborhood map <img src="img/map_icon.png"> </a> </li> <li> <a href="mailto:iam@jamesiv.es">contact</a> </li> <ul data-bind="foreach: pins"> <li data-bind="text: name"> </li> </ul> </ul> </div> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <div id="map-canvas"></div> </div> </div> </div> </div> </div> <!-- /#sidebar-wrapper --> <!-- page content --> <script type="text/javascript" src="js/libs/jquery.js"></script> <script type="text/javascript" src="js/libs/bootstrap.min.js"></script> <script type="text/javascript" src="js/libs/knockout-3.3.0.js"></script> <script type="text/javascript" src="js/main.js"></script> <script> $(window).resize(function () { var h = $(window).height(), offsettop = 60; // calculate top offset $('#map-canvas').css('height', (h - offsettop)); }).resize(); </script> </body> </html> #wrapper { padding-left: 0; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } /* sidebar styles */ .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li { display: block; text-decoration: none; color: #999999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav > .sidebar-brand { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } .priority { z-index: 999; } @media(min-width:768px) { #wrapper { padding-left: 250px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 250px; } #wrapper.toggled #sidebar-wrapper { width: 0; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } } working example: http://jamesiv.es/projects/map
your working example gives 404 when clicked.
try inserting piece of code triggers "resize" function when sidebar drawn completely.
$('#sidebar-wrapper').on('shown', function () { google.maps.event.trigger(map, "resize"); });