HTML5 - code example of Geolocation in an iPhone
bobleah 270000CN12 Comments (32) Visits (83643)
code example of implementing the drag & drop interface. Today, I decided to explore the Geolocation API by coding up an example of its usage. The Geolocation method returns a number of values... which by themselves make for a fairly boring demonstration. I wanted to combine my example exercising the Geolocation API with a real world scenario, and decided that Google maps offered a slick way to truly showcase this new HTML5 offering.
After I completed my app, I again realized that something was missing. Sure it showcased the Geolocation API nicely... and the Google map implementation was a really nice touch.. but something was still missing. That it came to me! This API is really well suited for a mobile device. But how could I demonstrate this usage in a desktop browser? Bingo... I could wrapper the Google map implementation in an iPhone simulator. By doing this, my demonstration would really bring home a real world example of the value of this simple HTML5 method.
A couple of things you need to know: for this demo to work... you must agree to share your location. You do this by clicking the share location button that your browser window popped up when you first entered this blog post. Additionally, with HTML5 not fully implemented in all browsers, you will need an HTML5 compliant browser, such as Firefox 3.5 or above.
You can download the complete HTML of this "simulator" example by clicking here.
The iPhone & iPad implementation
I have also marked up an example that wraps the Geolocation iFrame with CSS3 media queries for running this example in a native iPhone or iPad browser. This implementation supports both landscape and portrait views. If you are viewing this blog post from an iPhone or iPad, click here to run this example.
Here is the code for the iPhone & iPad browser implementation
Now if I can ask my readers a favor:
I'm curious to how accurate the Geolocation API is. If you can take a minute and add a comment to this blog entry with your experience on how close the Google map zoomed to your current location... I would be thankful!