Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

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: http://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstraphttps://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.

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: http://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.

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.

adicionou 1278 caracteres ao conteúdo
Fonte Link
MigMar
  • 101
  • 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: http://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.

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.

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: http://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.

Fonte Link
MigMar
  • 101
  • 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.