GEO Location with HTML5 and jQuery

This tutorial shows you how to display the Geographic location or Geo location of a user or device on a Google map, using your browser’s HTML5 Geolocation feature along with the Google Maps JavaScript API. In this example I am going to use Google’s map JavaScript API. If Geolocation is supported in the browser then only it is going to display the current location otherwise it will show an error in the alert box.

What is Geolocation?

Geolocation refers to the identification of the geographic location of a user or computing device via a variety of data collection mechanism. Typically, most Geolocation services use network routing addresses or internal GPS devices to determine the location. Geolocation is a device-specific API. This means that browsers or devices must support Geolocation in order to use it through web applications. You may find about Geolocation hereĀ Google Geolocation

Prerequisites

Knowledge of HTML, JavaScript or jQuery

Browser’s HTML5 support

Final Result

Below is the image of the map that identified your present location.

geo location

Geolocation

Here is the complete source code that you can run and see your current location in the browser.

Note that this code may not run simply in the browser for security reason and you may get access denied error. So you need to run it through a web server to get the correct result.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GEO location with HTML5, jQuery</title>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(function (p) {
				var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
				
				var mapOptions = {
					center: LatLng,
					zoom: 13,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				
				var geocoder = new google.maps.Geocoder();
				var infoWindow = new google.maps.InfoWindow();
				
				var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
				
				var marker = new google.maps.Marker({
					position: LatLng,
					map: map
				});
				
				google.maps.event.addListener(marker, "click", function (e) {
					geocoder.geocode({'location': LatLng}, function(results, status) {
						if (status === google.maps.GeocoderStatus.OK) {
							if (results[0]) {
								infoWindow.setContent("<div style = 'height:100px;width:200px'><b>Address:</b> " + results[0].formatted_address + "<br /><b>Latitude:</b> " + p.coords.latitude + "<br /><b>Longitude:</b> " + p.coords.longitude);
								infoWindow.open(map, marker);
							} else {
								window.alert('No results found');
							}
						} else {
							window.alert('Geocoder failed due to: ' + status);
						}
					});
				});
			});
		} else {
			alert('Geo Location feature is not supported in this browser.');
		}
	</script>
</head>
<body>
	<div id="dvMap" style="width: 500px; height: 500px"></div>				
</body>

First using browser’s navigator.geolocation I retrieved the latitude and longitude. Then based on latitude and longitude I want to make the this position as center and set this through Google map options. I have set the map type as ROADMAP, you can learn more on map types hereĀ Google map types.

I defined Geocoder and InfoWindow for retrieving actual human readable address or location and show them on a windows when you click on marker on the map.

I used below html div where we want to display the map on browser.

<div id="dvMap" style="width: 500px; height: 500px"></div>

Hope you got an idea on how to find current location using Google map API.

Source Code

Download

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *