HTML5 Geolocation: Start Up With Geolocation HTML5 Tutorial

HTML5 Geolocation: Start Up With Geolocation HTML5 Tutorial: It is very common to observe that many application, sites, search results etc. incorporates Geolocation information. However, through this post we are going to discuss about accessing the W3C Geolocation API as well as what you can achieve through employing Google Maps and third-party libraries.

Basically, The W3C Geolocation API is referred as an effort made by World Wide Web Consortium in context of standardize an interface to fetch the geographical location information for a device from client-side. It designate an array of some specific objects like ECMA Script standard compliant which executes in the client application. However, reveals location in account of Location Information Servers which are supposed to be transparent for Application Programming Interface (API). The regularly employed source of location information are Wi-Fi and Bluetooth, IP address, Wi-Fi connection location, device GPS (Global Positioning System), GSM/CDMA cell IDs etc.

The W3C Geolocation API employ scripted access to alliance geographical location information with the browser of a device. However, in coming section of this post we will attempt to discuss about what we can accomplish in account of this data employing Google Maps as well as other third-party libraries followed by knowing how to access this API.

The examples employed in this tutorial post HTML5 Geolocation: Start Up With Geolocation HTML5 Tutorial is concerned with jQuery that can be easily incorporated by a script tag. However, it eliminates the need to download jquery.js file; Your web page is capable to employ the version hosted on Google’s CDN (Content Delivery Network).

Therefore, when a call to file is not available over the internet, the local copy of jQuery file come forward after fallback and look for the earlier copy’s successful inclusion.

Getting basic Geolocation data

How to Find the location of the User’s Internet Device

You can implement the new HTML5 Geolocation API to trace the location of users. When you are supposed to click a button the output values to the webpage will appear like this.

HTML5 Geolocation

Now, initiate to include an input button in the page.

Next, you are supposed to include this JavaScript in order to manage the event of this button click, access the Geolocation API and output the result.

In this JavaScript, the navigator object allows us to access new geolocation object. This geolocation object incorporates the following approach:

getCurrentPosition() reset to user’s current position.
watchPosition() displays the user’s current position and in the mean time monitor the position and adjure the accurate callback all time when designate changes in position.
clearWatch() checks the watchPositioin() method of monitoring current positon.

Before, call to getCurrentPosition() first of all ensure that either user’s location of the internet device and its browser is supported by Geolocation feature or not.

As, this method used to executes asynchronously, it passes two callback functionality: geo_error and geo_success. The error callback reveals an object of error in positions which constitute a code or a message property. The code may be concern with one among the following:

  • Unknown
  • Permission Denied
  • Position Unavailable
  • Timeout

The success callback deliver a position object which contains a coordinates object as well as a timestamp. The coordinates object incorporate following element:
latitude, it is defined in decimal degrees.
longitude, defined is decimal degrees.
altitude, is defined in meters above the mean sea level
accuracy, is defined in meters.
AltitudeAccuracy, is defined in meters.
heading, is the travel’s direction defined in degrees
speed, is measured in meters per second.

These elements are not guaranteed except three and i.e. longitude, latitude and accuracy. For instance, consider longitude and latitude as well as append to webpage body by employing jQuery.

How to Get Basic Geolocation Data with a Fallback

Do you wish to determine a user’s internet location when user’s browser is not supported by HTML5 Geolocation API natively. Take a look over this.

You are required to accomplish an IP-to-location lookup as fallback. Of course, it is not so specific latitude and longitude coordinates, but it will be good rather than comprising nothing about location data.

Google vs. MaxMind

Google used to offer google.loader.ClientLocation object in its Google Maps API V3 library, but it may not accessible with many US IP addresses.

The MaxMind GeoIP JavaScript Web Service referred as more accurate and updated. In addition MaxMind provide a JavaScript attribution free license at the cost of $250/year.

However, you can make prominent modification in our previous example to implement MaxMind as a fallback. So, simply go ahead and include the JavaScript library to the page.

Then include MaxMind fallback

When calling printLatLong() by employing Maxmind, transform this in an extra true parameter.

Rather than of displaying an error when navigator or navigator.geolocation is unspecified, implement the geoip_latitude() and geoip_longitude() functions which is provided by MaxMind JavaScript library to fetch the user’s longitude and latitude.

When you will scan the source of MaxMind geoip.js file, you will found that it has already transformed your IP address into location data. By going through the IP address which made the HTTP request, the MaxMind built a dynamic JavaScript, doing the IP-to-location transformation on the server side, an then revealing the results.

The below listed table incorporates the data location in addition to longitude and latitude.

HTML5 Geolocation2

You will be required to employ the attribution of free version of MaxMind in the form of a link back. So isMaxMind parameter has been included in the printLatLong() function in order to intimate the MaxMind was employed to retrieve the location.

Reverse Geocoding an address with latitude and longitude

Do you wish to transform longitude and latitude coordinates into user-friendly address. Then implement Google Maps JavaScript API to render latitude and longitude in a comprehending address, just like shown below:

HTML5 Geolocation3

The method of converting geographic data such as zip code, city name etc. into geographic coordinates like longitude and latitude is coined as term geocoding. However, performing the same thing in reverse, as converting coordinates into address, is known as reverse geocoding.

So, in order to initiate this include the required scripts into your web page

Next, include a button to provoke the users’s coordinates and determine the address.

and then you are required to include the JavaScript to manage the button click and getCurrentPosition() callback successfully.

Now, you may determine the coordinates through getCurrentPosition() and deliver them to printAddress() function, that employs the Google Maps API to accomplished the reverse geocoding.

The printAddress() function starts by generating a new Google Geocoder object. The Geocoder object provide you access to the geocode() method, which incorporates distinct options as well as deliver information .
However, in this case, we are creating a new Google LatLng object which has been qualified into geocode() towards retrieving the address. Just like getCurrentPosition(), the geocode() method is also asynchronous, that’s why we feel need to specify an inline JavaScript function to cultivate the callback. The callback’s response comprises two distinct parameters, one belong to result and another status code. However, when the status is supposed to be OK, then it is secure to analyze the array of GeocoderResults object saved in the results variable. Furhter, the results variable is referred as an array since Geocoder is capable to provide more than one entry.

Next, you are required to analyze for a GeocoderResults object in first place of the array, and however in case it exists, append the formatted_address property for the webpage body.

Converting an address into latitude and longitude

So, if you ever wish to render an human-interface address into geographical address of longitude and latitude coordinates, then you can accomplish this through implementing Google Maps JavaScript API V3 as shown below and is termed as geocoding.
To start up add 1.6.4 and Google Maps JavaScript API V3 in your webpage.

HTML5 Geolocation4

Now, tend the user input their address through an input text field, as the HTML5 Geolocation API can provide results only in coordinates.

The below specified JavaScript manage the button click and read the input assigned by users as well as calls the Google API to geocode the address:

When you will click the button, employ jQuery to analyze the value as well as authenticate that it’s not blank. Next, you are supposed to built an instance for Geocoder object. In context to achieve this, call geocode() method, but reveal an address option rather than of longitude and latitude.

Now, access the geometry property of GeocoderResults object. However, the geometry property incorporates a location property which can be employed to call the lat and lag method to retrieve your address’s coordinates, which are then implemented to web-page body in your printLatLong() function:

Rinniee Ginsburg

Rinniee Ginsburg is a email template developer and writer at EmailChopper. Her technical competency has helped the professionals explore the new techniques in practicing the innovative email development. She has written various articles that accentuate the importance of PSD to Email conversion, smart procedure for responsive email template development & many more. All her writeups have become a source for many professionals and business players to grab the valuable information.