1
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?
Thank you! However, I took the margin-left: 170px from #map-canvas, because it was a big margin when the menu was hidden, so I put a z-index: 1 in . Nav
– leonero