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 :(
<img src="http://donamkhanh.com/wp-content/uploads/2012/11/before.png" alt="Untidy map" />
My approach was:
<ol>
<li>Check to Map API
</li>
<li>Check the Cascading Style Sheets of new design
</li>
</ol>
(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 <code>reset.css</code> with <code>max-with</code> property of <code>&lt;img&gt;</code> tag is <code>“100%”</code>, I just removed this line &amp; the problem disappeared.
So my solution was:
<pre><code class="lang-css">#wrapper #map { ... max-width: none !important; }
</code></pre>
<img src="http://donamkhanh.com/wp-content/uploads/2012/11/after.png" alt="Pretty map :D" />
Pretty 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](http://donamkhanh.com/wp-content/uploads/2012/11/before.png align="left")

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:

```css
#wrapper #map { ... max-width: none !important; }
```

![Pretty map :D](http://donamkhanh.com/wp-content/uploads/2012/11/after.png align="left")

Pretty map 😁

Untidy Google Map

Khánh is a seasoned Full Stack Developer with over 16 years of hands-on expertise