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.
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
Thanks for reading.