Embedding a Google Maps street view widget on your site
Update - Turns out panoIds are only unique to a session, and so my example is broken and no longer useful. Unfortunate, really.
Let the fun begin! Street view support is baked into the latest (unofficial, 2.103) version of the Google Maps API. Check out Google Maps Mania and Mapperz for some good coverage and a couple examples. If you’re a developer, Mike Williams, as always, has dug through the code and produced some speculative documentation.
Street view support is essentially comprised of 3 classes: GStreetviewOverlay, which creates a tile layer overlay for areas having street views, GStreetviewClient, to look up panoramas by lat/lng, etc.., and GStreetviewPanorama, which inserts a flash movie into the DOM and manages points of view.
I can imagine plenty of applications for this (walking tours anyone? Can we make this work with GDirections?), but here’s a simple one for now - since a street view panorama is simply a flash movie initialized via flashvars, you can actually set up a panorama without a map, like so:
Getting your hands on the right parameters is rather cumbersome, so I’ve written up a quick little app that’ll permalink a view for you, similar to maps.google.com, plus give you some iframe code to embed. Check it out. (Disclaimer: You may encounter intermittent JavaScript errors on info windows in IE. Sadly, I can’t hack it because the bug is in code dynamically served by Google.)
A little heads up on how the example works, since I had to go off the radar a little: A view is defined by panorama id, yaw (rotation in degrees around vertical axis), pitch (rotation in degrees around horizontal axis), and zoom level. If you’ve got these parameters, you can set the view using streetviewclient.getPanoramaById and panorama.setLocationAndPOVFromServerResponse. The API has a routine to grab yaw, pitch, and zoom (getPOV), so that part’s easy, but there’s no routine to grab the current panorama id. It’s stored on an exposed object, though, so this little hack does the trick, at least until v2.104:
{
return this.I.zj;
}
Enjoy!
