HTML5 Geolocation Example

That's Doctor Awesome to you!

BrettBits > Java and Javascript Programs > HTML5 Geolocation Example

Click the button below. Your web browser will then ask you for permission to determine your location.

To use this Javascript for your own, copy the contents of the textbox below, and paste them into a text editor. Then, save the contents as a .htm or .html file. The JavaScript is now yours! Please ensure you give me proper credit if you repost it somewhere else.

Javascript Source Code

// This function is called asynchronously when the web browser
// successfully returns with the user's position. (It is up to the
// web browser how it determines this).
function successCallback(position) {
	var resultHTML = ""; // The HTML that will be displayed to the user
	var latlong = position.coords.latitude
		+ ","
		+ position.coords.longitude;

// Inform the user of their latitude and longitude in
	// World Geodetic System 1984 (WGS 84).
	resultHTML += "Your approximate Latitude and Longitude: "
		+ latlong;
	resultHTML += "<br />";
	
	// Inform the user of the accuracy of this information.
	// This is dependent on how the web browser determined their
	// location (e.g. by IP address, cell phone tower triangulation,
	// satellite, etc).
	resultHTML += "This is accurate to within "
		+ position.coords.accuracy
		+ " meters.";
	resultHTML += "<br /><br />";

// Add a link to show the user their approximate location in Google Maps
	var googleMapsLink = "http://maps.google.com/maps?q="
		+ latlong;
	resultHTML += "<a href=\"" + googleMapsLink + "\" target=\"_blank\">";
	resultHTML += "View your location in Google Maps.";
	resultHTML += "</a>";
	resultHTML += "<br />";

// Add a link to show the user their approximate location in Bing Maps
	var bingMapsLink = "http://www.bing.com/maps/?where1="
		+ latlong;
		resultHTML += "<a href=\"" + bingMapsLink + "\" target=\"_blank\">";
	resultHTML += "View your location in Bing Maps.";
	resultHTML += "</a>";

// Display the resultant HTML to the user.
	setResultHTML(resultHTML);
}

// This function is called asynchronously when the web browser
// is unable to determine the user's location for some reason.
function errorCallback(error) {
	switch(error.code) {
		case error.PERMISSION_DENIED:
			alert("The user denied permission to determine their location.");
			break;
		case error.POSITION_UNAVAILABLE:
			alert("The web browser is unable to determine the user's location.");
			break;
		case error.TIMEOUT:
			alert("The operation timed out while trying to determine the user's location.");
			break;
		default:
			alert("An unknown error occured.");
			break;
	};
}

// This function is called when the "Show my location" button is clicked.
function findLocationButtonClicked() {
	if(navigator.geolocation) { // Check that browser supports HTML5 geolocation.
		// Browser supports HTML5 geolocation
		navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
	} else {
		// Browser does not support HTML5 geolocation
		var resultHTML = "Your browser does not support HTML5 geolocation.";
		setResultHTML(resultHTML); // Inform user of the problem.
	}
}

// Accepts a string of HTML and sets a result container
// with this HTML content.
function setResultHTML(str) {
	var resultContainer = document.getElementById("resultsContainer");
	if(resultContainer) {
		resultContainer.innerHTML = str;
	}
}
// -->
</script>

<div align="center">
	Click the button below. Your web browser will then ask you for permission to determine your location.
	<br /><br />
	<input type="button" onclick="findLocationButtonClicked();" value="Show my location" />
	<br /><br />
	<div id="resultsContainer"></div>
</div>

Alternatively, you can download the source .html file itself by right-clicking on the Download button below, and click "Save Target As..." or "Save Link As...":

Share This Page!