You Are Here (with Safari on iPhone)

Update [October 31, 2011]

See Here We Are Again for the latest update in this saga!

Since Apple announced the iPhone OS 3.0 update at WWDC a few weeks ago, I’ve been eagerly anticipating the addition of location services to Safari (Webkit).

Safari on iPhone

Until now, providing an iPhone 3G user with a map and an indicator of their current position required building a native iPhone application in Objective-C and getting approval from Apple to distribute said app via the App Store. Not fun.

Well now that OS 3.0 is out, we can take advantage of Safari’s newly baked-in geolocation services and some other niceness to do the very same thing. (jump to the map)

Native Geolocation

Safari now gives us navigator.geolocation from the W3C Geolocation API Draft Spec and all the magic that goes with it: getCurrentPosition (one time retrieval of location), watchPosition (continuously updated location), and clearWatch (stop watchPosition). (If you’re browsing with iPhone, Android, or Firefox 3.5 right now, take a peak at your raw geolocation info.)

We want the location marker to follow us around, so we’ll choose watchPosition. The following provides the basic format we’ll follow, though the final code will be different as we add the Google Maps juice:

  1. function displayLocation(position){
  2. var latitude = position.coords.latitude
  3. var longitude = position.coords.longitude
  4. // do something with this new information
  5. }
  6.  
  7. function handleError(error){
  8. switch (error.code){
  9. case error.PERMISSION_DENIED:
  10. alert('Sorry. Permission to find your location has been denied.')
  11. break
  12. case error.POSITION_UNAVAILABLE:
  13. alert('Sorry. Position unavailable.')
  14. break
  15. default:
  16. alert(error.code)
  17. }
  18. }
  19.  
  20. navigator.geolocation.watchPosition(displayLocation, handleError)

When this code is run in an iPhone 3G with OS 3.0, the browser asks for permission to use your location. If permission is granted, the displayLocation function is called; if not, the handleError function is called. Now let’s do something useful with this location information.

iPhone location permission

Google Maps

Google Maps released a welcome upgrade to their mapping API this past spring. With the still developing API v3, they tossed out the API key, rewrote the code, improved the namespacing, and much more. In the interest of playing with all things new, we’ll use this version of Google Maps. And in the interesting of keeping the focus on the new geolocation shizzle, we’ll skip the in-depth Google Maps discussion and just cover some abstract goals.

Initially we’ll center the map somewhere in downtown Austin, Texas. Then, when our previously mentioned displayLocation function gets called, we’ll add a marker and re-center the map on that marker—just like the big kids do with their fancy native apps.

Inside displayLocation, we’ll create the marker just once and then update its position on subsequent calls. Every time the iPhone changes location, the marker moves to follow. (extra credit: if you want to create a breadcrumb trail, take out the if/else stuff to create a trail of new markers on each iteration)

Lastly, we add an onload attribute to the body element to invoke our geolocation and Google Maps magic after the page loads. We now have a cool mobile map that tracks your position as you’re moving.

iPhone location marker

CSS3 Animation

We could certainly stop here and pat ourselves on the back, but let’s apply one last bit of polish. If you look at the native iPhone Map app, you’ll notice that the blue location icon pulses in and out to keep your attention. Hmmm. Our current location marker is lovely PNG image with alpha transparency that smoothly overlays the background map but it doesn’t pulse. Unfortunately, we can’t animate PNGs. We could fade the image in and out with some more JavaScript coding, but let’s take a look at a better solution, compliments of the new Safari.

When the CSS animation draft was announced, it sounded rather odd to add behaviors (JavaScript’s forté) to a styling spec (CSS). But given our current problem, we start to see the wisdom. We can select and animate the location marker with CSS3.

As demonstrated by Surfin Safari, first we describe the effect with @-webkit-keyframes, then we select the marker element from the DOM and apply the animation with -webkit-animation:

Update [July 1, 2009]

Google just changed their API so that our custom marker image (blue_dot_circle.png) is now a background-image for a div rather than a separate image element (img).

Therefore, our CSS selector needs to be modified so that we can pulse the right element. A quick change from #map_canvas img[src="blue_dot_circle.png"] to #map_canvas div[style*="blue_dot_circle.png"] in the code below solves the problem.

  1. @-webkit-keyframes pulse {
  2. 0% {
  3. opacity: 1.0;
  4. }
  5. 40% {
  6. opacity: 0.25;
  7. }
  8. 100% {
  9. opacity: 1.0;
  10. }
  11. }
  12. #map_canvas div[style*="blue_dot_circle.png"] {
  13. -webkit-animation-name: pulse;
  14. -webkit-animation-duration: 2s;
  15. -webkit-animation-iteration-count: infinite;
  16. -webkit-animation-timing-function: ease-in-out;
  17. }

It’s a simple solution that provides the effect we need without the added overhead of JavaScript.

Feel free to view this map with your normal browser, you’ll get a plain old map of Austin—not much more. For the real show, open it in iPhone 3G and find your current location. Then start moving.

When you get back to the desk, crack open the source code to see how it was all brought together.

Next

So there it is: a breezy introduction to what is possible with the iPhone’s new Safari geolocation powers and Google Maps. We certainly don’t have to stop here. We haven’t even mentioned that other mobile devices have or will have these very same powers. That web developers now have direct access to these powers means that we can expect a torrent of location-aware innovation.

See you at the mall.

Reference Links

Update [February 24, 2010]

See iPhone Safari Geolocation Map Update for a fix for the phantom marker issue noted in the comments.

Update [April 2, 2010]

Make sure you also download the blue marker image and place it in the same directory as your map page. Sorry, I should have been more clear about that.

Update [October 31, 2011]

See Here We Are Again for the latest update in this saga!

66 Comments (+)

  1. iPhone Safari WebApps Now Have GPS Functionality | iPhone 3G Tricks

    [...] savvy developer at the website Plebosaur noted that Safari now has native geolocation, and he did some digging within the [...]

  2. With OS 3.0, iPhone Safari can now have GPS functionality and WebApps can benefit | iPhoneIndiaBlog.com

    [...] savvy developer at the website Plebosaur noted that Safari now has native geolocation, and he did some digging within the [...]

  3. Geolocalización en el iPhone/iTouch 3.0 | aNieto2K

    [...] Una de las muchas mejoras que el nuevo firmware del iPhone 3.0 ha traido es la posibilidad de geolocalizar dispositivos desde Safari. [...]

  4. Geolocalización en el iPhone/iTouch 3.0 : Blogografia

    [...] Una de las muchas mejoras que el nuevo firmware del iPhone 3.0 ha traido es la posibilidad de geolocalizar dispositivos desde Safari. [...]

  5. Sergio

    Thanks for your posting! It’s awesome.. Right now I’m struggling to create an app to use this functionality that now we can use directly from a web page.. making things easier… I like it!

  6. leemr

    stedman design…s awesome pages.

    the page works correctly on my iphone. however, when i copy the source and run it from my localhost and even from my own server, i get no blue dot. the map is correct and changes, i just can’t see the blue dot!

    why would this be? and how do i fix it? “i might be invisibly here”???

    i put the source in a .html file.

  7. McBryano

    This code has stopped working and leads to the iPhone bringing up endless Error Code: 0 message badges. Do you have any understanding as to why that might be?

    Thanks

  8. Steve Stedman

    @McBryano Drat! I’m looking into it.

  9. Steve Stedman

    @McBryano at about the time you noticed the errors, it appears that Google changed their API a bit. Modifying the following methods fixed the alerts (I guess they prefer camel case):

    • set_position() is now setPosition()
    • set_center() is now setCenter()

    Apparently they’ve been up to other shenanigans at the Googleplex as well. Now I have a phantom marker image that I cannot shake. Thoughts anyone?

  10. Steve Stedman

    @leemr did you happen to copy the image to your map folder? http://plebeosaur.us/etc/map/blue_dot_circle.png

  11. Ben

    Thanks for this post ! I test your map on my iphone 3GS and i see 2 blue circles (which one is superposed near the second). Do you know why ?

  12. Steve Stedman

    @ben I noticed that too. I took a quick look at the code (and Google’s evolving docs) and couldn’t immediately figure out where that phantom image was coming from.

    I’ll dig in deeper as soon as I can. If you find an answer beforehand, please share. Thanks!

  13. Ben

    Ok Steve, if i find the answer i’ll post a comment here.

  14. Ben

    i don’t find how resolving the problem but i think we can use Jquery to obtain a same result : Jquery has some interesting effects like fade, pulsate etc…

  15. Mike

    I am having the same problem using webkit to animate the custom Google maps icons. Were you able to find a solution?

  16. Steve Stedman

    @Ben, @Mike, I think I found the source of the phantom image, but I’m not sure how to correct it yet.

    It seems that Google is now inserting a duplicate marker image with opacity 0.01. My CSS selector #map_canvas div[style*="blue_dot_circle.png"] just looks for that image in any div and then pulses the opacity. So if there are two images, one that’s normally visible and one that’s normally all-but-visible, they’ll both start pulsing at full opacity.

    I thought that that 2nd marker image might be a rogue shadow, but even when adding a shadow there were 2 pulsing images on top. At this point, I’m really not sure what that 2nd image is about or why it is off center.

    I’ll keep snooping as I have time.

  17. Steve Stedman

    I posted a fix for the phantom markers in a new post: iPhone Safari Geolocation Map Update.

  18. iPhone Safari Geolocation Map Update φ plebeosaur.us

    [...] You Are Here (with Safari on iPhone) φ plebeosaur.us February 24th, 2010 at 4:43 pm [...]

  19. Jurgen Fechner

    I copied the source of the page served by this url: http://plebeosaur.us/etc/map/ and put it on two separate web servers at home. One was a Keyfocus Webserver the other is an Apache 2.2. When I go to your url with my iphone I get what I expected, a map of my location with a pulsating blue dot.
    When I access the copied page with my iphone on the Keyfocus server I get the same map, a crosshair for a few seconds then that disappears and only the map remains.
    I then installed Apache 2.2 and put that same page there. When accessing it with my iphone I get four javascript errors on my iphone and the page wont load at all.

    What is happening here?

  20. Jurgen Fechner

    Hi,

    Does anyone have any comments?

    Best Regards
    Jurgen

  21. Steve Stedman

    @Jurgen, did you also copy the marker image (http://plebeosaur.us/etc/map/blue_dot_circle.png) to your server (I’ll add that to the instructions above). I think that may solve the missing pulsating blue dot issue.

    The other issue is a bit odd. I’ll see if I can replicate it here.

  22. Ben

    it works great for me Steve ! I test on Android 2.1 and ios 4 and it’s ok !

    Thanks a lot for your fix !

  23. Letter Tray

    *-* I am really thankful to this topic because it really gives great information ‘,-

  24. Ben

    It seems the pulse effect doesn’t work anymore… Google seems to change his maps api code…

  25. Ricky

    Hey, thanks for the tip!
    Would it be possible to use this to show your location, and also all local amenties, eg restaurants on the same map!?

  26. nola-designer

    I developed a map using the gmaps demo to create markers based on rank/info in a google docs spreadsheet. Is it possible to add your code to my existing app? I don’t want to paste all of my code in here since it is fairly large. I am working on a school project.

    Please let me know. I appreciate it much!
    -j

  27. Steve Stedman

    @Ricky possibly… though that’s a bit beyond the scope of this post. You might start at the Google Maps API and then look at Yelp, Gowalla, etc.

  28. Steve Stedman

    @Nola-designer by all means, take the code and use as you wish. Thanks for asking.

  29. Hotel in Thailand

    Excellent post!! I really like your site!!

  30. Bathroom

    Nice post!!! Thank you very much for sharing.

  31. Dervila

    I¡¦m no longer positive where you are getting your information, but good topic. I must spend some time finding out more or understanding more. Thank you for wonderful info I was looking for this info for my mission.

  32. John

    Just as an example of how the google kit works…

    I am playing with your examples. ( which are cool, btw) Thank you for publishing them. I live in Michigan, but my iPhone 4 and old 3GS(without cell service) are sometimes reporting that they are Maine. It just so happens that I went on vacation to Maine last week and I took my Airport with me. I wonder if the Airport, attached to the cable company up there, somehow registered itself with the big google database? It only happened a few times, and only after the timeout period, maybe?

    I can get it to do this:

    Refresh your etc/map page and it will locate me a couple thousand feet from my house.
    Switch over to Maps app, which has large location circle. The circle will get small as it homes in on my house.
    Switch back to Safari and the map zooms to my house for about a second, then switches to the place in Maine!

    Let the iPhone go to sleep and wake it back up and its back to a couple thousand feet from my house.

    The Maps app itself would occasionally center itself on the cottage in Maine.

    (My Michigan locale has DSL from local company, BTW)

  33. Hortencia Fossum

    Pretty nice post. I recently came across your site as well as desired to mention that I have truly cherished browsing the website posts. After all I’m going to be registering to the feed and i also we do hope you write once again soon!

  34. Braden

    I like this site as well as have book marked it. I will look to go through in information on my journey

  35. Ziyad

    Great article, thanks for sharing. Since Google keep changing things, the pulse wont work. However, I went through the comments and here is a fix proposed by Velko (based on a tip by Chris), change:

    #map_canvas div[style*="blue_dot_circle.png"]

    TO:

    #map_canvas img[src*="blue_dot_circle.png"]

    and the pulse should work.

    As for John’s comment regarding the accuracy of the geolocation, I have used Neil Craig’s technique and it worked with me perfectly, that’s his post:

    http://www.thedotproduct.org/2010/04/example-of-navigator-geolocation-watchposition/

    Doing those two things you will end up with an accurate location with an attractive animated marker. Just wanted to mention that simple thing, all the best.

  36. Steve Stedman

    @John, I added @Ziyad’s fixes in my latest update. See if that works for ya and thanks Ziyad!

  37. voip reseller opportunities

    voip reseller opportunities…

    [...]You Are Here (with Safari on iPhone) φ plebeosaur.us[...]…

  38. boutique nike france

    This webpage has so a lot great details on it, I verify on it everyday. I wish other websites spent as a lot work as this one does generating data legible to readers like myself. I recommend this write-up to all of my facebook friends. This webpage will make some massive passive profit I’m positive. I hope my site does along with this one, it refers to jewelry consumers houston.

  39. bathroom designs

    hello there and thanks in your information – I have definitely picked up anything new from proper here. I did then again expertise some technical issues the usage of this web site, since I experienced to reload the website lots of times previous to I could get it to load properly. I had been considering if your hosting is OK? Now not that I am complaining, however sluggish loading instances occasions will very frequently have an effect on your placement in google and could harm your high quality rating if ads and ***********|advertising|advertising|advertising and *********** with Adwords. Well I’m adding this RSS to my e-mail and could look out for much extra of your respective exciting content. Make sure you replace this again very soon..

  40. best background check

    I am glad to be a visitant of this sodding web blog, appreciate it for this rare information!

  41. #rbs2012com

    cheap red bottom shoes are usually can be an engineering marvel, you could have enjoyment as well as innovative, do you wish to love this fashion trend? red bottom shoes outlet can be your top fashion leader, while wearing this luxury handabgs, you will find out that you’re enjoy this type of luxury brand, comfortable feeling can be found in your case, the most crucial is you should have a cheap price. red bottom pumps outlet are famous around the globe, a lot of people want to have this type of luxury brand, because red bottom sneakers can present you with luxury enjoyment. If you buy from from our red bottom boots online stores, you can have the most reasonable price with free delivery and fast delivery.

    In accordance with the Christian Louboutin Official Website, cheap red bottom shoes is definitely imported from Christian Louboutin factory, you are able to relax on the grade of our products.

  42. Création de site internet paris

    Its such as you learn my mind! You seem to understand a lot approximately this, like you wrote the e book in it or something. I feel that you can do with a few percent to force the message house a bit, however other than that, that is wonderful blog. A great read. I’ll definitely be back.

  43. k coffee

    My friend recommended this blog, and she was right in every way, Keep up all your great work.

  44. mozila fire

    You are so hilarious!!! I have become obsessed with your blog and
    I spend most of my work hours reading all your
    archives. And I made an account JUST to post comments.

    I wish I’d found out about sooner, and I wish you updated as much as you once did! You must be constantly busy now though because you’re
    so famous!!

  45. Dellmont Voip Credit,Betamax,VCC,CashU,UGC,Skype,,TF,GameCard,LR,WMZ,Paypal,Payza,Prefect Money,iTunes,Premium Account,Jumblo,Rynga,Betamax,Voip Reseller,official voip reseller,VoipBuster,VoipBusterPro,VoipStunt,InternetCalls,VoipDiscount,FreeCall,VoipChe

    It’s truly a great and helpful piece of info. I am glad that you just shared this helpful info with us. Please stay us informed like this. Thank you for sharing.

  46. Darby

    Thanks for sharing your thoughts on wrinkle cream reviews.
    Regards

  47. Plumbers north sydney

    gkfnuqmfcfptbvs, Commercial plumber sydney, JxUTSZv, [url=http://plumberinsydneyau.com/]Plumber Sydney Cbd[/url], vpuMydL, http://plumberinsydneyau.com/ 24 Hour Plumber Sydney, hjAhYKu.

  48. seo optimization price

    It’s an awesome post designed for all the internet viewers; they will obtain benefit from it I am sure.

  49. sites

    I as well as my pals ended up checking the good points from your site then instantly I had a horrible feeling I never thanked the website owner for those secrets. All of the ladies ended up absolutely very interested to read through them and have in effect certainly been taking advantage of these things. Thank you for being well helpful and also for settling on certain high-quality topics millions of individuals are really eager to learn about. My very own sincere apologies for not expressing appreciation to you earlier.

  50. costume contact lenses

    It’s going to be finish of mine day, but before ending I am reading this great post to improve my knowledge.

  51. 0735zxwc.com

    Its like you read my mind! You seem to know a lot about this, like you wrote the book in it
    or something. I think that you could do with some pics to drive the message home a little bit, but other than that, this is great blog.
    An excellent read. I’ll certainly be back.

  52. puma

    An outstanding share! I’ve just forwarded this onto a friend who had been conducting a little homework on this. And he in fact bought me lunch because I stumbled upon it for him… lol. So let me reword this…. Thanks for the meal!! But yeah, thanx for spending the time to talk about this subject here on your internet site.

  53. huddlebuy

    I’m gone to say to my little brother, that he should also pay a visit this blog on regular basis to take updated from latest information.

  54. Personal Injury Lawyer Louisville

    Thank you for the auspicious writeup. It in fact was
    once a leisure account it. Glance complex
    to more brought agreeable from you! By the
    way, how can we keep in touch?

  55. FlouslyCrerse

    [url=http://www.ez-dayss.com/]http://www.ez-dayss.com/[/url]
    [url=http://www.ez-dayss.com/]ez-days[/url]
    マリークワント 店舗,マリークワント ポーチ,マリークワント 財布,マリークワント バッグ,マリークワント ペンケース,MARY QUANT 財布,MARY QUANT ポーチ,MARY QUANT 店舗熱販売中、ez-days.comではマリークワント 店舗,マリークワント ポーチ,マリークワント 財布,マリークワント バッグ,マリークワント ペンケース,MARY QUANT 財布,MARY QUANT ポーチ,MARY QUANT 店舗 超激安
    [img]http://www.ez-dayss.com/includes/templates/ez-days/images/brand/top03.jpg[/img]
    http://www.ez-dayss.com/アナスイ バッグ セール

  56. cheap uggs nightfall boots 5359

    9999 The give good results you’ve got undertaken has gotten you this much. These station duplicate purses in many cases are the clone for your genuine exquisite channel totes.
    cheap uggs nightfall boots 5359

  57. nba jerseys for cheap

    Justin Bieber may well only be 18 several years aged, but it is actually no magic formula the pop sensation has now achieved a amount of achievement that is basically extraordinary for any person, considerably less a teen. She’s an enormous troop supporter together with a magnificent American.
    nba jerseys for cheap

  58. babyliss curling iron

    red bottom shoes the red bottom shoes add fashion style to casual days,welcome buy louboutin outlet vegas louboutin replica babyliss pro u styler straightener christian louboutin outlet christian louboutin red bottom shoes for cheap nano titanium babyliss replica louboutin mens shoes red bottom high heel shoes replica red bottoms free shipping and huge discount christian louboutin replica mens http://www.ritaschoicesonline.com/louboutin-outlet.html red bottom shoes replica michael kors christian louboutin shoes replica christian louboutin replica christian louboutin replica michael kors outlet
    babyliss curling iron

  59. louis vuitton outlet

    new nike nfl jerseys cheap josephscottsalon.com/soccer-jerseys-from-china.php soccer jerseys cheap the cheap jerseys is the first selection for the fashion pursuers cheap youth football game jerseys new england patriots jerseys cheap china wholesale nike nfl jerseys cheap nfl jerseys china kids saints jerseys cheap cheap nfl jerseys nike cheapest soccer team jerseys cheap jerseys free shipping buy cheap nfl jerseys authentic soccer jerseys from china cheap jerseys from china cheap nfl jerseys online hot sale, wholesale price & free shipping wholesale jerseys cheap nfl youth jerseys free shipping cheap nfl nike jerseys seattle cheap jerseys
    louis vuitton outlet

  60. outlet louis vuitton

    red bottoms shoes buy replica red bottoms online from us,free shipping peedeesierraclub.org/replica-louboutin.html cheap chi hair straightener tips best fake oakleys newest babyliss straightener clearance sale online enjoy unique design christian louboutin replica heels cheap fake oakleys for sale with wholesale price & free shipping red bottom shoes babyliss flat iron fall in love with big discount fake oakleys hot sale in our website replica louboutin sneakers cheap chi hair straightener f2construction.com replica christian louboutin calypso pumps black fake oakleys radar red bottom shoes lady cheap red glitter shoes on sale with huge discount & free shipping discount michael kors handbags babyliss pro nano titanium jumbo 8 roller set
    outlet louis vuitton

  61. cheap soccer jerseys 4xl

    cheap louis vuitton handbags replica cheap louis vuitton shoes cheap imitation louis vuitton http://thinkovision.com/cheap/ replica louis vuitton wallets louis vuitton outlet stores las vegas louis vuitton replica denim wallet replica louis vuitton louis vuitton replica handbags replica louis vuitton replica louis vuitton bags louis vuitton factory outlet usa replica louis vuitton wallets buy louis vuitton replica luggage afreshandanew.org/louisvuittonreplicascarf.htm authentic louis vuitton handbags outlet factory online store louis vuitton shoes for women cheap cheap louis vuitton purses louis vuitton authentic handbags outlet louis vuitton eva clutch jack for sale
    cheap soccer jerseys 4xl

  62. cheap authentic basketball jerseys

    cheap authentic nfl jerseys cheap authentic jerseys cheap soccer jerseys for teams china cheap jerseys nba jerseys cheap cheap soccer jerseys cheap nfl nike jerseys sales here cheap jerseys online – buy wholesale nfl, nba, mlb, nhl & soccer jerseys with free shipping http://dancesportwales.org/football-jerseys/ cheap jerseys cheap authentic mlb jerseys cheap jerseys cheap nfl jerseys cheap houston texans jerseys wholesale cheap national team soccer jerseys cheap jerseys cheap wholesale jerseys china us cheap practice jerseys football cheap european soccer jerseys cheap football practice jerseys mesh
    cheap authentic basketball jerseys

  63. cheap sneaker

    Want to be a fashion man or woman, come to our jordans shoes discount online store to buy the discount jordans shoes on sale. Cheap jordans shoes are waiting for you!

  64. cheap christian louboutin pumps outlet

    cheap nfl jerseys from china best site for wholesale jerseys china wholesale jerseys nfl wholesale jerseys reebok cheap jerseys cheap jerseys free shipping cheap jerseys buy cheap authentic jerseys in our professional outlet store with free shipping and best service cheap mlb jerseys cheap jerseys online – buy wholesale nfl, nba, mlb, nhl & soccer jerseys with free shipping order cheap nfl jerseys online with free shipping come here and choose cheap nba jerseys free shipping from official outlet store cheap authentic replica soccer jerseys cheap soccer jerseys cheap jerseys online – buy wholesale nfl, nba, mlb, nhl & soccer jerseys with free shipping cheap jerseys free shipping cheap jerseys wholesale jerseys cheap soccer jerseys wholesale nike nfl jerseys free shipping
    cheap christian louboutin pumps outlet

  65. ガがミラノ時計 レディース

    最新作のガガミラノ 通販 http://gagastore.kiyo-masa.com/
    ガがミラノ時計 レディース

  66. MCM 財布 通販

    nike blazer saleネット商売 http://nikediscout.webnode.no/
    MCM 財布 通販

Leave a Reply