Resolving Google Map Controls Appearing Squashed

January 9th, 2014 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

After working on an implementation of a Google Map earlier today, I came across an issue with the controls of the map appearing squashed, almost invisible like so:

google map controls squashed

As you can see, the zoom control for example is barely noticeable. It was the same for other controls on the map, and also the close button of infowindows when I added them.

The Solution

It turns out that the issue with the squashed controls arose because of the fact the map was being implemented into a site built using the Twitter Bootstrap. This gives all images a max-width by default which in turn was conflicting with the images used for the certain map controls.

The solution was to override this with a bit of custom CSS like so:

#map_canvas img {
    max-width: none; 

After adding the above and viewing the map again the controls were back to how I expected them to be:

google map controls unsquahed

This entry was posted on Thursday, January 9th, 2014 at 12:32 pm by +Steve Marks and is filed under (X)HTML / CSS, 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 (1)
  1. Vivek says:

    Thanks a lot it really helps me