Archive for March, 2008

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:

GStreetviewPanorama.prototype.getPanoid = function()
{
return this.I.zj;
}

Enjoy!

Comments (2)

More wasted time with ascii

Remember those magic eye posters from 10-15 years ago? The ones where you make yourself cross-eyed to reveal the hidden 3D dinosaur, Eiffel tower, city, landscape, solar system, or whatever, and then proceed to describe it in painstaking detail for your unfortunate buddy who can’t see anything but a bad collage?

Well, they’re called autostereograms and they really do involve brain trickery. Even more tricky is that you can make an autostereogram using nothing but ascii characters.

__|____|____|____|____|____|____|____|____|____|____|____|__
CanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyo
ufindufindufindufindufindufindufindufindufindufindufindufind
the3Dthe3Dthe3Dthe3Dthe3Dthe3Dthe3Dthe3Dthe3Dthe3Dthe3Dthe3D
pictupictupictupictupictupictuictuictuictuictuictuictuicttui
re?Care?Care?Care?Care?Care?Cae?Cae?Cae?Cae?Cae?Cae?Cae?CCae
nyoufnyoufnyoufyoufyouffyouffyuffyufyufyufyufyyufyyufyyuffyy
indthindthindtindtindtinddtindtindtndtndtndtndtnndtnndtnnndt
e3Dpie3Dpie3Die3DieeDieeDiieeDieeDieDieDieDieDieDiieDiieDDii
cturecturectrectrrectrectreecteecteeceeceeeeeeeeeeeeeeeeeeee
?Cany?Cany?Cny?Cnny?Cnn?Cnnn?Cnn?Cnn?nn?nnn?nnnnnnnnnnnnnnnn
oufinoufinoufinoufinouinouiinoiinoiiniiniiiniiiniiniiiniiiin
dthe3dthe3dthe3dhe3dhe3dhee3dhe3dhe3de3de33de33d33d333d3333d
DpictDpictDpictDictDictDicctDictDictDctDcttDcttDttDtttDttttD
ure?Cure?Cure?Cue?Cue?Cue??Cue?Cue?Cu?Cu?CCu?CCuCCuCCCuCCCCu
anyouanyouanyouanyouanouanoouaoouaoouoouooouoooooooooooooooo
findtfindtfidtfiddtfiddfidddfiddfiddfddfdddfdddddddddddddddd
he3Dphe3DpheDpheDDpheDpheDpphepphepphpphppphpphpphppphpppphp
icturicturictrictrictrictrrictrictrctrctrccrccrccrrccrrcccrr
e?Cane?Cane?Cae?Cae?Cae??Cae??ae??a??a??a??a??a???a???a????a
youfiyoufiyoufioufioufiioufiiofiiofiofiofiofioffioffioffiiof
ndthendthendthendthendthendthedthedthedthedthedthedthedthhed
3Dpic3Dpic3Dpic3Dpic3Dpic3DpicDpicDpicDpicDpicDpicDpicDpiicD
ture?ture?ture?ture?ture?ture?ture?ture?ture?ture?ture?ture?
CanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyoCanyo
ufindufindufindufindufindufindufindufindufindufindufindufind
__|____|____|____|____|____|____|____|____|____|____|____|__

Generated with AsciiStereo - Visit: http://www.kammerl.de

Even cooler is that you can make a a moving ascii autostereogram - check out Julius Kammerl’s example. It’s a bouncing ball, but I didn’t tell you.

Comments (2)

iCalendar in Mozilla Thunderbird

I use Mozilla Thunderbird as my email client - it’s free, it’s simple, and it works on both my PC and MacBook, making it easy to transfer account settings back and forth. Heck, it’s even open source, to make me warm and fuzzy inside.

One drawback, however, is that Thunderbird doesn’t automatically support iCalendar attachments of the sort sent by Outlook and others, and if inline attachments aren’t turned on (and they aren’t by default), your messages appear as if the attachment didn’t exist. I’d had a nagging suspicion that I was getting invites I hadn’t seen, and it was confirmed when I missed a meeting folks thought I should know about…

Thankfully, there’s a nice solution to this problem, but it wasn’t completely straightforward and it required an adventure through google-land, forums and such, so I thought I’d document it here.

First, install the Mozilla Lightning plugin. You’ll have to download it to your local machine, navigate to tools / add ons in Thunderbird, select the plugin from your local directory, install it, and then restart Thunderbird. This will build a calendar app into your Thunderbird environment (notice the calendar button on the bottom left) and .ics (iCalendar) attachments should now appear as message attachments.

The next step is to get these attachments into the calendar. If you’ve already displaying attachments inline, great, otherwise, navigate to Tools / Options / General and click on Config Editor. Then, find the preference called ‘mail.inline_attachments’, and set it to true (dbl-click should do).

Now, if you open a message with an iCalendar attachment, Lightning will nicely ask you if you want to accept or decline the event. Perfect!

Comments (4)