Google maps

Bootstap base config

by panchroma

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Maps test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;  }
      #map_canvas { height: 100%; z-index: 1; }

        .navbar-rooftop {
            opacity: 0.9;
        }

        .nav-collapse {
            /*top: 20px;*/
        }
    </style>
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    
    
</head>
<body>

    <div class="navbar navbar-fixed-top navbar-rooftop">
      <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="#">
              LOGO HERE</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#adForm" data-toggle="modal">Sign Up</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
             ...

CSS

/*
Found the answer! The approach is to have a nested div within the bootstrap default container: ` <div class="container"> <div id="map_canvas"></div> </div> <!-- /container --> ` Then change the css styles to: ` html { height: 100% } body { height: 100%; margin: 0; padding: 0; } #map_canvas { position:absolute; top:0; left:0; width:100%; height: 100%; z-index: -1}` The end result is that the map stretches completely at all screen resolutions while the bootstrap navbar overlays the maps, which is the effect I was trying to achieve. – arielf 7 mins ago */