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 🙁

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;
}
