Google Maps for iPod Touch!

When I got Mel an iPod Touch for her birthday, I knew that the awesome Google Maps app for the iPhone wouldn't be on there. But I didn't know how poorly the Google Maps website would work on the iPod Touch -- dragging the map doesn't work, and all the navigation controls were too small and hard to hit with my finger. It also didn't redirect me to a more appropriate mobile version, and after hunting around for the super-stripped down version, I found it was, err, not "cool" enough for the friggin' iPod Touch! Google Maps Mobile also unfortunately doesn't work on the iPod (no Java :'( ). So I set about writing my own Google Maps interface for iPod Touch with the Google Maps API and the Google AJAX Search API.

I really wanted to be able to drag the map around on the iPod Touch; otherwise, it seems like such a waste of the touch screen! Unfortunately, as I understood it, the webpage doesn't get the normal drag events at all. After hunting around for a while, I found Mihai's attempt at writing a scrolling game for the iPhone and learned that though you don't get the single-finger drag events, you do get two-finger drag gestures, intended to scroll scrollable divs within a page, as scroll events. I placed the Google Maps container inside a scrolling div half its size, so you can "kind of" drag the map around by actually scrolling the containing div. When you scroll to the edge of the div, it resets the scroll position and recenters the map (almost seamless with a fast wifi connection). That works pretty well. (I've also tried translating all scroll events to map.panTo, but it was way too jerky on the iPod to be useful)

I store recent geocodable addresses in a cookie. When you want to go somewhere, you can either type it out or pick it from a drop-down box -- the iPod Touch Safari browser has a pretty nice interface for picking an item from a <select>.

Anyways, here it is! Check it out at www.grapier.com/maps.html. Here's how to use it:

• Drag the map around using two fingers
• Zoom in and out using the buttons on the upper left
• Switch map type, or toggle traffic overlay using the menu on the upper right
• Go somewhere, get driving directions, or search for businesses using the menu on the lower left
• Paginate through local search or driving direction results using the left and right arrows on the bottom right. Hit the "X" button to get out of the search.
• Set a business result as current location by using the pin button on the lower right after you've done a local search. You can then get driving directions to there as usual.
• Open a more detailed page on a business by using the pop-out button on the lowe right after you've done a local search.
• See all directions or local search results at once by scrolling down below the map after you've done a search.

I'm search-engine optimized!

Wow. Try a Google search for "existential blogs". Scroll down the page. ZOMG I'M THE TENTH RESULT!!1

Now, try a Google search for "funny existential blogs". Chances are, this blog will come up as either the first or second result!

Amazingly, this blog is already search-optimized for the keyword "existential"! Holy shit. Incredible, considering how commercial a keyword "existential" is. You'd think all the merchants would be jumping on that.

In fact, this awesome placement on Google is so effective that, just LAST MONTH, the phrase search for "existential blogs" got me TWO referrals from Google! It's a wonder I'm not already a millionaire off of this extremely well-run and interesting blog.

new blogger... and now in colors!

Blogger is out of beta! All sorts of cool features are included, like post labeling and an awesome new widget/template system that gives you drag-and-drop layout editing for the layman, and pretty fine-grained control (by editing an xhtml document) for those who want it.

In the process, they invented their own widget language for defining how widgets work. I don't know how wise that is, but it works reasonably well (if rather difficult to edit in the tiny provided textarea). I was easily able to show a clip of my Google Reader shared items thus: first, add an HTML/Javascript page element. Go to Google Reader, click on "Shared Items", click on "Put a clip on your website", customize your look and feel (I took away all styles), and copy-paste that HTML snippet into your Blogger HTML page element content. There's actually also a Blogger Feed page element for displaying feeds, but it can only show at most five items at a time from the feed (what's up with that?!).

I'm a bit saddened that there's no page element for showing recent posts like you could before. And the Post a Comment page is still, inexplicably, in a pop-up that totally doesn't follow the blog's styles. And I still hate writing blogs in these tiny textareas, though maybe I should start publishing from writely instead...

In any case, after some obvious amount of sweat and labor, I was finally able to gut one of the new Blogger templates and strip it down to the bare essentials with the beautiful Courier New font we all love and enjoy! And, for a bit of holiday fun, I went all crazy and added red to all the headings. It's mad, I know, I know. But I can indulge once in a while. It is the holidays after all!

Google Reader's fairly cool sharing

Google Reader now lets you share your RSS feeds. It's pretty cool; basically, you can label your feed items, and people can subscribe to your labels. So for example, if you have a friend who shares your interests and is an RSS hound, he can go through many feeds and mark only certain ones as "interesting". You, who are much busier and have, say, a job to do, can subscribe to his "interesting" label (itself a feed) to read all feed items that are interesting to him and, by extension, to you. It doesn't quite replace news aggregator blogs (no comments/discussion), but it's a lot more convenient.

Furthermore, you can have a "clip" of your label feed. I've put up a section on the sidebar with some feed items that I've found interesting. The clip comes with a few (fairly ugly) pre-determined themes, but the best part is that you can style yourself with CSS (though this is undocumented). The relevant class names used are:

• The entire webclip box: div.reader-publisher-module
  
• The header: h3
  
• The bullets: ul/li
  
• The source: div.s
  
• The "Read in Google Reader" line: div.f; set display:none; if you don't want it to appear :-)

Enjoy!

trying Hello...

Trying out Blogger's Hello program for image-hosting. I dunno... Isn't it *really* awkward and *really* weird to have to use an IM client to post images to your blog? I've complained about this in an earlier post, and I'm still annoyed. 

ARRUG! And there's no way to specify a title! And it puts that annoying Hello icon above in the post! Damn it.

EDIT: oops, okay, so you can tell Hello to not put that icon there. That's nice. Still annoyed at the non-title though.