Take better Google Street View screenshots

A technical primer for journalists and bloggers

Image for post
Image for post
This image is from Google Street View — as are all the images in this piece.

Are you a reporter? Fed-up because your editor wants you to publish fifty-eight pieces of content every day and won’t let you leave your desk? Can’t get photos from that neighbourhood dispute or cat-stuck-up-a-tree story because all the togs have been laid off? Using Google Street View instead?

Then please, we beg you, do it properly.

There’s something intrinsically cringey and low-tech about using Street View grabs in local news articles, like vertical video or people who type “F” in the comments to follow Facebook posts.

You have to crop in, avoiding all the buttons and UI elements, so your image either looks really tiny or horribly glitchy. Also those road name labels? They’re a dead giveaway that you couldn’t get your own photo and we live in an age where local reporters are valued less than bin-men.

There are several ways you can improve your use of Street View imagery. You need to know them because nothing could be worse than what you’re doing now.

First, get rid of the interface

Getting rid of Street View’s user interface (UI) elements immediately gives you more image for your money. Which is nothing, because your publisher is too tight to pay for API access, which is why you’re reduced to doing this in the first place.

No, seriously. The more image you have access to, the less cropping you have to do.

Image for post
Image for post
This could be a nice pic, if only we could get rid of all those buttons and bits.

Unfortunately, it can be a bit of a faff setting this up the first time. It involves accessing Street View on a computer and editing the CSS (Cascading Style Sheet) that formats the HTML elements of the page. Don’t worry though, I’ve made it so easy that even an NCTJ trained reporter can do it.

Using Google Chrome

We’re going to assume you’re using Chrome. Google stuff looks and works best on Chrome and worst on Internet Explorer. It’s just science, alright? Get it from here if you don’t already have it. If you are the kind of hipster oddball who prefers Firefox, you can skip the next three steps and go to the bit we’ve cunningly called “Using Firefox”.

1. Get a Chrome extension to help you edit CSS

That’s a bit of a stretch, actually. You’re not really going to edit any CSS. I am. I’ve already done it for you. I could have written an extension that does the whole thing for you, but I’m mildly annoyed not completely insane.*

Anyway, the extension you need to install is called Live Editor for CSS and you can find it in the Chrome Web Store.

If you really must use Microsoft stuff, there’s also a version for Microsoft Edge.

2. Go to Google Maps

Navigate to Street View on your PC or Mac the way you usually do. Find the street you want to steal/take a screenshot of.

3. Get rid of the UI elements

This is the important bit. Toggle on Live Editor for CSS in your browser. If you installed it properly, it can be activated by clicking a button in the toolbar. It looks like an angle bracket pointing to the left. A text box will appear that you can type into. Copy and paste the following CSS code into it:

.widget-image-header-close {visibility: hidden}

.widget-image-header-scrim {visibility: hidden}

.watermark { visibility: hidden;}

.app-viewcard-strip {visibility: hidden}

.scene-footer {visibility: hidden}

#pane {visibility: hidden}

#titlecard {visibility: hidden}

*EDIT (20/08/20)

Thanks to Jon Drews for a note on 18/07/20 that helped me update the #pane ID parameter.

Just like that, all the interface elements covering your Street View image will disappear! It gets better. Click the “pin” icon and the code in the box is saved, so the next time you go to Street View, you can turn off those UI elements without needing to copy and paste.

Image for post
Image for post
Starting to look better… close the Live Editor for CSS window when you’ve applied the fix.

And, yes, we did painstakingly comb through every line of code to find all those CSS IDs. You’re welcome.

*EDIT (16/10/2019)

Someone was crazy enough to put my CSS code into a Chrome extension called Clean Street View, and I’m very grateful that they did. Thanks to Andy Dickinson, a fellow digital journalism lecturer, you can now remove all UI elements in Street View with one click. You can find the extension and guidelines on how to install it on GitHub.

I’m leaving the original instructions here because it’s still useful to see a) which UI elements correspond to which parts of the underlying CSS and b) to have a method that enables you to target specific UI elements.

Using Firefox

Firefox user? There’s an even quicker way to do all that stuff above using a handy thing called a “bookmarklet”. Clean Street View is a simple little script that gets rid of all Street View’s user interface elements — but as a bookmark. To install in Firefox go to JSFiddle.net site and drag the Clean Street View link to your bookmarks bar. No messing with extensions required. To use it you navigate to Street View in Google Maps and just toggle it on or off. A heads up; this bookmarklet still leaves the Google logo on your images. Your conscience will tell you whether it’s ethically appropriate to crop it out or leave it in.

Go full screen

Once you’ve removed the UI clutter, maximise the browser window to full screen before taking your shot. Hit CTRL-Shift and F on a PC or CMD-Shift and F on a Mac. Google Street View should fill your monitor at the maximum possible size — and if you’ve followed the instructions above there’ll be no buttons, overlays or widgets either. Scooch the cursor over to the side of the screen and take your screenshot. To bring back the UI elements, leave full-screen mode and click the Live Editor for CSS button in Chrome or hit that bookmarklet link in Firefox, you filthy weirdo.

Image for post
Image for post
Nearly there now… just need to get rid of those pesky road names.

Road name labels

Unfortunately, we can’t remove the road name labels as easily — but they are such a distraction that it’s worth taking the time to frame your screenshots so any labels are out of the frame. Here’s a simple tip. If you reorient the view to towards the pavement, you can hide road name labels. Told you it was simple. The labels are actually on the image tiles, following the direction of the road — so look away from the road and you won’t see them. Also, images of houses and shops and trees look better than a straight view down a grey stretch of tarmac.

Image for post
Image for post
It’s pretty difficult to believe this is a Street View image, but it is. No cropping required.

If you need to take an image of a road junction, try moving a step to the left or right of it. The label should only appear in one image and it will disappear in those on either side.

Go back in time

Another little known feature of Street View is that you can sometimes back go through older versions of the images stored in Google’s vast database. With the UI elements visible, go to the black “Title Card” panel in the top left corner. If you can time travel, there’ll be a clock icon on the card, next to the date. Click on it and you’re able to switch between dates. Handy for finding the best possible image.

Image for post
Image for post
Looking for a sunny day or a scene without blurry faced people? Time travel’s the key.

Embed Street View instead

Finally, there’s a vastly superior solution to any of the hacks above. It’s one that may have your editor slapping you on the back, asking how you achieved this wizardry and giving you a raise. It allows you to add interactive content to pages without moving from your desk and it’s entirely free. It also requires no coding skills at all.

Go to Google Street View in your web browser, track down the road or address you need to screenshot and line it up as though you intend to grab it. Then, instead, go up to the black box in the left corner of the screen and click the “More” icon (make it visible first, if you need to after following our instructions above). By the way, the “More” icon looks like three vertical dots.

Choose “Share or embed image” from the pop-up menu. In the dialogue that appears, click the “Embed a map” tab. Make sure you customise the size so that it exactly fits your style guide for embeds and images.

Image for post
Image for post
Copy the “iframe” code and embed it into most Content Management System posts.

This creates a snippet of HTML containing a document element called an “iframe”. Assuming your site supports embedding, you can copy and paste it into your publication’s CMS, (making sure that you do so in HTML rather than visual mode).

Inside that iframe will be an interactive Street View window, pointing at the precise location you want it to point at. Not only will readers be able to see where a story took place, but they’ll also be able to take a look around the neighbourhood too. It’s Street View as it was supposed to be used.

And that’s all. A thousand words about how to use Google Street View screenshots properly might seem excessive but, as one of my former students observed, you wouldn’t put crappy screenshots in the print edition of a paper. My question is, why would you put them online? It’s time to start taking it seriously because, in a few more years, online may be all there is.

Written by

Writer and University Lecturer. Doing research into games, VR and journalism, all at the same time.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store