boa tarde. 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?
Obrigado

HTML

<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&amp;height=400&amp;hl=en&amp;q=Avenida%20Marcolino%20Martins%20Cabral%20Tubarao+(Meu%20mapa)&amp;t=&amp;z=12&amp;ie=UTF8&amp;iwloc=B&amp;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-->

CSS

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);

}