Could you please take a look at the provided link and advise me on why the map is not responding correctly? I am also facing issues with the positioning of the map on the page, so any guidance on adjusting it appropriately would be greatly appreciated.
Below is my CSS and HTML code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- JS Libs -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Brand</a>
<div class="nav-collapse collapse" id="spanClasses">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="map">
<div id="map_canvas"></div>
</div>
And here is the associated CSS code:
body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;}