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:

mapquest-map-broken

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?

mapquest-firebug

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:

mapquest-map-fixed

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.
Comments...

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:

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