Lost Web Designs | Web Designs, Web Development and More...

Google maps and responsive images | tip

Posted on :05/october/2011 | by : Guillaume

Yes, it took me 8 months to make a new blog post, anyways that one should help many of you fellow web designers and developers. Responsive design is the new elephant in the room but it give get some strange behavior with google maps, here is my fix.

Responsive Images and google maps

I am a lover of that new trend called responsive design and i have been using some of those features for few months now.

After i read this brillant post from Ethan Marcotte my mind was just blown up, how could it have been easier to get any media to become responsive or fluid.

Then came that day: while making a new responsive website with a jQuery google map, everything was looking to work perfectly, at least on google chrome, but when it came to test that same page on Firefox, the google map ended up to be just a grey background and absolutely no map at all.

Well after trying to find any solution on the web it appears that i couldn't find any solution to my problem?how that beautiful jQuery plugin could be working great on every single website but not mine now!!

So i tried to find out by myself a solution, or at least the cause of that grey background. It took me a while but after a lot of debugging i finally found out that this line of css was the cause of the problem:

img {
     max-width: 100%;
}    

It looks like this css line just screw the whole google map plugin, so a nice solution for that would be to write this a bit more specifically and add a

<figure></figure>

super semantic block and the css rule to images inside that container so your google map not inside a figure container will be working fine like so:

figure img {
     max-width: 100%;
}   

Hope it can help many of you guys.

Would you like some coffee while i built your website