Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Responsive, Retinafied Google Map Images

by
Languages:

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..

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