Lesson 23: Geolocation: You Are Here

This lesson will give you an introduction to geolocation.

Geolocation

Geolcation is an API that returns and can display your physical location in the world. It can be displayed as coordinates (latitude and longitude) or using a map. Please notice how your browser will prompt you before allowing trusted sites to run this API. Privacy is always a concern, so you can't force anyone to use this API.

Geolocation is built from two things:

  1. A button that invokes the script to get coordinates.
  2. A script that actually fetches and displays the coordinates (or displays a message if the browser doesn't support it).

The function for geolocation is called getCurrentPosition(). We call the function using getLocation() both in the button element and in the script that follows.

Here's the full code script for a page with simple geolocation. We will then walk through it piece by piece.

HTML:

	
	<p id="html.net">Where are you in the world?</p>
	<button onclick="getLocation()">Get Coordinates</button>

Javascript:

	
	<script>

	  function getLocation()
	    {
	    if (navigator.geolocation)
	      {
	      navigator.geolocation.getCurrentPosition(showPosition);
	      }
	    else
		  { 
		  document.getElementById("html.net").innerHTML="Geolocation is not supported by this browser.";
		  }
	    }
	    
	  function showPosition(position)
	    {
	    document.getElementById("html.net").innerHTML="Latitude: " + position.coords.latitude +
	    "<br>Longitude: " + position.coords.longitude;
	    }

	</script>

First, let's take a look at the HTML. It includes an ID that is later fetched in the script (id="html.net") as well as an event on the button and the name of the function we are calling: getLocation(). This code might be anywhere on your page.

Next, let's walk through the Javascript. We start the script element (remember, this is either placed in the <head> element or before the </body> tag). Thereafter, we invoke the geolocation function itself.

	
	function getLocation()

After that, we cover the situation for when geolocation is not supported by the browser version or because they have JavaScript turned off. In that circumstance, the following message will display: Geolocation is not supported by this browser.

	
	function getLocation()
	  {
	  if (navigator.geolocation)
	    {
	    navigator.geolocation.getCurrentPosition(showPosition);
	    }
	  else
	    {
	    document.getElementById("html.net").innerHTML="Geolocation is not supported by this browser.";
	    }
	  }

After that, we actually call another function because we don't just want to get the location; we also want to display it to the reader as coordinates.

	
	function showPosition(position)
	  {
	  document.getElementById("html.net").innerHTML="Latitude: " + position.coords.latitude +
	  "<br>Longitude: " + position.coords.longitude;
	  }

The text inside the quotes can be modified. It's what people will see, followed by their actual latitude and longitude.

Then you end your script with </script> and it's all complete.

Show using Google Maps

If you want to show a map of the coordinates, you need to add replace the script above with a connector to the map generator you want, such as Google Maps.

	
	function showPosition(position)  
	  {
	  var latlon=position.coords.latitude+","+position.coords.longitude;
	  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
	  +latlon+"&zoom=14&size=400x300&sensor=false";
	  document.getElementById("html.net").innerHTML="<img src='"+img_url+"'>";
	  }

You try! Copy and paste the full code above into a new page, save it, and upload it to the internet and try it out. Try using the Google Maps option too.
Related topics in the RepliesViews
No related topics yet

+ Post a new topic

<< Lesson 22: Advanced APIs

Lesson 24: Web Storage >>