MapQuest API Map Not Showing in Bootstrap Site on Firefox or IE

June 11th, 2013 - Posted by Steve Marks to Javascript / jQuery, Web Development.

In normal circumstances, when faced with the challenge to implement a map into a website or application, I wouldn’t think twice about using the trusty Google Maps API. Today was different however. Due to certain aspects of the Google Maps API terms and conditions I needed to look elsewhere and found myself using the Open Data API from MapQuest.

Implementing it was straight-forward, the documentation was clear enough, and soon enough I had a map showing. Well… kind of showing. Here’s a preview of what I actually had appearing in Firefox:


As you can see, the controls are being loaded, and I could click and drag the tiles, but the actual image tiles weren’t being loaded in Firefox or Internet Explorer. A quick look in FireBug showed that the image tiles were infact being requested and downloaded, so why weren’t they showing in the map?


The Solution

After much digging, the problem seemed to be due to the fact I was implementing the map in a site using Bootstrap and a conflict in styles, inparticular the following one from the Bootstrap CSS:

img { max-width:100% }

In the Bootstrap CSS, it’s obvious they’ve tried to provide a cater for this exact problem by putting in the below style definition:

#map_canvas img,
.google-maps img {
max-width: none;

As a result, give your map element an ID of ‘map_canvas‘, or a class of ‘google-maps‘, and your MapQuest map will begin to appear like so:


This entry was posted on Tuesday, June 11th, 2013 at 8:42 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (2)
  1. Duval says:

    Exactly my issue. Glad I found this. Probably would have never realized what the issue was.

  2. Rado says:

    Saved me a lot of headache! So simple.10x!