1

Estou carregando Google Maps v3 em um modal do Framework Boostrap. O problema é que não consigo visualizar os ícones/botão de zoom e Street View, eles aparecem distorcidos no quadrado azul da imagem. O certo era para aparecer no quadrado vermelho como padrão.

Segue esses dois exemplos para exibir no modal: 1) http://www.bootply.com/106702 2) http://jsfiddle.net/tkvw4skn/

Alguém saberia me dizer o que está acontecendo?

inserir a descrição da imagem aqui

<a id="mapaInsere" href="#modalMapa" data-toggle="modal" title="Ver endereço no mapa" ><i class="fa fa-map-marker text-primary"></i></a>
<!-- MAPA MODAL -->
<div class="modal fade" id="modalMapa" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button id="btFechar1_modalSugestaoProblema" type="button" class="close" title="Fechar" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"> Endereço do problema</h4>
            </div>
            <div class="modal-body">

            <div id="map-canvas"></div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal --> 

javascript:

$(function(){ 

    $('#modalMapa').on('shown.bs.modal', function() {
       google.maps.event.trigger(map, 'resize');
     });

});

var map;
function initialize2() {
var mapOptions = {
   zoom: 8,
   center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize2);

css:

html, body, #map-canvas  {
margin: 0;
padding: 0;
height: 100%;
}

#map-canvas {
max-width: none;
height:480px;
}
4
  • 1
    Abri o fiddle aqui e está normal... Commented 10/03/2015 às 15:55
  • Esses dois links, são exemplos no qual eu peguei o código apenas.
    – Pedro A.
    Commented 10/03/2015 às 15:56
  • Então poste seu código aqui no Sopt Commented 10/03/2015 às 15:57
  • 1
    Marcelo Aymone, postei meu código.
    – Pedro A.
    Commented 10/03/2015 às 16:03

2 Respostas 2

2

Já tive um problema idêntico com o bootstrap e o google maps api e resolvi com a seguinte regra de css:

#map-canvas img {
    max-width: none !important;
}

repare que a regra está a ser aplicada nas imagens dentro do DIV map-canvas, experimente com e sem !important.

UPDATE Depois de testar a template AdminLTE com um mapa dentro de um modal deparei-me com os problemas nos controlos e nas imagens do mapa. Não encontrei a razão do problema mas ao redimensionar a página verifiquei que o mapa também é redimensionado e fica correcto. Então encontrei a solução aqui: https://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap

O css testado é este:

#map-canvas {
  margin: 0;
  padding: 0;
  height: 400px;
  max-width: none;
}
#map-canvas img {
  max-width: none !important;
}

no arquivo .js do mapa e depois de inicializar o mapa

google.maps.event.addDomListener(window, 'load', initialize);

inclui o seguinte:

$('#compose-modal').on('shown.bs.modal', function () {
   google.maps.event.trigger(map, "resize");
});

isto vai obrigar a uma "actualização" do mapa e no meu teste funcionou.

Tu também podes criar a tua própria janela modal, consegues um maior controlo do mapa e evitas estes problemas. Podes ver um exemplo de uma janela modal que criei para incluir o Street View aqui http://www.viveraveiro.pt/mapa/aveiro/centro-cultural-e-de-congressos clica em "Vista de rua" para ver o Street View.

3
  • MigMar, não teria como você testar em um modal utilizando essa template que no caso estou usando, segue o link para donwload: minhateca.com.br/ClaytonFerraz/Iclinical/…. Eu realizei alguns testes e notei que o problema acontece por causa do css: css/AdminLTE.css e pelo js: js/AdminLTE/app.js, mais não consegui resolver o problema. Se quiser tentar.
    – Pedro A.
    Commented 11/03/2015 às 18:02
  • Actualizei a minha resposta com o teste à tua template. @Pedro A.
    – MigMar
    Commented 12/03/2015 às 1:07
  • MigMar, obrigado. Consegui resolver alterado o código do css que você colocou na resposta. O js já estava certo. Valeu...
    – Pedro A.
    Commented 12/03/2015 às 13:48
0

1 - Para funcionar como nos exemplos, precisa carregar as bibliotecas ou via CDN's:

code.jquery.com/jquery-1.10.1.js //jquery
http://maps.google.com/maps/api/js?sensor=false //google maps
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css //bootstrap
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js

2 - utilize uma classe para o botão aparecer:

<a id="mapaInsere" href="#modalMapa" class="btn btn-default" data-toggle="modal" >
    <i class="fa fa-map-marker text-primary"></i>
    Ver endereço no mapa
</a>

inserir a descrição da imagem aqui

10
  • jsfiddle.net/u3e3zwuf Commented 10/03/2015 às 16:28
  • Essa parte do código está funcionando normal, o que não está e o ícone de zoom e street view, veja a imagem que postei, os ícones ficam distorcidos.
    – Pedro A.
    Commented 10/03/2015 às 16:28
  • Com as alterações que postei, aqui funcionou, olha o fiddle. Commented 10/03/2015 às 16:29
  • Eu vi o que você fez, aqui está carregando o mapa normalmente, apenas o ícone como descrevi que aparece daquele jeito. Você entendeu o meu problema ?
    – Pedro A.
    Commented 10/03/2015 às 16:36
  • Eu entendi, mas aqui, estou vendo com o ícone, no fiddle que postei, está aparecendo normalmente. Commented 10/03/2015 às 16:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .