Map of Google Maps disappeared

Question

Hello, I am using the JS V3 API from Google Maps. I went to style the page and the map disappeared.

jQuery, CSS and HTML:

$(function() {
  $('.nav-toggle').click(function() {
    if ($(".nav").hasClass("side-fechado")) {
      $('.nav').animate({
        left: "0px",
      }, 100, function() {
        $(".nav").removeClass("side-fechado");
      });

      $('#map-canvas').animate({
        left: "170px",
      }, 100);
    } else {
      $('.nav').animate({
        left: "-170px",
      }, 100, function() {
        $(".nav").addClass("side-fechado");
      });

      $('#map-canvas').animate({
        left: "0px",
      }, 100);
    }
  });
});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%
}
body {
  height: 100%;
  margin: 0;
  padding: 0
}
.container {
  height: 100%;
}
#map-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  float: none;
}
.nav {
  background: #5F9EA0;
  min-height: 100%;
  font-size: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
}
.nav ul {
  padding: 10%;
}
li {
  display: block;
  width: 100%;
  margin: 5%;
}
.nav-toggle {
  position: absolute;
  top: 0;
  right: -43px;
  color: #FFF;
  cursor: pointer;
  width: 44px;
  height: 24px;
  z-index: 1000;
  display: block;
  background: #444;
  padding: 12px 6px 6px 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAraVNEKHOtpqDoffbEhlvt6fc1Ybie6OE&sensor=TRUE"></script>
<script>
  function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;
</script>
<div class='container'>

  <div class='drop'>
    <nav class="nav nav-aberta">
      <div class="nav-toggle">
        </span>
      </div>
      <div class="wrap">
        <ul class="listaNav">
          <li>Seu código: 123</li>
          <li>Nome: Leonardo</li>
          <li>Onde trabalha: Oi</li>
          <li><a href="#">Editar perfil</a>
          </li>
          <li><a href="#">Deslogar</a>
          </li>
        </ul>
      </div>
    </nav>

    <div id="map-canvas"></div>

  </div>

</div>

Any idea what it might be?

Answer 1

The problem is that you added a <div> with class drop and he’s at no set height.

You will be able to see the map by adding the following rule in the CSS file:

.drop {
  height: 100%;
}

Only you will notice that the map was on top of everything. To fix this problem add a margin to the left on #map-canvas the size of your sidebar, your rule has to look like this:

#map-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  float: none;
  margin-left: 170px;
}