How to add HTML5 Geolocation to your web apps

A common misconception with mobile applications is that the truly powerful apps have to be downloaded and installed. However, the idea that installed applications are superior to web-based applications is simply not true. In fact, I am going to walk you through an example today that can capture your location directly from a web-browser, without the need for any custom client side application! In the end, this means that you can confidently roll out applications to any user, regardless of their mobile device’s operating system without any worry of incomptability!

The majority of  modern web browsers now provide support for HTML5 Geolocation. HTML5 Geolocation provides a way to incorporate a user’s current location into PC and mobile web applications. In this example, users are able to upload a photo along with some information about where they are currently located. The web application, using HTML5 geolocation, tags the post with the user’s geographic coordinates. The application then plots the user’s location on a map along with all other user posts that have been made.

Implementation

Implementing this functionality into an m-power web application requires only some basic knowledge of JavaScript. In fact, I will provide the code below that can be easily copied into your web application.

Code:

<script type="text/javascript">// <![CDATA[
        //run this code when the page loads
        jQuery(document).ready(function(){  
            //call the getGeolocation function below
            getGeolocation();
        });  
        //determine if the user's browser has location services enabled. If not, show a message
        function getGeolocation() { 
            if(navigator.geolocation){
                //if location services are turned on, continue and call the getUserCoordinates function below
                 navigator.geolocation.getCurrentPosition(getUserCoodinates);  
            }else{
                alert('You must enable your device\'s location services in order to run this application.');
            }
        }  
        //function is passed a position object which contains the lat and long value
        function getUserCoodinates(position){  
            //set the application's text inputs LAT and LONG = to the user's lat and long position
            jQuery("#LAT").val(position.coords.latitude);
            jQuery("#LONG").val(position.coords.longitude);
        }
// ]]></script>

Via the browser’s JavaScript API, we are able to obtain the user’s latitude and longitude coordinates. For web applications running on a mobile device, the browser will attempt to use the device’s location services (GPS) to get the current location.  For privacy reasons, location services must be manually enabled by the user in order for the browser access this information. If the location services are turned off or are not supported by the browser, this JavaScript code will display a message to the user.

Now that we have inserted the code above into the <head> of the web application’s HTML,  let’s take a look at the web form that will write the user’s coordinates to the database. As you can see below, I have built a maintainer that contains a latitude and longitude field. These fields are populated automatically by the JavaScript code above when the page loads:

Note: For demonstration purposes, I have left the latitude and longitude lines visible, but this is not required.

That is all there is to it. As user’s log their locations, the data can be used in a number of ways. In this example, I chose to plot the coordinates on a map using the google maps API. You can see in the screen shot below that several users from around the world have uploaded their current locations:

Conclusion

Incorporating HTML5 geolocation into your web applications is easy and a great way to take advantage of the GPS/location technology available on mobile devices. With HTML5 geolocation, there is no need to spend time programming native mobile applications. Anyone with the most basic knowledge of web technologies can build powerful, geo-centric web applications with m-power today!

Note: As browser security requirements evolve, this functionality may become limited in certain browsers. For example, Google Chrome now requires a secured origin (https) to use this function.

Related Posts:

4 thoughts on “How to add HTML5 Geolocation to your web apps

  1. Good to know! I also have heard that only native apps can use these features.

    Thanks for the heads up!

  2. Thanks for writing the article. Im actually having trouble considering gps for my concept ios app. How easy is it for your app to use the users compass (which already displays their long and lat coordinates) and send that information to the app to record? It seems that way will skip trying to track your location and simply use the ios built in compass and basic math to find people near you by subtracting long and lat coordinates. Does that make sense?

    Thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *