Thursday, September 25th, 2008

Google Maps JavaScript API on the iPhone

Category: Mapping

<p>

When you link to Google Maps on the iPhone, it opens up the naive application to give you the full iPhone experience. Alastair James wanted to use the Google Maps JavaScript API on the iPhone, and wrote up his thoughts:

Before the newest version of mobile Safari, this would not have been possible. Fundamentally you cant drag the map! However, with the new version Apple introduced a javascript API for sensing single and double finger drag events.

So, I went about knocking up a very basic test version (try it on your iPhone). Is buggy, basic and sub-optimal, but proves it could work nicely. Try zooming with the double finger pinch action!

I also tried the new webkit CSS transforms to allow free zooming and rotation, however they are buggy and slow on the iphone! Oh well! Anyway, maybe we can have google maps lite on the iphone?

Related Content:

Posted by Dion Almaer at 8:48 am
7 Comments

+----
1.9 rating from 82 votes

7 Comments »

Comments feed TrackBack URI

I think the “naive” (‘native’) mistype is quite freudian and funny. :)

Comment by shadedecho — September 25, 2008

Old news. Mobile Safari has had ongesture* and ontouch* events for months now, and the fact that nobody has come out with a browser-based maps mashup for the iphone speaks to the Mobile Safari browser’s unfitness for the job. The image capacity limit (stops downloading new tiles after 2 megapixels), short-term memory leaks, and performance problems are probably fixable on the devices we have today, but the Mobile Safari team just hasn’t prioritized them.

Comment by karst — September 25, 2008

@karst Yes the image capacity limit is a problem (however I think its 2 megapixels per image, up to a maximum of 30 Mb total for page). In my experiments it stops downloading after about 200 tiles.

However, it depends on what you want to do with it. I doubt we will see any “explore the world” type maps applications, but if you want to show (say) a hotels location in a city, with a few points of interest its probably fine. Indeed the solution might be to limit zoom levels (i.e. cant zoom out further than X or in further than Y) and also limit the loading of time to within a certain distance of the starting location…

Comment by aljames — September 25, 2008

Alastair, unfortunately such use of Google tiles (writing your own API instead of using theirs) violates Google Maps Terms of Use and is not allowed (MS/Yahoo Maps have similar points in their ToS), so I strongly recommend using the free OpenStreetMap or CloudMade tiles instead.

By the way, I also wrote a JS Maps API for iPhone recently and have a similar experience – generally it works nicely, but webkit-transform for mobile Safari is very buggy and currently causes the device to slow down to an unusable state.

Comment by Mourner — September 25, 2008

@Mourner Yeah, I know its naughty but just a proof of concept (plus I wanted to see how long it took google to contact me (8 hours not bad)), I would have used open street map had I wanted to continue. However, I have not seen CloudMade before, which I think might be the best solution (i.e. with their small mobile tiles). I just need to add the touch events to that. Should be easy enough! Thanks!

If you were seeing bugs on the iPhone where an element overflows outside its container (even with overflow:hidden) when using CSS transforms, try setting the z-index of the parent to 0 (got that from an apple engineer).

Comment by aljames — September 26, 2008

@Alastair
Thanks for the tip, I would not figure out this myself :)
About Cloudmade (I work there as a front-end engineer) – we are going to release a lightweight open-source library for CM/OSM maps (that will support iPhone out of the box) before the end of the year.

Comment by Mourner — September 26, 2008

@Mourner
Arh I see! Cool. I have been in contact with your head office to get permission to use your mobile tiles in my mini-API in the mean time!

I am also creating a version that caches tiles locally to allow offline browsing of a very limited area (with no zoom).

Comment by aljames — September 26, 2008

Leave a comment

You must be logged in to post a comment.