***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**
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.
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
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."
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.
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.
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 !!!
This section gives an overview of 5 unique applications you are going to develop as part of the course. The applications are:
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.
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.
Quiz on the basics of geolocation.
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.
This section explains how to use the watchPosition method to get location information over a period of time.
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 for watchPosition video.
This section explains how to handle errors in case location information is not retrieved.
To check your knowledge on HTML5 Geolocation 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.
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.
Display a static map of your current location.
You will learn how to add markers to display an exact position and information windows to display more details about the location.
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.
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.
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.
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.
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.
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.
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
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
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.