HTML5 Geolocation in Depth:Build 7 HTML5 Geolocation Apps

Learn to Use HTML5 Geolocation API, Google Maps API, Directions API & Places API to Build HTML5 GPS-Based Applications
4.0 (54 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,414 students enrolled
83% off
Take This Course
  • Lectures 85
  • Length 6.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 English

Course Description

***Quizzes, Practice Exercises and 7 Unique Location-Aware Applications are Included***

**Last Updated on 11th November 2016: A new update lecture added to Google Maps API**


Do you want to track the location of your site's visitors, that is to identify from where your site gets traffic? Do you want to mark the location(s) of your local business in a map on your website? Do you want to develop location-aware or GPS applications? Do you want to learn HTML5 and JavaScript in depth? Then, join this 100% hands-on course and start developing unique location-aware or GPS applications.

Geolocation continues to be a hot topic especially in the smartphone sector. You can do many wonderful things if you are able to track the location of a person.

  1. It would be great if you could know whether your daughter has reached her school safely.
  2. It would be useful if you could find the actual route to an unknown place.
  3. It would be cool if you could locate a restaurant or a hospital in an unknown place.

Isn't it? All these are possible with geolocation. In today's competitive world, businesses try to improve their service making the best use of geolocation information. This in turn increases the demand for location aware applications.


Janice Hageman says

"HTML Geolocation

The course was very informative, starting out with basic information and then building to more complex information. It will definitely help with some map-related projects I am working on. Contained a lot of examples."

Keira D says

"Insightful, well-thought-out course - recommended

I recommend this course to anyone trying to develop an in depth knowledge on this topic. I regularly take many online courses from multiple sources, and I evaluate this course as one of the most insightful one I have come across! The materials are systematically structured, and the instructor literally takes you from basics to the details. There are examples and hands-on exercises, which I found extremely helpful. Instructor's understanding of the subject is really impressive. Also, I see that the instructor is very responsive on the discussion forum. Great work. Recommended."

Trent says

"Great Course

Everything is presented in a very clear way. It is very easy to follow along. I recommend this course for anyone interested in Geolocation and Google Maps."


The Course Structure is as follows:

We first look at the HTML5 geolocation API including how geolocation works and how to get location information for a point of time and also for a period of time. As you proceed with this course, you will learn how to use the following APIs along with HTML5 Geolocation API to make your applications really magical.

  1. Google Maps API
  2. Google Places API
  3. Google Directions API

This course teaches you how to come up with really useful and unique location-aware applications (GPS- based applications) using HTML5 Geolocation API. You would develop 6 location-aware applications as part of this course that too from SCRATCH. The happy news is that you can use these applications while traveling (if you have a mobile device with GPS).

By the end of this course, you would have the following web applications developed from scratch.

  1. Where Am I? that displays the location information in a text message and also in a map.
  2. Weather Forecast that displays the local weather information to the user.
  3. Distance Calculator that calculates the distance between the current location and specified destination
  4. How to Reach? displays the route from the current location to the specified destination
  5. Find Around Me displays nearby restaurants, ATMs etc to the user
  6. Postcode Finder displays the postcode of the user and allows the user to get the postcode of the address entered
  7. Store Locator displays different stores details in a map fetching details from the database

Each application is developed from SCRATCH which makes it easier even for beginners to follow. You will also get a list of application ideas that you can use to develop your own location-aware applications.

So, what are you waiting for?? Join this wonderful course NOW and let's get started !!!

What are the requirements?

  • Basic knowledge of HTML and JavaScript will be helpful (not necessary)
  • Google Chrome or any other modern web browser
  • Komodo Edit or any other text editor

What am I going to get from this course?

  • Detect user's current location.
  • Display Google map with markers and information window.
  • Display user's location in a map.
  • Use Google Maps API, Places API and Directions API in web applications and websites
  • Develop 5 unique location-aware applications including Where Am I?, Weather Forecast, Distance Calculator, How to Reach? and Find Around Me

Who is the target audience?

  • Students who wish to learn HTML5 and JavaScript
  • Developers who want to come up with location-aware applications
  • Entrepreneurs who want to display their business location in a map in their website
  • Anyone who wants to develop web applications incorporating maps and geolocation

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Geolocation is the Answer to the Question: Where Am I? or Where are you?

This section gives an overview of 5 unique applications you are going to develop as part of the course. The applications are:

  1. Where Am I?
  2. Weather Forecast
  3. Distance Calculator
  4. How to Reach?
  5. Find Around Me

This section explains the structure of the course in brief.

In the Introduction section of the course, we will look at what geolocation is, how it works and different uses of geolocation.

In the second section, we will understand HTML5 Geolocation API in detail. You will understand when and how to use the getCurrentPosition method and watchPosition methods and also find the list of location related information that you can collect using these methods. You will also learn to handle errors.

You are going to deal with Google Maps API in the next section. By completing this section, you will be able to include maps, static or interactive, in your websites or web applications that can be accessed from desktop or mobile browsers.

Once you complete HTML5 Geolocation and Google Maps sections, you will be in a position to develop really unique and cool location-aware applications. In this course, we will be developing 5 unique location-aware applications, that too from scratch. Even if you are new to HTML and JavaScript, you do not have to worry at all as the videos are explanatory and in-depth.


This section tells the software requirements to proceed.

You can download and install these software before proceeding with the course.


This section explains what geolocation is and how it actually works. Geolocation is the process of finding the actual physical location of an object.


This section describes different uses of geolocation and where it is being used currently.

3 questions

Quiz on the basics of geolocation.

Section 2: HTML5 Geolocation API

An overview of different topics covered in this section. We will look at getCurrentPosition, watchPosition and clearWatch methods. We will also understand when and how to use the getCurrentPosition method and watchPosition method. We will find the list of location related information that you can collect using these methods and some of them are latitude, longitude, heading, accuracy, altitude, speed and timestamp. You will also learn to handle errors.


This section explains what information you can collect using two methods offered by HTML5 Geolocation API, getCurrentPosition and watchPosition. You can get latitude, longitude, accuracy, altitude, heading, speed and timestamp.


This section explains how to use the getCurrentPosition method to get location information for a specific point of time.


Practice Exercise for getCurrentPosition video.

Practice Exercise #1
Solution: Practice Exercise #1

This section explains how to use the watchPosition method to get location information over a period of time.

Source Code: getposition.html

Practice Exercise for watchPosition video.

Solution: Practice Exercise #2

This section explains how to handle errors in case location information is not retrieved.

Practice Exercise #3
Solution: Practice Exercise #3
5 questions

To check your knowledge on HTML5 Geolocation API

Section 3: Google Maps API

This section gives an overview of Google Maps. In this section, you will learn how to add static and interactive maps and also add markers and information windows on your map.

Update to Google Maps API

You will understand how to display a static map on your webpage. You can decide the center point, zoom level, map size and also the map type (roadmap, satellite, hybrid and terrain). You can also add markers to display an exact location in your map.

Source Code:static.html

Display a static map of your current location.

Solution: Practice Exercise #4

You will learn how to display an interactive map on your webpage. You will learn how to add the JavaScript script for Google Maps API.

Source Code: interactive.html
Practice Exercise #5
Solution: Practice Exercise #5

You will learn how to add markers to display an exact position and information windows to display more details about the location.

Source Code: marker.html
Google Maps API
3 questions
Section 4: Application 1: Where Am I?

Know the "Where Am I?" application in detail


You will learn how to get the latitude and longitude of the viewer using watchPosition method.


We will do reverse geocoding to get the human-readable address provided the latitude and longitude. Using reverse geocoding, you can get the city, country, postal code and even the full address of your site's visitor. Hence, you can understand from where your site's visitors are browsing your site and track your traffic easily.


We will display the current location in a map by adding a marker.

Source Code: whereami.html
Section 5: Application 2: Weather Forecast

Get the current latitude and longitude values using getCurrentPosition method.


We send the request to the server using XMLHttpRequest object and get the response as a JSON object. We will use the Weather API offered by openweathermap to get the weather information for the given latitude and longitude.

Update to Lecture 36: API Key added to the Request

We collect the weather information we plan to display in our application. We process the JSON object to get the required information like temperature, pressure, humidity etc.


We display the information we collected (temperature, pressure, humidity, etc) in a clear format.

Source Code: weather-forecast.html
Section 6: Application 3: Distance Calculator

We design the front end with a textbox for the user to specify the destination and also a button. We use a <fieldset> element to make the front end more professional.


We cannot expect the user to enter his latitude and longitude. We need to convert the human readable address into latitude and longitude values. We use geocoding technique to get the latitude and longitude for the destination address entered by the user.


We process the JSON object received as response in order to get the latitude and longitude of destination.


We use Haversine formula to calculate distance between two locations, provided the latitude and longitude of both source and destination. We collect the latitude and longitude of the source (current location) using HTML5 Geolocation API. We collected the latitude and longitude of destination using geocoding technique.


We can still enhance our application by allowing the user to enter source as well as destination. In such case, we have to calculate the distance between source and destination instead of the distance between current location and destination. So, we need to use the geocoding technique to get the latitude and longitude of both source and destination.

Source Code: distance-calculator.html
Section 7: Application 4: How to Reach?

We design the front end with a textbox for the user to enter his destination and also a button.


We get the latitude and longitude of both the source and destination. We get the latitude and longitude of source (current location) using HTML5 Geolocation API. We use the geocoding technique to get the latitude and longitude of destination entered by the user.


We will display the map.


We add markers at source and destination points. When we set the zoom level, there could be some cases where both the source and destination cannot be seen in the map. Both the points might be visible only if the viewer adjusts the zoom level. But we cannot expect the user to adjust the zoom level to see the points. So, we adjust the zoom level of the map programmatically so that both the source and destination points are clearly visible.


We use Google's Directions API to draw the route between the source (current location) and destination. We need to specify the origin, destination and also the mode of travel to get the route.

Source Code: howtoreach.html
Section 8: Application 5: Find Around Me

We design the front end with a combo box to display points of interests and another combo box to display distances.


We display the map with current location as the center of the map.


Get different locations using Google's Places API based on user's selected point of interest and distance.


We draw markers at the locations we got using Google's Places API


We create information window to display more information including icon, name, rating and detailed address about each location.

Source Code: around-me.html
Section 9: Application 6: Postcode Finder

Let's try to develop a postcode finder. In this application, we will display the postcode of the viewer. We will also provide an option for the user to enter an address, so that the postcode of that particular address will be displayed.


Get the latitude and longitude of the user to display his/her postcode. Use the getCurrentPosition method of the HTML5 Geolocation API for this.


Create a function passing an option as the argument. If the postcode of the user is to be viewed, his latitude and longitude should be passed to the Geocoder and if the postcode for the requested address is to be viewed, the address entered in the text box should be passed to the Geocoder.


Extract the postcode from the result

Some Final Touches
Source Code: postcode-finder.html
Section 10: Application 7: Store Locator

Know the Store Locator application in detail


Design the front end of your application


Populate the County dropdown by getting data from the database


Create a function which will be executed when the dropdown value is changed


Connect to the database and get the details from it


Get the response from the PHP code


Create the map using available information


Add markers for each store

Google Maps Geocoding API to Get Latitude and Longitude for a Postcode
Collect Latitude and Longitude and Pass it as a Request
Write the Query to Calculate Distance between Two Points
Execute the Query
Collect the Response and Pass it to the Function
Source Code: store-locator.html
Source Code: getfromdb.php
Section 11: Conclusion
1 page

Here is a list of location-aware application ideas


This section concludes the course.

Section 12: Bonus Section
Bonus Lecture: Special Offers on Other Courses

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Crypters Infotech, Career Enhancement Training Solutions

Crypters Infotech is a division of Crypters Infosystems and Solutions Pvt. Ltd IT Company. We offer industry-oriented training that helps even fresh heads to become IT giants. Our professional team of trainers provide high quality training with an outlook towards future. We provide training mainly in web development and mobile app development.

Ready to start learning?
Take This Course