Imágenes rotas por conflicto entre Bootstrap y Google maps full-width

mapsdistorsionstyle

Como es la segunda vez que me pasa, lo pongo en mi particular baúl de los recuerdos.

Algunos estilos de base en bootstrap.css entran en conflicto con las imágenes de los controles que aparecen del google maps que insertemos en la misma web, teniendo como resultado la ilustración anterior.

Empezamos por identificar el mapa que insertamos (se puede tomar siempre como una buena práctica añadir un ID al mapa). En mi caso es id="map-camvas":

<div id="map-canvas" class="map-aurea"></div>

Como estilos podemos hacer que el mapa sea full-width, ocupando todo el ancho de la pantalla:

#map-canvas {
	position: absolute;
	bottom: 20px;
	left: 0;
	max-width: 100%;
	width: 100%;
	height: 400px;
}

Y la solución al problema del conflicto bootstrap – gmaps:

#map-canvas img { 
	max-width: none;
}