CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Mona Coder
Mona Coder

Reputation: 6316

Bootstrap FullScreen Google Map Not Responsive

Can you please take a look at following LINK and let me know why the map is not acting responsive? I also have some issue with correct positioning and I appreciate if you can help me to fit the map correctly in page?

Here is my CSS and Html as well,

<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 css:

body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;}

Upvotes: 1

Views: 300

Answers (1)

Pascamel
Pascamel

Reputation: 953

The map is not an image, it will not downsize while you downsize your browser

Upvotes: 1

Related Questions