Sou novo por aqui e novo na área de programação, então desculpem se a pergunta for muito boba. Estou iniciando o projeto em um site e acontece que, quando vou linkar o site com o maps, fica uma "tela" branca logo em cima do mapa, de maneira que o mapa não aparece. Já tentei de tudo, sem jeito. Alguém consegue explicar?
section.sessao4 {
background-color: #472563;
padding: 100px 0;
}
.form {
float: left;
width: 50%;
color: white;
padding-left: 10px;
}
.form h2 {
font-size: 23px;
font-weight: 300;
}
.form p {
font-size: 15px;
font-weight: 300;
max-width: 400px;
padding-right: 10px;
}
.form form {
margin-top: 15px;
}
.form form input[type=text] {
width: 90%;
max-width: 480px;
margin-top: 8px;
height: 58px;
padding-left: 8px;
line-height: 58px;
border: 1px solid rgb(200, 200, 200);
}
.form form input[type=submit] {
border: 0;
background-color: #FF703D;
width: 165px;
height: 44px;
font-size: 13px;
color: white;
cursor: pointer;
margin-top: 15px;
border-radius: 30px;
}
.form form textarea {
width: 90%;
margin-top: 8px;
max-width: 480px;
padding: 15px;
border: 1px solid rgb(200, 200, 200);
height: 160px;
}
.map-wraper {
float: left;
width: 50%;
padding: 0 10px;
color: white;
}
.map-wraper h2 {
font-size: 23px;
font-weight: 300;
}
.map-wraper3 {
margin-top: 10px;
width: 100%;
max-width: 480px;
position: relative;
}
.map-wraper2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 100%;
}
.map {
left: 0;
top: 0;
position: absolute;
width: 100%;
height: 100%;
background: white;
border: 5px solid rgb(200, 200, 200);
}
<div class="map-wraper">
<h2>Faça uma visita</h2>
<div class="map-wraper3">
<div class="map-wraper2">
<iframe width="520" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" id="gmap_canvas" src="https://maps.google.com/maps?width=520&height=400&hl=en&q=Avenida%20Marcolino%20Martins%20Cabral%20Tubarao+(Meu%20mapa)&t=&z=12&ie=UTF8&iwloc=B&output=embed"
style="color:black"></iframe> <a href='http://maps-generator.com/pt'>maps-generator.com</a>
<div id="map" class="map"></div>
<!--map-->
</div>
<!--map-wraper2-->
</div>
<!--map-wraper3-->
</div>
<!--map-wraper-->
<div id="map" class="map"></div>
, se você olhar o css também vai notar que ela esta composition: absolute
. Existe algum motivo para essadiv
estar ali ?