Jump to content

Bootstrap and Google Maps - FIX


Zach

Recommended Posts

To anybody that uses bootstrap on their site:

You will notice that on a site running bootstrap, any use of google maps will screw up. This is due to conflicting css statements in the bootstrap.css.

Untitled-2_zps34efea94.png

If you look in your acars.js, find the following line:

var map = new google.maps.Map(document.getElementById(acarsmap"), options);

Notice the word "acarsmap" and this is important. In bootstrap.css find this (or similar):

#map_canvas img {
max-width: none;
}

and change it to look like this:

#acarsmap img {
max-width: none;
}

And, it should be perfect now. It may still conflict with the maps on flight briefings, and this may involve add another few lines in the css like this (for example), but im not so sure...:

#briefmap img {
max-width: none;
}
#myflights img {
max-width: none;
}

Please let me know if this did or did not work for you.

Enjoy!

  • Like 4
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...