Geolocation is a technique for discovering where people are, based on their computer’s location. Of course, “computer” really can mean smart phone, tablet, or other portable device as well as a desktop computer. Geolocation determines a person’s whereabouts by looking at their computer’s IP address, MAC address, Wi-Fi hotspot location, or even GPS coordinates if available. Although not strictly part of HTML5 the specification, Geolocation is often associated with HTML5 because it’s coming on the scene at the same time. Unlike Web Storage, Geolocation was never part of the HTML5 specification. Like Web Storage, it’s a very useful technology that is already implemented in Firefox, Safari, and Chrome. Let’s see how we can use it.
Locating Awesomeness
We’ve been asked to create a contact page for the AwesomeCo website, and the CIO has asked whether we could show people’s location on a map along with the various AwesomeCo support centers. He’d love to see a prototype, so we’ll get one up and running quickly.
We’ll use Google’s Static Map API for this because it doesn’t require an API key and we’re just going to generate a very simple map.
AwesomeCo service centers are located in Portland, Oregon; Chicago, Illinois; and Providence, Rhode Island. Google’s Static Map API makes it really easy to plot these points on a map. All we have to do is construct an img tag and pass the addresses in the URL, like this:
<img id=”map” alt= ” M a p of AwesomeCo Service Center locations”
s r c = ” h t t p : / / m a p s . g o o g l e . c o m / m a p s / a p i / s t a t i cmap?
&si ze=900×300
& a m p ; s e n s o r = f a l s e
&maptype=roadmap
& a m p ; m a r k e r s = c o l o r : g r e e n | l a b e l : A | 1 + D a v o l + s q u a r e , + P r o v i d e n c e , + R I + 0 2 9 0 6 – 3 8 1 0
& a m p ; m a r k e r s = c o l o r : g r e e n | l a b e l : B | 2 2 + S o u t h w e s t + 3 r d + A v e n u e , P o r t l a n d , + O R
& a m p ; m a r k e r s = c o l o r : g r e e n | l a b e l : C | 7 7 + W e s t + W a c k e r + D r i v e + C h i c a g o + I L ” >
We define the size of the image, and then we tell the Maps API that we did not use any sensor device, such as a GPS or client-side geolocation with the information we’re passing to this map. Then we define each marker on the map by giving it a label and the address. We could use a comma-separated pair of coordinates for these markers if we had them, but this is easier for our demonstration.
How to Be Found
We need to plot our visitor’s current location on this map, and we’ll do that by providing another marker on the map by using our latitude and longitude for a new marker. We can ask the browser to grab our visitor’s latitude and longitude, like this:
n a v i g a t o r . g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( f u n c t i o n ( p o s i t i o n ) {
showLocati o n ( p o s i t i o n . c o o r d s . 1 a t i t u d e , posi t i o n . c o o r d s . 1 ongi t u d e ) ;
} ) ;
This method prompts the user to provide us with their coordinates. If the visitor allows us to use their location information, we call the showLocation( ) method.
The showLocation() method takes the latitude and longitude and reconstructs the image, replacing the existing image source with the new one. Here’s how we implement that method:
Une l var showLocati on = f u n c t i o n ( l a t , l n g ) {
2 var fragment = “&markers=color:redlcolor:redllabel :YI” + l a t + “, ” + l n g ;
3 var image = $ ( ” # m a p ” ) ;
4 var source = i m a g e . a t t r ( ” s r c ” ) + f r a g m e n t ;
5 source = source . r e p l a c e ( “sensor=false” , “sensor=true”) ;
6 i m a g e . a t t r ( ” s r c ” , s o u r c e );
7 };
Rather than duplicate the entire image source code, we’ll append our location’s latitude and longitude to the existing image’s source.
Before we assign the modified image source back to the document, we need to change the sensor parameter from false to true. We’ll do that on line 5 with the replace() method.
When we bring it up in our browser, we’ll see our location, marked with a “Y” among the other locations. To see an example, take a look at Figure 10.3, on the next page.
Falling Back
As it stands, visitors to the page will still see the map with the locations of the AwesomeCo support centers, but we will get a JavaScript error if we try to load our page. We need to detect support for geolocation before we attempt to get the visitor’s location, like this:
i f ( n a v i g a t o r . g e o l o c a t i o n ) {
n a v i g a t o r . g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( f u n c t i o n ( p o s i t i o n ) {
showLocati o n ( p o s i t i o n . c o o r d s . 1 a t i t u d e , posi t i o n . c o o r d s . 1 o n g i t u d e ) ;
} ) ;
} e l s e {
Google’s Ajax API11 does location lookup, so it’s a great fallback solution. You will need to obtain an API key to use this on your site when you go live, but you don’t need one to try this locally.
Our fallback looks like this:
Une i var key = “your_key” ;
var s c r i p t = “http://www.google.com/jsapi?key=” + key;
$ . g e t S c r i p t ( s c r i p t , f u n c t i o n O {
i f (Ctypeof google == ‘ o b j e c t ‘ ) &&
5 google.loader && g o o g l e . l o a d e r . C l i e n t L o c a t i o n ) {
showLocati on(google.1oade r . C I i e n t L o c a t i o n . 1 a t i t u d e ,
g o o g l e . 1 o a d e r . C I i e n t L o c a t i on.1ongi t u d e ) ;
} e l s e {
var message = $(“<p>Couldn’t find your address.</p>”);
io message . i n s e r t A f t e r C “#map”) ;
};
} ) ;
We’re using jQuery’s getScript() method to load the Google Ajax API. We then use Google’s ClientLocation() method on line 5 to get a visitor’s location and invoke our showLocation() method to plot the location on our map.
Unfortunately, Google can’t geolocate every IP address out there, so we may still not be able to plot the user on our map; therefore, we account for that by placing a message underneath our image on line 9. Our fallback solution isn’t foolproof, but it does give us a greater chance of locating our visitor.
Without a reliable method of getting coordinates from the client, we’ll just need to provide a way for the user to provide us with an address, but that’s an exercise I’ll leave up to you.
The Future
The techniques we talked about in this chapter, although not all part of HTML5 proper, represent the future of web development. We’ll be pushing many more things to the client side. Better history management will make Ajax and client-side applications much more intuitive. Web Sockets can replace periodic polling of remote services for the display of
real-time data. Cross-document Messaging lets us merge web applications that usually would never be able to interact, and Geolocation will eventually let us build better location-aware web applications, which become more and more relevant every day with the growing mobile computing market.
Explore these APIs and keep an eye on their adoption. You may soon find these to be invaluable tools in your web development toolbox.