Skip to main content
adicionou 637 caracteres ao conteúdo
Fonte Link
Icaro Martins
  • 4,3mil
  • 14
  • 24
  • 35

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

Faça uma visita

maps-generator.com

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

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&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-->

}

 

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

Faça uma visita

maps-generator.com

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

}

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&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-->
 

Fonte Link

Problema para linkar o mapa

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

Faça uma visita

maps-generator.com

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

}