Html5 Geolocation: Using API to Wow Your Website Users

Udemy Editor

HTML5 is here and it brings with it all sorts of lovely bells and whistles that are making the internet more interactive than ever before. With its support for multimedia, animations via the new canvas element and various other API’s, HTML5 will soon set the stage for better, faster websites and other applications. The HTML5 Beginners Crash Course is aimed at beginners who are new to HTML and HTML5. The course offers over 46 lectures and over nine hours of video content that will introduce you to HTML, will teach you how to use the HTML5 canvas for drawing and animation and teach you how to use geolocation in your websites. The course also covers local storage, advanced forms and how to create offline web apps.

This tutorial will focus on how to include the geolocation API in your HTML5 pages to wow your visitors.

About the HTML5 Geolocation API

The Geolocation API is an application program interface that has been designed to allow programmers to retrieve geographical location information for use on client side devices. This information can then be used by programmers in their websites or applications.

In simple terms, if a programmer is asked to write an application for a local pizza joint that will display the restaurant’s location as well as the client’s location and perhaps display a map of how to get to the restaurant, then the programmer can rely on the geolocation API to gather information about the user’s location to find out where the user is and then use Google Maps to create the best route.

This tutorial will show you how to retrieve the user’s information and how to plot that information on a map.

Create an HTML5 Page

We will start by creating a standard HTML5 page. We will add the components that make up the page including the head and body tags. We will add a paragraph element to explain to the user that they need to click the button to get their coordinates and we will add a button that will run the script we need to use the geolocation API.

The code needed to create the page looks like this:

<!DOCTYPE html>

<html>

<p id=”geolocation_demo”>Click the button to reveal your coordinates:</p>

<button onclick=”getUserLocation()”>Get Location</button>

<body>

</body>

</html>

The HTML5 for Beginners course is a 3 hour video introduction to web design using HTML5. The course will show you how to create an elegant blog website from scratch using HTML5. The course includes information on how to work with graphics, color and multimedia to ensure that the website you create has visual appeal as well as functionality.

Add the Geolocation API

Now that we have the HTML5 shell we can add the code that will use the geolocation API. The geolocation API uses a method called getCurrentPosition() to return the user’s latitude and longitude. To use this method, we will need to write two functions. The first function will get the user’s position. The second function will display the user’s position on the screen.

We will call our first function “getLocation”. The code to produce the function will look like this:

var x = document.getElementById(“geolocation_demo “);

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else{x.innerHTML = “Geolocation is not supported by this browser.”;}

}

function showPosition(position)

{

x.innerHTML = “Latitude: ” + position.coords.latitude +

“<br>Longitude: ” + position.coords.longitude;

}

The first function gets the user’s location. It then checks whether the browser supports geolocation. If the browser supports geolocation, then the function returns the location as a parameter of the showPosition function. If the function is not supported by the user’s browser then it displays, “Geolocation is not supported by this browser.”

The showPosition function sends the latitude and longitude results of the getCurrentPosition method to the innerHTML element of the webpage we created.

This is a screenshot before the function runs:

And this is what the screen looks like once it has returned the user’s location and published that location:

The HTML5 Fundamentals course will teach you the fundamentals of HTML5. It will teach you how to properly define HTML, how to follow HTML standards, how to create headings lists and tables and how to add in plugins like Flash and the geolocation API.

Add the Geolocation to a Google Map

Instead of publishing the location as longitude and latitude, the geolocation API allows you to superimpose the location on a Google map.

The script to get the location remains the same as above:

var x=document.getElementById(“demo”);

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showMapPosition);

}

else{x.innerHTML=”Geolocation is not supported by this browser.”;}

}

The script to display the code however is slightly different:

function showMapPosition(position)

{

var latlon=position.coords.latitude+”,”+position.coords.longitude;

var img_url=”http://maps.googleapis.com/maps/api/staticmap?center=”

+latlon+”&zoom=14&size=400×300&sensor=false”;

document.getElementById(“mapholder”).innerHTML=”<img src='”+img_url+”‘>”;

}

To show the location on a map we need to create a variable to store the location we got from the getLocation() function.

Then you need to select the google map you want to use to show the location. You also need to set the zoom parameters of the map. Once you’ve set the parameters, you need to show the map using the innerHTML element.

This is what the code looks like to create our page:

<!DOCTYPE html>

<html>

<body>

<p id=”geolocation_demo”>Click the button to get see your position:</p>

var x=document.getElementById(“demo”);

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showMapPosition);

}

else{x.innerHTML=”Geolocation is not supported by this browser.”;}

}

function showMapPosition(position)

{

var latlon=position.coords.latitude+”,”+position.coords.longitude;

var img_url=”http://maps.googleapis.com/maps/api/staticmap?center=”

+latlon+”&zoom=14&size=400×300&sensor=false”;

document.getElementById(“mapholder”).innerHTML=”<img src='”+img_url+”‘>”;

}

</script>

</body>

</html>

This is a screenshot of the page before the user clicks the “find me” button:

And this is a screenshot of the resulting map when the user clicks find me:

Take your Web Pages to the Next Level

HTML5 offers API’s that can really turn an ordinary website into an interactive user experience that keeps your users coming back for more.

The HTML5 for Web Developers course will teach you the basics of HTML5 programming. The course shows you how to build a real responsive website using HTML5. The course includes lessons on how to convert PSD templates to HTML5 to ensure you have a graphically pleasing, interactive website.