1. Web Design
  2. Site Elements

Responsive, Retinafied Google Map Images


How's that for a keyword-packed title? Let's take a look at Google Maps - more specifically, an alternative way to include them in your websites. We'll be working responsively (of course) and we'll take a look at a media query which will help us out with Retina displays too.

This is a technique which might ring a bell if you've ever applied border-radius to an image (before it was actually possible to apply border-radius to an image). It also takes into account some of the recent discussion about sprites and retina displays.

Watch Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Additional Resources

One final note: An issue which might stand in the way of actually using this technique is copyright. In obscuring the copyright notice we've gone against the usage terms, so it might be prudent to include an alternative underneath the image, in this case Map data ©2012 Google, Whereis®, Sensis Pty Ltd. That said, I can't guarantee Google will be okay with that..

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.