Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

HTML5 Geolocation in Action: Build 7 HTML5 Geolocation Apps

Name: HTML5 Geolocation in Action: Build 7 HTML5 Geolocation Apps
Rating: 4.3 (224 reviews)

Learn to Use HTML5 Geolocation API, Google Maps API, Directions API & Places API to Build HTML5 GPS-Based Applications

Created byCrypters Infotech

Last updated 10/2019

English

What you'll 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

Course content

12 sections • 86 lectures • 6h 38m total length

5 Unique Applications You are Going to Develop from Scratch1:27
This section gives an overview of 5 unique applications you are going to develop as part of the course. The applications are:

Where Am I?

Weather Forecast

Distance Calculator

How to Reach?

Find Around Me
What does this course cover?2:29
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.
What Software You Need?0:35
This section tells the software requirements to proceed.

You can download and install these software before proceeding with the course.
What is Geolocation and How it Works?3:34
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 can You Do with Geolocation?2:21
This section describes different uses of geolocation and where it is being used currently.
Geolocation

HTML5 Geolocation API Introduction2:14
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.
What Location Related Information You can Collect?2:40
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.
The getCurrentPosition Method to Get the Position for a Specific Point of Time13:38
This section explains how to use the getCurrentPosition method to get location information for a specific point of time.
Source Code: currentposition.html0:42
Practice Exercise for getCurrentPosition video.
Practice Exercise #10:11
Solution: Practice Exercise #10:42
The watchPosition Method to Get the Position over a Period of Time14:04
This section explains how to use the watchPosition method to get location information over a period of time.
Source Code: getposition.html0:19
HTML5 Geolocation API and Insecure Origins4:12
HTML5 Geolocation API will no longer work for insecure origins. That is, starting with Chrome 50 and Safari 10, HTML5 Geolocation API will not work unless you’ve set up HTTPS on your site.
Practice Exercise #20:06
Practice Exercise for watchPosition video.
Solution: Practice Exercise #20:38
How to Handle Errors?4:52
This section explains how to handle errors in case location information is not retrieved.
Practice Exercise #30:04
Solution: Practice Exercise #30:34
HTML5 Geolocation API

Google Maps API: Overview2:19
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 API11:19
How to Display a Static (Non-Interactive) Map?11:06
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.html0:13
Practice Exercise #40:03
Display a static map of your current location.
Solution: Practice Exercise #40:21
How to Display an Interactive Map?10:07
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.html0:13
Practice Exercise #50:07
Solution: Practice Exercise #50:22
Markers and Information Window to Make the Map More Informative8:23
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.html0:19
Google Maps API

What does the "Where Am I?" Application Do?1:38
Know the "Where Am I?" application in detail
Get Latitude and Longitude of User's Current Location9:32
You will learn how to get the latitude and longitude of the viewer using watchPosition method.
Reverse Geocoding to get Human-Readable Address10:32
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.
Display Current Location in a Map8:32
We will display the current location in a map by adding a marker.
Source Code: whereami.html0:39

Get Current Latitude and Longitude5:02
Get the current latitude and longitude values using getCurrentPosition method.
Send Request and Get Response using XMLHttpRequest Object7:13
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 Request4:30
Collect Required Weather Information8:11
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.
Display Weather Information in Proper Format9:57
We display the information we collected (temperature, pressure, humidity, etc) in a clear format.
Conclusion0:57
Source Code: weather-forecast.html0:39

Design the Front End3:34
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.
Geocoding to Get Latitude and Longitude of Destination7:58
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.
Process Result to Get Latitude and Longitude of Destination5:11
We process the JSON object received as response in order to get the latitude and longitude of destination.
Calculate Distance between Source and Destination using Haversine Formula6:53
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.
Conclusion3:35
Further Enhancement1:18
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.html1:06

Design the Front End3:19
We design the front end with a textbox for the user to enter his destination and also a button.
Get Latitude and Longitude of Source and Destination7:22
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.
Display the Map3:57
We will display the map.
Add Markers and Adjust the Zoom Level Programmatically6:42
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.
Draw the Route between Source and Destination using Google's Directions API9:48
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.html0:54

Design the Front End7:19
We design the front end with a combo box to display points of interests and another combo box to display distances.
Draw the Map5:48
We display the map with current location as the center of the map.
Get Points of Interests using Google's Places API7:46
Get different locations using Google's Places API based on user's selected point of interest and distance.
Draw Markers for Different Points of Interests8:12
We draw markers at the locations we got using Google's Places API
Add Information Windows to Display more Details5:45
We create information window to display more information including icon, name, rating and detailed address about each location.
Source Code: around-me.html1:06

Design the Front End3:51
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 Longitude6:35
Get the latitude and longitude of the user to display his/her postcode. Use the getCurrentPosition method of the HTML5 Geolocation API for this.
Different Options for Initial and Requested Postcodes9:06
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.
Get the Postcode from the Result5:51
Extract the postcode from the result
Some Final Touches5:22
Source Code: postcode-finder.html0:46

Know the Application2:26
Know the Store Locator application in detail
Design the Front End6:47
Design the front end of your application
Populate the County Dropdown8:31
Populate the County dropdown by getting data from the database
Implement the onchange of the Dropdown7:27
Create a function which will be executed when the dropdown value is changed
Fetch Details from the Database8:05
Connect to the database and get the details from it
Collect the Response4:40
Get the response from the PHP code
Draw the Map8:08
Create the map using available information
Add the Markers11:11
Add markers for each store
Google Maps Geocoding API to Get Latitude and Longitude for a Postcode6:03
Collect Latitude and Longitude and Pass it as a Request9:45
Write the Query to Calculate Distance between Two Points9:17
Execute the Query7:13
Collect the Response and Pass it to the Function8:13
Source Code: store-locator.html1:14
Source Code: getfromdb.php1:01

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

Description

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

---------------------------------------------------------------------------------------------------------------------------

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.

It would be great if you could know whether your daughter has reached her school safely.
It would be useful if you could find the actual route to an unknown place.
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.

Google Maps API
Google Places API
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.

Where Am I? that displays the location information in a text message and also in a map.
Weather Forecast that displays the local weather information to the user.
Distance Calculator that calculates the distance between the current location and specified destination
How to Reach? displays the route from the current location to the specified destination
Find Around Me displays nearby restaurants, ATMs etc to the user
Postcode Finder displays the postcode of the user and allows the user to get the postcode of the address entered
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 this course is for:

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

HTML5 Geolocation in Action: Build 7 HTML5 Geolocation Apps

What you'll learn

Explore related topics

Course content

Geolocation is the Answer to the Question: Where Am I? or Where are you?5 lectures • 10min

HTML5 Geolocation API14 lectures • 45min

Google Maps API12 lectures • 45min

Application 1: Where Am I?5 lectures • 31min

Application 2: Weather Forecast7 lectures • 36min

Application 3: Distance Calculator7 lectures • 30min

Application 4: How to Reach?6 lectures • 32min

Application 5: Find Around Me6 lectures • 36min

Application 6: Postcode Finder6 lectures • 32min

Application 7: Store Locator15 lectures • 1hr 40min

Requirements

Description

Who this course is for: