Use Your Computer, Don’t Let It Use You: Five “U”s For Reduced Stress Online

Remember when getting an email was exciting? Or when seeing a particular post on Facebook was an event? It feels so long ago, but it wasn’t. In the past few years the amount of information in our various inboxes has exploded, and we all feel overwhelmed as a result. And when I say “inboxes”, I’m not just talking about email. At this point you probably have several “inboxes” that consistently require your attention. There’s your email, but there’s also probably some combination of Facebook, Twitter, Tumblr, and maybe an RSS reader demanding your attention. Really, any place where you don’t...

Read the full article: Use Your Computer, Don’t Let It Use You: Five “U”s For Reduced Stress Online

Microsoft Updates OneNote With OCR, Camera Scan, Share Charm

Microsoft’s OneNote is great for research, especially when used with Windows 8 and 8.1’s SkyDrive integration. And the popular note-taking app has now had a major update on the desktop OS that brings some cool new functions, including ‘Camera Scan’ for smart scanning and the ability to read and search scanned items. Camera Scan lets you capture important data like what’s written on the whiteboard in a meeting or that crucial document you don’t want to lose. Train your device’s camera at it, use OneNote’s Camera Scan and it will automatically crop, rotate, straighten, remove shadows and sharpen the image...

Read the full article: Microsoft Updates OneNote With OCR, Camera Scan, Share Charm

What’s Trending? Find Out With These Real-Time Data Websites

Tired of always being out of the loop? It’s amazing how quickly information can spread from person to person these days thanks to the Internet and social media. New ideas, websites, videos, and all manner of content can be seen by millions of people overnight, which mean that trends are being appearing and disappearing faster than ever before. Is it possible to keep up? The short answer is yes — with a catch. If you consume web media for hours per day, sure, it’s easy to stay on top of the latest trends and memes. But what if you don’t...

Read the full article: What’s Trending? Find Out With These Real-Time Data Websites

How to Make the New Google Maps Embeds Responsive

Responsive Google Maps – The maps automatically resize based on the screen size.

The new Google Maps now offer you can option to embed maps in your web pages. While you are on the Google Maps website, zoom-in to an area that you wish to embed, click the Gear icon in the lower left corner and choose the Embed Maps option from the menu.

This web page contains a sample map embedded using the default embed code provided by Google Maps. The embedded map is non-responsive. What it means is if you open the page on a device other than your desktop computer, the Google Map won’t fit the screen and you’ll have to scroll the page horizontally to see the complete map.

Here’s another web page that contains the same Google Map but now the map has been embedded responsively. Thus, if you resize the browser or view the page on a small device, the embedded map would adjust its size automatically based on your screen size.

How to Embed Google Maps Responsively

This is the default embed code for the new Google Maps:

<!-- Height=450px; Width=600px -->
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>

As specified in the height and width parameters of the embed code, the default height for medium embeds is 450px or 75% of the default width (600px).

If you wish to transform this static sized Google Map into one that is responsive, all you have to do is add a few CSS rules to your web page and wrap the embed IFRAME inside these rules.

The new embed code with responsive style will be something like this. You can change the value of padding-bottom (line #4) from 75% to something for a different aspect ratio.

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

A similar technique can be used to embed Instagram videos and photos responsively.

---

This story, How to Make the New Google Maps Embeds Responsive, was originally published at Digital Inspiration on 29/11/2013 under Embed, Google Maps, Internet