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?

google-maps twitter-bootstrap css

— raklos
fonte

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

— raklos

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