Learn How To Use The HTML5 GeoLocation jQuery Plug-in

Basically, GeoLocation is a jQuery plug-in for sorting a list of addresses using HTML5. jQuery offers a several great ways to find out the website visitors geographic location by tracing their IP address; GeoLocation is one of them. With the help of this simple jQuery GeoLocation API, one can find out their website viewers Country, Region and City as well. Not only that, it is also easy to find out their Longitude and Latitude values to hook up to Google Maps to show which location they are viewing from.

We are presenting this post with the aim to show you the use of HTML5 GeoLocation jQuery Plugin. We will show you how this plug-in works even when geolocation is not supported by the user’s browser. Here with the help of this plug-in we will try to find out the addresses of the best BBQ restaurants in the state capital long with address information written in Card micro formats, to indicate which locations are closest. So let’s start.

First of all let us create a basic HTML5 web page:

<!DOCTYPE HTML> <head> <meta charset=”UTF-8″ /> <title>Austin BBQ Locations</title> </head> <body> </body> </HTML>

Since the older versions of IE, older than IE9, does not support the new HTML elements; for this, here we will use JavaScript with conditional comments to force IE to create new elements based on HTML5’s element names.

JavaScript

With the help of Google CDN (Content Delivery Network), one can easily associate JavaScript library in between the <head> elements without supporting additional files:

<!–[if lt IE 9]> <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script> <![endif]–>

Despite of the immense popularity of jQuery’s, if we talk honestly, human beings are prone to error or commit mistakes. while troubleshooting, many times, you realize that you have made a minor mistake, or you have forgotten to associate jQuery to a web page. The HTML5 GeoLocation jQuery Plugin overcome this, as it checks to make sure you have the jQuery library installed, and it has happened due to Google CDN which helps in adding the jQuery library without hosting the asset using the following code:

<!–[if lt IE 9]> <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

Here, we will use the hCard micro-format, which is based on the vCard specification, for getting the restaurant locations.

Microformats

First of all let us know about microformats; actually microformats are design patterns for common pieces of information that simple HTML elements can’t handle on their own. Microformats handle everyuthing start from CVs to calendar events to any other kind of situations. In the concerned project we are going to use the hCard microformat, which is based on the vCard specification, for the restaurant locations:

<div class=”vcard”> <a class=”url fn n” href=”http://www.facebook.com/profile.php?id=100000471620703″> <span class=”given-name”>Jane</span> <span class=”additional-name”></span> <span class=”family-name”>Smith</span> </a> <div class=”org”>Old School BBQ and Grill</div> <div class=”adr”> <div class=”street-address”>2907 E MLK Jr Blvd.</div> <span class=”locality”>Austin</span>, <span class=”region”>TX</span>, <span class=”postal-code”>78702</span> <span class=”country-name”>USA</span> </div> <div class=”tel”>512-974-6830</div> </div>

If required, one may also use the hCard Generator to create the markup for each of the business locations. Now, we’ll insert a placeholder for distance in each address. In this position, the use of HTML5 GeoLocation script will prove handy as it will not only sort through the list of addresses, but also displays an estimate of how far away each location is with respect to the user. Look at the code snippet given below:

<div class=”vcard”> <a class=”url fn n” href=”http://www.theqcard.com/”> <span class=”given-name”>Jane</span> <span class=”additional-name”></span> <span class=”family-name”>Smith</span> </a> <div class=”org”>Old School BBQ and Grill</div> <div class=”adr”> <div class=”street-address”>2907 E MLK Jr Blvd.</div> <span class=”locality”>Austin</span>, <span class=”region”>TX</span>, <span class=”postal-code”>78702</span> <span class=”country-name”>USA</span> </div> <div class=”tel”>512-974-6830</div> <div class=”note distance”> </div> </div>

Now, in order to apply structure to a list of addresses, let’s put the addresses in an unordered list using the “ol” and “li” elements. After then, we will wrap the list with a div with an id attribute set to locations2; here the accepted default value is locations:

<div id=”locations2″> <ol> <li><!– Microformats address 1 –></li> <li><!– Microformats address 2 –></li> <li><!– Microformats address 3 –></li> <li><!– Microformats address 4 –></li> … </ol> </div>

It can be made easier than the above prescribed format by using the hCard Generator which will help you in creating the markup for each of the locations.

Feedback

Now the most important fact here is that while the time HTML5 GeoLocation jQuery Plugin is engaged in processing those addresses and figuring out which one is closest, it is certain that it will take some time and will make some delay. Now, it is necessary to give the users some feedback about what is going on in the background process, and to accomplish that, we will place a div element with a class attribute of notification. You may also style the notification text through CSS or Ajax-style loading spinner graphic as shown below:

<div class=”notification” style=”display:none”>please wait… sorting addresses based on your location</div>

After adding the feedback message, here we will apply an empty h2 element with an id attribute of geodata that will hold the address location of the site visitor. Here gain, one can use CSS to style the text for the location to match their site’s style:

<h2 id=”geodata”></h2>

One can download the latest version of the jQuery plug-in and can associate it to their web page as shown in the below code:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script> <script type=”text/javascript” src=”js/jquery-location.1.0.0.js”></script>

Google Maps API

Now the next step which comes is the use of Google Maps API, for this, first of all sign up to the Google Maps API at code.google.com/apis/maps/signup.html and register the appropriate domain.

Now, when everything is installed, it is needed to tell the HTML5 GeoLocation jQuery Plugin where to look for the list of addresses in the web page. We have already wrapped a div with an id attribute value of locations2 which will accomplish the task of calling the plug-in and telling it where to look within the web page. Look at the code given below:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script> <script type=”text/javascript” src=”js/jquery-location.1.0.0.js”></script> <script type=”text/javascript”> $(document).ready(function() { $(‘#locations2′).location({ }); }); </script>

Now, here one thing should be noted, if the Google API Key isn’t already provided, there is a need to set the plug-in API Key option as shown below:

<script type=”text/javascript”> $(document).ready(function() { $(‘#locations2′).location({ ‘apiKey’ : ‘YOUR_API_KEY_HERE’ }); }); </script>

Now, the HTML5 GeoLocation jQuery Plugin has been set up to be flexible so that it can effectively work with simple as well as customizable id and class selectors. One can adjust the id and class attributes the plug-in looks for within their pages’ markup as per their choice and with freedom.

$(‘#locations’).location( { apiKey: ‘YOUR_API_KEY_HERE’, geodata: ‘#geodata’, notification: ‘.notification’, recheck: ‘.recheck’, distance: ‘.distance’, geoAdr: ‘.geoAdr’, listElement: ‘li’ } );

Now, everything is successfully accomplished, so you can easily cater the design of geolocation elements with simple id and class selectors with the HTML5 GeoLocation jQuery Plugin set up.

You must have learned the importance of HTML5 Geolocation jQuery plug-in and how to use it. Feel free to share your opinions with us. We would be delighted to read your comments on this post.

Khursheed Alam
Latest posts by Khursheed Alam (see all)

About The Author

Khursheed Alam

I wish to be a positive example for those who wish to succeed in similar fields of operation. I build my enterprise from heart and with passion, which mostly consists of how I can constantly improve and help others as well towards a better life. I would like to prove that with the right attitude, know-how, strong faith and hard work we can reach goals we truly deserve.

See author's posts