Joomla 3 Twitter Bootstrap conflicts with Google Maps

[Alejandro]

We've been getting support requests about issues with map controls not rendering correctly and they are all from clients using Joomla 3. It turns out Bootstrap CSS messes up the map controls and markers. It has been documented in the link below as well as a number of other places:

 

http://stackoverflow.com/questions/9141249/twitter-bootstrap-css-affecting-google-maps

 

Looks like they are not going to do anything about it. So for now edit

 

/components/com_jreviews_addons/geomaps/views/themes/geomaps/theme_css/geomaps.css

 

Find:

 

/* Fix for infowindow when using Twitter bootstrap */
.jrMapDetail img,
.jrMapModule img,
.jrMapList img {
    max-width : none;
}
.jrMapDetail img,
.jrMapModule img,
.jrMapList img {
    max-width : none;
}
.jrMapThumbnail img {
    max-width: 100%;
}

 

And replace it with:

 

/* Fix for Google Maps when using Twitter Bootstrap */
.jrMapDetail img,
.jrMapModule img,
.jrMapList img,
.jrMapItCanvas img {
    max-width : none;
}
.jrMapThumbnail img {
    max-width: 100%;
}
.jrMapDetail label,
.jrMapModule label,
.jrMapList label,
.jrMapItCanvas label {
    display:inline;
}

 

Then clear your browser's cache.

[Jorge Pereira]

This section is only visible with a valid subscription. If you have a valid subscription, please login.

[Kristian]

This section is only visible with a valid subscription. If you have a valid subscription, please login.

[Jorge Pereira]

This section is only visible with a valid subscription. If you have a valid subscription, please login.