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.

What is Geolocation?

Geolocation refers to the identification of the geographic location of a user or computing device via a variety of data collection mechanisms. Typically, most geolocation services use network routing addresses or internal GPS devices to determine this 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

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

geo location

Here is the source code

<!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 we retrieve the latitude and longitude. Then based on latitude and longitude we want to make the this position as center and set this through Google map options. We set the map type as ROADMAP, you can learn more on map types here Google map types.

We define 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.

We use below html div where we want to display the map on browser.

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

Thanks for reading.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

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