HTML5 Geolocation

HTML5 Geolocation | Kebab Finder

On 03.25.11, In HTML, HTML5, by

The HTML5 Geo location API hasn’t really got anything to do with the HTML5 spec. In fact it was created by the W3C but seems to have been lumped in with the spec in everyone’s mind. And so the only way you’ll ever find this post is if I title it HTML5 Geo location.

So what is all this geo location stuff?

It’s magic!!? Basically the geolocation api gives us a way to locate the exact position of the visitor to our site. It uses either GPS or wifi. If it’s the latter it uses something called wifi triangulation to pin point where the user is (I have no idea what this means but I thought I would include it anyway in case you do!)

Finding my own way

Over the past week or so I’ve been thinking “Well it’s ok all this stuff but how could I use it?”. Then in a flash of inspiration it came to me. “A Kebab Finder” (I did have help from Dave at My Photoshop Textures but I’m going to take all the credit, cheers Dave). So the idea is that you come out of a nightclub/pub (a little worse for wear if you’re anything like me) and maybe you’re in a different town, maybe on a stag do and all you want is one of a few things. 1) To get home 2) to get something to eat 3) To go to the Casino. This is where Kebab Finder comes in. You open up the page and not only does it find where you are (using the geo location) but it also tells you the nearest service of your choice. Sound good? No? Well tough that’s as good as it gets for me. Now to pull this off we need to link into the Google AJAX Local Search API and I’m not going to show you how that works here, I’m just going to concentrate on location stuff.

So where am I?

Before we do anything we need to do some feature detection to make sure the browser supports the functionality that we need. In the past it was common to test for browsers not features so you would test for Firefox, IE or Chrome etc but this becomes a nightmare because there are different versions of browsers supporting different features. So now we test for features, if it doesn’t support it then we know not to do anything.

1.
2.
3.
4.
5.
6.
7.
8.
9.
 
function OnLoad() {
                if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(handle_geo); 
                        $("#queryInput").change(doSearch);
                    } else {
                        var map = document.getElementById("map");
                        map.innerHTML = "Geolocation is not available... have you considered a forward-thinking browser?";
                    }   
            };

So there are a couple of things going on here. The function is called on load and as you can see it says if navigator geolocation is is available do one thing else do something er…. else. So what are we doing if we have the feature available is use the getCurrentPosition function and past it another function called handle_geo. The getCurrentPosition is a catch all function that basically does all the hard work for you and gets the visitors current location. We pass it the other function because we want to use the co-ordinates to position the map. The next function here is for the menu that just says when you change the selection in the menu run the doSearch function, we’ll look at that in a minute. After the else statement we just put a message for anyone using an old browser to say it doesn’t support what we’re trying to do.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
 
function handle_geo(position){ 
                // Initialize the map with default UI.
                    gMap = new google.maps.Map(document.getElementById("map"), {
                    center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                    zoom: 15,
                    mapTypeId: 'roadmap'
                });
      // Create one InfoWindow to open when a marker is clicked.
       gInfoWindow = new google.maps.InfoWindow;
        google.maps.event.addListener(gInfoWindow, 'closeclick', function() {
        unselectMarkers();
      });           
 
      // Initialize the local searcher
      gLocalSearch = new GlocalSearch();
      gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
            
      var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var marker = new google.maps.Marker({
      position: myLatlng, 
      map: gMap, 
      title:"You are here!"
             });
            doSearch();
    }

The handle_geo function takes one parameter, that is position. This holds the position of the current visitor. So all we need to do is feed this position into the google map api to get the centre for the map. We also set the zoom setting for the map and the map type. We also create the info windows the local search callback function and the marker (with the same co-ordinates and the center of the map).

1.
2.
3.
4.
5.
 
function doSearch() {
      var query = document.getElementById("queryInput").value;
      gLocalSearch.setCenterPoint(gMap.getCenter());
      gLocalSearch.execute(query);
    }

So the final function I’m going to look at is the doSearch function. This is how we pass the different values from the menu to the search. We get the query from the element with the id of queryInput. Then we set the centre point from where we want to do the local search, which is the centre of the map then we execute the search using the value from the menu.
As I said I’m not going into detail about the Google api I just thought it would give more relevance to the tutorial if you could see a working example.

In Conclusion

The geolocation api is very easy to use in it’s basic form. Here we have only used one of the 3 the available functions. We will look at the others in later tutorials. I have included two demo pages one with the simple marker of the location of the visitor and the second the fully functioning Kebab finder.
DEMO1 Simple Geolocation | DEMO2 Kebab Finder