1

Olá, estou usando a API JS V3 do Google Maps. Fui estilizar a página e o mapa desapareceu.

jQuery, CSS e 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>

Alguma ideia do que pode ser?

1 Resposta 1

1

O problema é que você adicionou um <div> com a classe drop e ele está sem altura definida.

Você vai conseguir ver o mapa ao adicionar a seguinte regra no arquivo CSS:

.drop {
  height: 100%;
}

Só que você vai perceber que o mapa ficou por cima de tudo. Para corrigir esse problema adicione uma margem à esquerda no #map-canvas do tamanho da sua barra lateral, a sua regra tem que ficar assim:

#map-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  float: none;
  margin-left: 170px;
}
1
  • Obrigado! Porém, tirei o margin-left: 170px do #map-canvas, pois ficava uma margem grande quando o menu estava escondido, daí coloquei um z-index: 1 no .nav
    – sadtroll
    Commented 9/01/2015 às 1:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .