Responsive, Retinafied Google Map Images
videos

Responsive, Retinafied Google Map Images

on Aug 15th 2012 with 16 comments
Tutorial Details
  • Topic: Responsive Web Design
  • Difficulty: Intermediate
  • Screencast duration: 16 mins
Download Source Files
Demo View It Online

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

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Danny

    Would it not be better to use “visibility: hidden;” on the image rather than opacity 0?

    Forgive me if you covered this in the video (I only looked at the demo), but wouldn’t this achieve the same effect (the container for the map not collapsing) without then having to add in extra filters for IE opacity etc?

    • http://www.snaptin.com Ian Yates
      Author

      You’re right – that would have been better :)

  • Darren Grant

    This solution introduces a maintainability issue in that the Google Maps link is in the HTML and the CSS which means that any changes to the map parameters will need to be changed in both places. Also as far as I’m aware on a retina device it will download the non-retina image (because it’s in the img tag) as well as the larger image which isn’t ideal.

    I have posted what I believe is a better solution at http://codepen.io/DarrenGrant/pen/Hgsvl (you can see how this would respond to a changing container size by changing it’s size in the CSS)

    Basically this centres the image using absoute positioning rather than introducing a background image. It also uses the larger image and resizes it by half – while this means that the larger file will be downloaded by all browsers, no browsers will end up downloading two images.

    • http://www.snaptin.com Ian Yates
      Author

      This is the basis behind a lot of the pro/con chatter around retina images at the moment; how do we best serve each device with the assets it needs? Is it better to have all devices load up hi res (and therefore heavier) images, or have retina machines take the strain by also loading the lo res versions?

      Nice codepen example in any case – thanks :)

  • samir

    thank you ian yates
    always a pleasure to see your tutorials

  • Hamid

    hello Ian and thank you for that screencast, cya in the next.

  • Lucas Rolff

    And in fact, it would be better to higher the PPI instead of size of the image, using etc 150PPI on the image, will have a smaller filesize, but will work perfectly on retina displays.

    • http://www.snaptin.com Ian Yates
      Author

      Good point, but not really applicable to Google Map images in this case.

  • dj

    Very interesting tut, and well executed. Could I suggest one thing? Perhaps it’s an artifact of listening to the tut with earphones (I don’t think so) but your mike picked up an inordinate amount of pounding from your keyboard. Perhaps you could isolate it a bit with some foam rubber, a dish-towel or something? Otherwise, it’s quality is excellent. Thanks.

    • http://www.snaptin.com Ian Yates
      Author

      Hmm, I’ve moved offices and am now sitting underneath a huge vaulted ceiling.. It’s certainly influenced the acoustics, so I might well have to look into a solution. Thanks for the feedback :)

  • http://hayatbiralem.com hayatbiralem

    Thank you! This is a very good idea :)

  • http://lukewhitehouse.co.uk Luke

    Lets see the interactive google maps next :)

  • Nancy

    Feel stupid: From this page https://developers.google.com/maps/documentation/staticmaps/

    How do you set up the static map I’m getting told to use an API key which I don’t know what to do with and can’t figure out how to set up the static map I’m looking at instructions but am lost.

    • http://www.snaptin.com Ian Yates
      Author

      Hi Nancy (don’t feel stupid)..

      The developers notes state:

      All Maps API applications should load the Maps API using an API key. Using an API key enables you to monitor your application’s Maps API usage, and ensures that Google can contact you about your application if necessary.

      In actual fact, you’ll be able to hook up Google Maps without an API key, but if you ever want to monitor usage or upgrade the account, you’ll need one.

      As far as getting it up and running is concerned, what are the problems you’re having? If you have an address or some coordinates I can throw up an example for you :)

  • billseymour

    Clear, works great, and exactly what is needed rather than the overkill of an iframe map. Thanks for the very useful tutorial.

  • Pingback: Designing a Better Contact Page | Directory Net

  • Pingback: Designing a Better Contact Page - — Ethiopian Website Design