CSS de Bootstrap do Twitter que afeta o Google Maps

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?

Com o Bootstrap 2.0, isso parecia funcionar:

#mapCanvas img {
  max-width: none;
}

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.

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).

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.

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

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;
}

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

.gmaps4rails_map img {
    max-width: none;
}
.gmaps4rails_map label {
    width: auto; display:inline;
}

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%"

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;
  }
}

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;
}

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 {}