Mapa do GoogleMaps carregando modal com div cinza


(Rafael Leggiero) #1

Boa tarde,

Gostaria da ajuda de vocês para solucionar meu problema. Tenho uma tabela onde carrego o endereço de um motorista atual com um link que abre um modal

onde mostro o map do googleMaps indicando no mapa a localização do motorista, porém, o meu map está carregando uma div toda cinza.

<td>
  <?php
      $local = Get_Address_From_Google_Maps($malote["LatitudeMalote"],$malote["LongitudeMalote"]);
      if ($malote["TipoMovimentacao"] != "F") {
      echo "<span style='display: none'>";
      echo "http://maps.googleapis.com/maps/api/geocode/json?latlng=".$malote["LatitudeMalote"].",".$malote["LongitudeMalote"]."&sensor=false";
      print_r($local);
      echo "</span>";

      if($malote["LatitudeMalote"] == 0){
          echo "<span class='temp badge bg-important'>GPS Desligado</span>";
          }
      else{

              if (array_key_exists("formatted_address", $local)) {
                  echo $local["formatted_address"];
  ?>
<br><a href="javascript:$('#myModal').modal();$('#frameMap').attr('src','');$('#frameMap').attr('src','<?php echo "/relatorio/rastreabilidade_mapa.php?id=".$malote["Id"]; ?>')">
(ver mapa)</a>
  <?php
              };
          }
      };
  ?>  
</td>

Modal que carrega o arquivo

<!-- Modal -->
  <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h4 class="modal-title">Localização da tag</h4>
              </div>
              <div class="modal-body">
				  <iframe id="frameMap" src="" width="100%" height="400px" style="border: 0px;widht: 100%"></iframe>
              </div>
              <div class="modal-footer">
                  <button data-dismiss="modal" class="btn btn-default" type="button">Sair</button>
                  <!--<button class="btn btn-success" type="button">Submit</button>-->
              </div>
          </div>
      </div>
  </div>
  <!-- modal -->

desde já muito obrigado.


(Luã Ciceri Schwertner) #2

@rafaelleggiero provavelmente quando carrega o script que gera o mapa a sua modal está com display:none, aí ele não consegue inserir o mapa no lugar certo por que a div não existe, o que gera a div cinza.
O que precisar fazer, é gerar o mapa quando a modal for ativada, para a div que vai ser colocado o mapa esteja visível e assim ele apareça.