Responsive, Retinafied Google Maps Images

Okay, here's the dealio. We throw an <img> element into the page, generated by Google's pleasantly straight-forward Static Image API. Our layout is flexible, so we make sure the image behaves itself by applying

img { max-width: 100% }

That's a great start, but to maintain the scale of the image, we wrap the <img> in another element; a figure, or even an anchor (if you'd like to link to an interactive version of the map.) We then apply that very same generated image to the background of our wrapper element, centering it by positioning like so:

a { background-position: 50% 50%; }

Okay, next step is to make the original image element transparent:

img { opacity: 0; }

We can't simply state

img { display: none; }

as the wrapper element would lose its dimensions, so we just look through the image instead.

Retina Screens

In order to deliver a higher resolution image to screens which can deal with it, let's employ a media query:

@media only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
}

Excellent. So, having isolated screens with a hi pixel density, let's serve the correct image, then scale it appropriately:

{ background-size: 640px 640px; }

More information can be found in the Static Maps API V2 Developer Guide