html - Google マップが必要なテキストの背後に表示されないのはなぜですか?

Question

Google マップを背景に固定した Bootstrap Jumbotron を作成したいのですが、どうも思い通りにいきません。Bootstrap のジャンボトロン div の下にある必要があります。
これが私のコードです：

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 60px;
      }

      /* Custom container */
      .container {
        margin: 0 auto;
        max-width: 1000px;
      }
      .container_jumbo {
        margin: 0 auto;
        max-width: 100%;
      }
      .container > hr {
        margin: 60px 0;
      }

      /* Main marketing message and sign up button */
      #map_canvas {
        margin: 0;
        padding: 0;
        height: 450px;
        width: 100%;
        z-index:-3;
      }
      .jumbotron {
        margin: 80px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 100px;
        line-height: 1;
        z-index:-1;
      }
      .jumbotron .lead {
        font-size: 24px;
        line-height: 1.25;
        z-index:-1;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
        z-index:-1;
      }
...

グーグルマップシズル

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
  var map;
  function initialize() {
    var mapOptions = {
      draggable: false,
      scrollwheel: false,
      scaleControl: false,
      disableDoubleClickZoom: true,
      zoom: 8,
      mapTypeControl: false,
      disableDefaultUI: true,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

その後、マップを表示する必要がある場所:

      <div class="masthead">
        <h3 class="muted">Project name</h3>
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
          </div>
        </div><!-- /.navbar -->
      </div>

      <!-- Jumbotron -->
      <div class="jumbotron">
      <div id="map_canvas"></div>
        <h1>Jobber <sup>beta</sup></h1>
        <p class="lead">Welkom bij Nederland's nieuwste vacaturesite, Jobber! 
                        Op dit moment zijn er <!--Jobcount--> 0 vacatures beschikbaar.                       
                        Zoek jou droombaan!</p>
        <a class="btn btn-large btn-success" href="#">Aan de slag</a>

      </div>
      <hr>
    </div>

ジャンボトロン、z-index のテキストの下に貼り付けたいと思います... エラーがあることはわかっていますが、うまく機能せず、現時点ではあまり良い開発者ではありません。

前もって感謝します
PS。コードを修正して、なぜ間違ったのか教えてください。