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 :(

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 😁