Google Street View Made Easy

Summary

Working example
What is missing from the street view API
Details on how to use the plugin
Download
Big thanks to Sheldon Els for helping out

Browser compatibility is an on going issue, this is only guaranteed to work in Firefox 3.2 at the moment, working on rest!

Street view is one the most outstanding features of not just google maps, but any google project. Just think how many photos are needed, and then how do you stitch them together?

Then you have to blur peoples faces, watch out for public displays of nudity and a whole bunch of other checks.

Unsurprisingly enough getting street view on your google map isn’t any easy task. It has got a lot better recently, with more functions making life easier but nothing to match to complexity or the features of the main google maps site.

What’s Missing

In order to replicate the googles own maps there are certain key features that don’t exist by default, so I’ve had to copy it as close as possible.

The Little Man

The big one, that little man just above the zoom. There simply isn’t an API feature for that. This is why you don’t see any demos that have that man, it’s a Google only interface item.

At a guess, this is a heavily customised GControl with a GMarker mixed in to provide the draggable ability. Not something that can be replicated quickly.

Instead, the comprise is to use a GControl (to find the correct position) and a GMarker (to do all the hard work). The GMarker triggers the turning on of GStreetviewOverlay, loading of the GStreetviewPanorama and a few others.

Although in the example the little man never seems to move, but it does. It’s position is reset on the map move event.

Closing

One thing you notice when your using the API based street view is the lack of a little x.

Strangely enough, it is on the google maps one. With a bit of reverse engineering that problem was overcome (big thanks to Sheldon Els for sorting that part out).

Demo

Enough talk, here is the working demo.

It’s also easy to use..

Using Street View

To make it easy to use I’ve made a jQuery plugin wrapper for the custom SVC prototype object (which handles the grunt work).

First and foremost, make sure you are using v2 of google maps API (no street view yet in v3) and a recent version of jQuery. I tend to use google.load() for kind of thing.

<script type='text/javascript'>
  google.load('jquery', '1.3');
  google.load('maps', '2', {"other_params":"sensor=true&key=YOUR_GOOGLE_KEY"});
</script>

Make sure you have set up your markup to something sensible

<div class='example' id="map_street_view">
  <div id="gmap" class='gmap'></div>
</div>

As always, style the google map

#gmap{
  width:100%;
  height:350px;
}

Make a new instance of a google map

<script>
var MAP = new GMap2(document.getElementById("gmap"));
</script>

Configure the defaults for map, position, zoom etc.

<script>
var latlng = new google.maps.LatLng(52.502625,-1.893997),
    opts = {zoom: 12, center: latlng}
    ;
MAP.setCenter(opts.center, opts.zoom);
MAP.setUIToDefault();
</script>

Triggering street view at this point is easy, in fact, it’s one line

<script>
jQuery('#gmap').streetview({map:MAP, icon_image: "path/to/man-marker"});
</script>

All you have to do is pass in the GMap2 you just made and the path to the image file for the man.

Configurable Options

Say you don’t want to use the default ids that the plugin makes use of, well thats ok, you can just change them.

These are the default settings:

map:false,
icon_image: "street-view.png",
control:false,
selector_ids:{
  map_container:false,
  control_container:"sv_control",
  control_ui:"sv_ui",
  control_text:"sv_text",
  street_view: "gstreetview"
  }

What they mean…

map – this is the GMap2 object
icon_image – path to the image for the marker
control – the custom SVC (and extended GControl) object
selector_ids
map_container – auto generated by called map.getContainer().parent
control_container – id of container for the custom control (if the selector isn’t there the markup is inserted)
control_ui – id of container for part of the custom control
control_text – id of container for part of the custom control
street_view – the id of the container for the street view flash object (if the selector isn’t there the markup is inserted)