Untidy Google Map

A few days ago, I had a problem with displaying Google Map. After our client apply new design to their website, the map is too untidy. It seems map is duplicated. Although I have experience in integrating Google Map for many sites before but this problem takes a lot of my time 🙁

Untidy map

My approach was:
1. Check to Map API
2. Check the Cascading Style Sheets of new design

(1) seems ok
(2) I tried to copy other map’s configuration to our site but this problem still occured (Other site displays good)

So what exactly is wrong with our CSS?

Fortunately, I found the root cause. When our client implement new design, they used reset.css with “max-with” property of <img> tag is “100%”, I just removed this line & the problem disappeared.

So my solution was:

#wrapper #map {
    ...
    max-width: none !important;
}
Pretty map 😀

Leave a Reply

Your email address will not be published. Required fields are marked *