Incompatibilidade entre o Twitter-bootstrap e o Google Maps

Posted on by — Comments
image_pdfimage_print

É possível, em alguns casos, observar algumas distorções em alguns controles de mapas e overlays do Google Maps quando se utiliza o mesmo juntamente com o Twitter-bootstrap.

Este problema ocorre por conta da propriedade css existente no Twitter-bootstrap:

img {
    max-width:100%;
}

A maneira de fixar este problema é aplicando ao Google Maps a seguinte propriedade css:

.google-maps img{
    max-width: none;
}

Acima é apenas um exemplo. Neste caso, a div que irá receber o elemento, precisaria ter adicionado em seu atributo class=”google-maps” para que o estilo seja aplicado. Também é possível fazer css gerais, aplicando a todos os img ou restringindo pelo id de um elemento. No entanto esta solução serve para não afetar qualquer estilo já existente.

Segue abaixo a imagem que demonstra o problema de distorção que ocorre:
gmaps_not_working

E este problema solucionado com
gmaps_working

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados:

Default ThumbnailAdicionando borda a elemento div dimensionado com span em Twitter Bootstrap Default ThumbnailAlterando o ícone do Google Maps api v3 Default ThumbnailGoogle Maps Javascript API v2 não funciona mais Default ThumbnailBootstrap 3, max-width e projetos com width igual a 100% Default ThumbnailComo limpar o histórico de buscas e localização do Google Maps no Android Default ThumbnailProblemas com AngularJS e componente tab original do Bootstrap ou jQueryUI Default ThumbnailAngularJS 1.2 e Bootstrap 3 tabs Default ThumbnailComo obter rss feed de uma determinada conta do Twitter Default ThumbnailComo solucionar o erro 923 da Google Play