Tutorial #42
Google Street View Image API Basic   2014-01-17

Introduction

Street View images are available within Google Maps for a huge number of locations around the world. They offer a really useful street level view for places around you, as well as fascinating insight into places on the other side of the world that you could never dream of visiting.

A Street View image of your, or your client's, business could be a nice addition to your web site, alongside a map, as it shows potential customers what your physical location looks like.

Linking directly into a 'live' Google Map is difficult as it is so easy for a user to shift the focus from your intended location. You could take a screenshot of a Street View image and use that, but then you have to crop the image yourself and the copyright issues of doing this with Google imagery are murky, to say the least.

Happily, Google have made the Google Street View Image API available to us and with a little bit of work you can embed static images directly from Google in your page.

Demo 1 screenshot for this tutorial


Step by Step

1: Navigate to your target location in Google Maps and then go into Street View mode to find the precise location that gives you the desired view.

In late 2013 Google introduced a new Preview version of Maps. While this has some nice features compared to the Classic version, the new version makes it much more difficult to get the current Latitude and Longitude of specific location. If your URL has preview in it (i.e. https://www.google.com/maps/preview) then you are using the new version. You can switch back to the Classic version by clicking the Help icon in the bottom right corner (the Question Mark icon) and selecting Return to classic Google Maps.

In the demo for this tutorial here is a screenshot of the view I want to capture using the Street View Image API:

Image 1 for this tutorial

The Fremont Rocket is a landmark that was built from the shell of a 1950s Cold War missile fuselage. It was built in 1994, back in the day when Fremont was a funky neighborhood.

2: Get the Latitude and Longitude for the point at which this image was taken.

There are two ways to do this:

A: Look at the URL for this image in Google Maps and look for the first pair of numbers that represent Latitude and Longitude:

https://www.google.com/maps/preview#!q=burnt+sugar+fremont&data=!1m8!1m3!1d3!2d-122.351209!3d47.650722!2m2!1f195.37 !2f118.22!4f75!2m9!1e1!2m4!1sq4cA5w54oDhODVeM5IGDHg!2e0!9m1!6sNorth+35th+Street!5m2!1sq4cA5w54oDhODVeM5IGDHg !2e0!4m15!2m14!1m13!1s0x5490150746fa955f%3A0x86bd7ac001b66574!3m8!1m3!1d234898!2d-122.3420645!3d47.6130285 !3m2!1i1279!2i1048!4f13.1!4m2!3d47.650604!4d-122.351004&fid=5

In this example the relevant text is -122.351209!3d47.650722 - this represents the Longitude, a separator (!3d) and the Latitude (Note the wrong way round order). This is a really messy way to get that information but in the new version of Maps it is the easiest one that I can find.

B: In Classic Google Maps you can go back from Street View to the Map and then Right Click on the Little Man icon and select What's here?. The coordinates will be shown in the Search Box of the map.

Image 2 for this tutorial

3: Construct a Street View Image URL

The Street View Image API is simply a specific format for a URL.

Street View Image API does not require an API key but if your site is going to make a very large number of requests then you should obtain one.

The URL Parameters are:

size expressed as <width>x<height> (e.g. size=400x400). It appears that 640x640 is the maximum size that is supported.

sensor can be true or false - false is used in static web pages like this.

location can be a text string or a Latitude,Longitude pair, which is what we use here. For example location=47.65072,-122.351209

heading specifies the direction that the camera is pointed, with 0 being North, 90 being East, etc. - for example heading=180. The default value for heading, if you omit it, appears to vary between locations, but I may be wrong about that.

pitch specifies the angle above or below the horizontal that the camera is pointing. The default is 0.

fov is short for Field of View and specifies how wide angle the specific image is. The default for this appears to be 90.

The first URL parameter is preceded by a ? and subsequent ones are preceded by &.


In our example, we construct a URL at the target location with a heading of 0 and enter than into the URL bar of the browser.

http://maps.googleapis.com/maps/api/streetview?size=400x400&location=47.65072,-122.351209&heading=0&sensor=false

This returns this image in which the direction is wrong ...

Image 3 for this tutorial

By trial and error, modify the heading until the direction is correct:

http://maps.googleapis.com/maps/api/streetview?size=400x400&location=47.65072,-122.351209&heading=200&sensor=false

Image 4 for this tutorial

Clearly the camera needs to be raised to capture the target image, so we add the pitch parameter and get the correct value through trial and error

http://maps.googleapis.com/maps/api/streetview?size=400x400&location=47.65072,-122.351209&heading=200&pitch=20&sensor=false

Image 5 for this tutorial

Finally we experiment with the fov parameter to get the view that we want:

http://maps.googleapis.com/maps/api/streetview?size=400x400&location=47.65072,-122.351209&heading=200&pitch=30&fov=60&sensor=false

Image 6 for this tutorial


Understanding the Code

Now that you have a URL that represents your target image then simply include that as the src of an img tag in your page.

The approach is a bit of a hack. I don't see a direct way to get the URL from the 'live' Google Map view, although you could probably parse it out that long URL - but it works.

With this approach, whenever Google updates it imagery of your target location, the static image will also be updated. In general this should be a good thing, but you should to check the image every few months.

Perhaps you want to grab a static copy of a good image just as backup in case the new Google image shows, for example, your building covered in scaffolding or tagged with graffiti.


More Information

Street View Image API


Code for this Tutorial


Share this tutorial


Related Tutorials

1 : Embed a Google Map   (Basic)

15 : Display a Google Map using JavaScript   (Intermediate)


Comment on this Tutorial


comments powered by Disqus