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.
- Static Maps API V2 Developer Guide
- Optimising for High Pixel Density Displays by Edward Cant
- Using CSS Sprites to optimize your website for Retina Displays by Maykel Loomans
- Retinafy your web sites & apps by Thomas Fuchs
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..