CSS de Bootstrap do Twitter que afeta o Google Maps

147

Estou usando o Twitter Bootstrap e tenho um mapa do Google.

Imagens no mapa, como marcador, estão sendo inclinadas pelo CSS no Bootstrap.

No CSS do Bootstrap, há:

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
}

Quando desativo a max-widthpropriedade usando o Firebug, a imagem do marcador aparece como normal. Como impedir que o CSS do Bootstrap afete as imagens dos mapas do Google?

raklos
fonte
responda aqui: github.com/zurb/foundation/issues/26
raklos

Respostas:

187

Com o Bootstrap 2.0, isso parecia funcionar:

#mapCanvas img {
  max-width: none;
}
kevinwmerritt
fonte
6
Certifique-se de adicionar #mapCanvas img { width: auto; display:inline; }como mencionado abaixo por @nodrog
jlb 9/12
Nas notas de versão do Bootstrap 2.0.3: "Regressão corrigida no suporte a imagens responsivas a partir da versão 2.0.1. Adicionamos novamente a largura máxima: 100%; às imagens por padrão. Removemos-a em nossa última versão, uma vez que tínhamos pessoal reclamando da integração do Google Maps e de outros projetos, mas agora estamos adotando uma postura diferente sobre isso e exigimos que os desenvolvedores façam esses ajustes no final ".
precisa saber é o seguinte
FYI: Notas da versão do Bootstrap 2.0.4: "Adicionado CSS especial para impedir a largura máxima: 100%; nas imagens que atrapalham a renderização do Google Maps."
31412 kevinwmerritt
Isso é estranho que eles finalmente decidiu id hardcode, não classe de uso em vez
zerkms
1
#mapCanvas não funcionou para mim. Acabei de usar minha classe .map que usei como o contêiner do google maps e ele fez o truque. OBRIGADO!
Fydo 27/10/12
80

Há também um problema com os seletores suspensos para terrenos e sobreposições. Adicionar ambos corrigirá os problemas ...

#mapCanvas img { 
  max-width: none;
}

#mapCanvas label { 
  width: auto; display:inline; 
} 

O segundo estilo resolverá outros problemas com a caixa de terreno e sobreposição em alguns navegadores.

nodrog
fonte
Sim ! tudo parece fixo com este combinado com a resposta sinalizada como "aceita" acima. Obrigado.
19412 Mat
Funciona como um encanto no Firefox 17, mas não em cromo saber 23. Não por que, mas eu encontrei a solução apenas acrescentar o seguinte:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });
yosafatade
Você é um gênio. Muito obrigado. Isso foi me deixando louco :-)
Urso
20

Dê ao seu div da tela do mapa um ID de map_canvas.

Esse commit de autoinicialização inclui a max-width: nonecorreção do ID map_canvas(mas não funcionará mapCanvas).

robd
fonte
Eu acho que só para mudar o ID é necessário em v2.2.2
jacktrades
i não pode encontrar tais id no arquivo css
Muhaimin
@robd: Só por curiosidade, por que não vai funcionar, exceto map_canvas.
ArunRaj
@ArunRaj porque a correção no bootstrap está codificada no código #map_canvas (consulte o commit vinculado). De qualquer forma, essa resposta provavelmente está desatualizada agora, já que tem quase 2 anos de idade.
robd
11

Nenhuma dessas respostas funcionou para mim, então fui ao meu div e olhei para seus filhos. Vi um novo div com a classe "gm-style", então coloquei isso no meu CSS:

.gm-style img {
    max-width: none;
  }

  .gm-style label {
    width: auto; display:inline;
  }

..e isso resolveu o problema para mim.

Christopher Dow
fonte
+1 é a única resposta que funcionou para mim para corrigir os estranhos controles de "zoom". (Bootstrap 2)
philfreo
Trabalhou para mim também. Boa localização :)
jeje 4/14
Obrigado, funcionou para mim também. A única resposta que funcionou para mim para corrigir os estranhos controles de "zoom". (com Foundation 5)
Steffi
3

Você deseja substituir a regra de largura máxima na seção CSS usando max-width: none; Este parece ser o caminho para contornar este problema

Pawpoint
fonte
2

Alterar o #MapCanvas não funcionou para nós usando a gema gmap4rails, mas funcionou quando mudamos para

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}
Sam Joseph
fonte
2

Estou usando o gmaps4rails, essa correção fez isso por mim:

.gmaps4rails_map img {
    max-width: none;
}
.gmaps4rails_map label {
    width: auto; display:inline;
}
Benjamin Crouzier
fonte
1

O mais recente twitter bootstrap 2.0.4 inclui essa correção diretamente.

Se você estiver agrupando seu conteúdo no a (div class = "container") como na página de demonstração do twitter bootstrap, adicione um style = "height: 100%"

redochka
fonte
1

Há também um problema com a impressão de mapas usando Imprimir em qualquer navegador. O img { max-width: 100% !important; }não será corrigido pelo código acima: você precisa adicionar uma !importantdeclaração da seguinte forma:

@media print {
  img {
    max-width: auto !important;
  }
}
tempranova
fonte
0

Eu também tive que desativar a sombra da caixa e, devido à ordem dos meus inclusos, adicionei a bandeira! Important.

#mapCanvas img {
    max-width: none !important;
    box-shadow: none !important;
}
Redtopia
fonte
1
Isso funcionou para mim. Se você vai votar em alguém, deve pelo menos dizer o porquê.
Redtopia
0

Todas as respostas foram max-widht: nenhuma

para mim, max-height: herdar trabalhado .....

As pessoas estão usando #map, #map_canvas, etc. Veja sua div principal. Se estiver azul, será #blue img {}

user2060451
fonte