Smashing Mobile Web Development

Chapter 8: Geolocation and AJAX

One of the benefits using HTML5 on mobile devices is that it provides you with the capability to use the geolocation feature to deliver local content to your users. This can range from showing a list of nearby restaurants, or specials, or even friends. Geolocation lets you find the user’s physical location, which you can then use to find local information or deliver content based on location. The introduction of this new technology in HTML5 opens up numerous ideas to web developers. Before HTML5, location information couldn’t be accessed in the browser, but only by building a native app. Most mobile apps use geolocation, and desktop browsers supporting HTML5 features can also access this feature.

Once an app has accessed the user’s location information, most of the time it will want to make an external call to a service to return some data. For example, you could use an API such as Instagram to scan for pictures around the current location. The method of making an external HTTP call asynchronously (meaning without having to reload the web page) is called AJAX, which stands for Asynchronous JavaScript and XML. AJAX enables you to use the coordinates that come from geolocation to provide rich, local content to your users.

In this chapter, you finish the Find tab and write some AJAX and geolocation functions using the foursquare API. This will enable you to quickly scan around the user’s current location for wine shops. You also use the Google Maps ...