🤩Access a heap of free books with a SitePoint account
Get Started
JavaScript

Get Geo Location with 2 lines of JavaScript

Sam Deering
Share

geo-location

This is how you can get a user geographical (geo) location using just 2 lines of JavaScript code. The first line loads the geo location JavaScript file and the second alerts the users location (inside a document ready which can be on one line).

The Code

<script language="JavaScript" src="https://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
	alert("Your location is: " + geoplugin_countryName() + ", " + geoplugin_region() + ", " + geoplugin_city());
});
</script>

Things to note:

  • Geo location provided is based on the ip address / location of your ISP.
  • You are reliant on the API service provided by geoplugin.com.

Run Directly In Firebug

jQuery(document).ready(function($) {
    jQuery.getScript('https://www.geoplugin.net/javascript.gp', function() 
{
    var country = geoplugin_countryName();
    var zone = geoplugin_region();
    var district = geoplugin_city();
    console.log("Your location is: " + country + ", " + zone + ", " + district);
});
});

Full List of Geo Location Properties

function geoplugin_city() { return 'Dobroyd Point';} 
function geoplugin_region() { return 'New South Wales';} 
function geoplugin_regionCode() { return '02';} 
function geoplugin_regionName() { return 'New South Wales';} 
function geoplugin_areaCode() { return '0';} 
function geoplugin_dmaCode() { return '0';} 
function geoplugin_countryCode() { return 'AU';} 
function geoplugin_countryName() { return 'Australia';} 
function geoplugin_continentCode() { return 'OC';} 
function geoplugin_latitude() { return '-33.873600';} 
function geoplugin_longitude() { return '151.144699';} 
function geoplugin_currencyCode() { return 'AUD';} 
function geoplugin_currencySymbol() { return '&#36;';} 
function geoplugin_currencyConverter(amt, symbol) { 
	if (!amt) { return false; } 
	var converted = amt * 0.9587170632; 
	if (converted <0) { return false; } 
	if (symbol === false) { return Math.round(converted * 100)/100; } 
	else { return '&#36;'+(Math.round(converted * 100)/100);} 
	return false; 
}

Hello World Example

<html>
 <head>
  <script language="JavaScript" src="https://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
 </head>
 <body>
  <script language="Javascript"> 
	document.write("Welcome to our visitors from "+geoplugin_city()+", "+geoplugin_countryName()); 
  </script>
 </body>
</html>

Integrate into a form: http://www.jquery4u.com/api-calls/geolocation-jquery-api-geoplugin/

More Info on the Plugin: http://www.geoplugin.com/webservices/javascript