Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add HTML5 Geolocation in Depth:Build 7 HTML5 Geolocation Apps to your Wishlist.

Add to Wishlist

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
3.9 (60 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,438 students enrolled
Last updated 2/2017
$10 $90 89% off
19 hours left at this price!
30-Day Money-Back Guarantee
  • 6.5 hours on-demand video
  • 25 Articles
  • 3 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
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
View Curriculum
  • 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

***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 !!!

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 85 Lectures Collapse All 85 Lectures 06:39:45
Geolocation is the Answer to the Question: Where Am I? or Where are you?
5 Lectures 10:28

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
Preview 01:27

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.

Preview 02:29

This section tells the software requirements to proceed.

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

What Software You Need?

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

What is Geolocation and How it Works?

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

What can You Do with Geolocation?

Quiz on the basics of geolocation.

3 questions
HTML5 Geolocation API
13 Lectures 39:58

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.

HTML5 Geolocation API Introduction

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.

What Location Related Information You can Collect?

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

Preview 13:38

Practice Exercise for getCurrentPosition video.

Source Code: currentposition.html

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.

The watchPosition Method to Get the Position over a Period of Time

Source Code: getposition.html

Practice Exercise for watchPosition video.

Practice Exercise #2

Solution: Practice Exercise #2

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

How to Handle Errors?

Practice Exercise #3

Solution: Practice Exercise #3

To check your knowledge on HTML5 Geolocation API

HTML5 Geolocation API
5 questions
Google Maps API
12 Lectures 45:47

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.

Google Maps API: Overview

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.

How to Display a Static (Non-Interactive) Map?

Source Code:static.html

Display a static map of your current location.

Practice Exercise #4

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.

How to Display an Interactive Map?

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.

Markers and Information Window to Make the Map More Informative

Source Code: marker.html

Google Maps API
3 questions
Application 1: Where Am I?
5 Lectures 31:19

Know the "Where Am I?" application in detail

What does the "Where Am I?" Application Do?

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

Get Latitude and Longitude of User's Current Location

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.

Reverse Geocoding to get Human-Readable Address

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

Display Current Location in a Map

Source Code: whereami.html
Application 2: Weather Forecast
7 Lectures 37:00

Get the current latitude and longitude values using getCurrentPosition method.

Get Current Latitude and Longitude

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.

Send Request and Get Response using XMLHttpRequest Object

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.

Collect Required Weather Information

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

Display Weather Information in Proper Format


Source Code: weather-forecast.html
Application 3: Distance Calculator
7 Lectures 29:50

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.

Design the Front End

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.

Geocoding to Get Latitude and Longitude of Destination

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

Preview 05:11

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.

Calculate Distance between Source and Destination using Haversine Formula


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.

Further Enhancement

Source Code: distance-calculator.html
Application 4: How to Reach?
6 Lectures 32:33

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

Design the Front End

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.

Get Latitude and Longitude of Source and Destination

We will display the map.

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.

Preview 06:42

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.

Draw the Route between Source and Destination using Google's Directions API

Source Code: howtoreach.html
Application 5: Find Around Me
6 Lectures 35:35

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

Design the Front End

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

Draw the Map

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

Preview 07:46

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

Draw Markers for Different Points of Interests

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

Add Information Windows to Display more Details

Source Code: around-me.html
Application 6: Postcode Finder
6 Lectures 31:40

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.

Design the Front End

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

Get the Latitude and Longitude

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.

Different Options for Initial and Requested Postcodes

Extract the postcode from the result

Get the Postcode from the Result

Some Final Touches

Source Code: postcode-finder.html
Application 7: Store Locator
15 Lectures 01:40:04

Know the Store Locator application in detail

Know the Application

Design the front end of your application

Design the Front End

Populate the County dropdown by getting data from the database

Populate the County Dropdown

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

Implement the onchange of the Dropdown

Connect to the database and get the details from it

Fetch Details from the Database

Get the response from the PHP code

Collect the Response

Create the map using available information

Draw the Map

Add markers for each store

Add the Markers

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
2 More Sections
About the Instructor
4.3 Average rating
282 Reviews
3,540 Students
7 Courses
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.

Report Abuse