Google Maps and IPhone-like experience

When I saw Steve Jobs keynote announcing IPhone, I liked one UI feature very much. It was something I call ‘thrown scroll’. You know what I mean? If not, go and watch this video (1:30 after start, 1:20 before end):

http://www.youtube.com/watch?v=s_f-KK140vM

OK, now You know what I mean. Now I wanted to get similar experience with Google Maps drag and drop. Why? I do live in area where Google Maps does not offer geocoding. Well, it does offer but not as detailed as for US and Western Europe (You can find bigger cities, but can forget about search by street names). Classic map dragging is to slow and annoying when You have to scroll several screens. So last night I sat to keyboard and around 4 AM I got this result:

http://nhw.pl/download/iph.html

Somehow it works better in IE (smoother scrolling) than in FF and requires broadband network connection since it downloads a lot data. Don’t throw map to fast, it works better for slower and delicate movements. Wait for slide end before You try again, since current version does not check if user started another drag, and effects add to itself – in case You throw it in other direction it will move in strange directions.

How I got this effect?

I start with loop set by recursion setTimeout call, and changing every time map center with map.setCenter() call. However slide was very roughly and refresh rate was to low. You could not see what happens on screen ;-) until move stopped after loop end. I tried to fix it experimenting with steps in which move was done and with time span between setCenter() calls. But no result. It looks like after setCenter() whole viewport is redrawn, so it takes time and can not be called smooth move.

Then I recollect that opening info window moves viewport to accommodate window in smooth way, so this should be possible. And then in API documentation I found GMap2 method panTo() which does what I needed – changes center in smooth way. With this function thrown drag works much better.

It for sure needs polishing, but I like it anyway. And do You like this or it sucks as drag mode?


Comments

3 responses to “Google Maps and IPhone-like experience”

  1. Google, but did not found any (are they some?), so last night I wrote a poc: <http://nhw.pl/download/iph.html&gt; Try to make drag on this map. More on what I wanted to do, why and how on my blog: <https://nhw.pl/wp/2007/04/03/google-maps-and-iphone-like-experience/&gt; Does anyone find this useful? Or maybe some ideas how to make it more useful? Best regards, — Witold Rugowski https://nhw.pl/wp/ (EN blog) http://nhw.pl/pl/ (PL blog) == 2 of 2 == Date: Tues, Apr 3 2007 4:32

  2. are interested in any of those topics You might find his blog interesting. Today he came out with idea to create iPhone like “throw scroll” experience for looking at Google Maps – interesting :). At least for me :). If you want to see it just go to Vitek’s blog and test it on his test page. [IMG]

  3. Excellent example, thanks for taking the time to do it.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.