Adding a Location-Aware Page to the Pickup Soccer Site - Exercise

Contact Us or call 1-877-932-8228
Adding a Location-Aware Page to the Pickup Soccer Site - Exercise

Adding a Location-Aware Page to the Pickup Soccer Site

Duration: 20 to 30 minutes.

In this exercise, you will use the GeoLocation API to offer visitors to the Pickup Soccer site a way to find pickup games near their current location, as shown in the screenshot:

iphone screenshot - nearby games

  1. Open ClassFiles/GeoLocationAPI/Exercises/findgames/index.html in your file editor.
  2. Using the code outline given in the exercise file, fill in the missing JavaScript code to find the user's current location.
  3. Using the code outline given and referencing the previous example code, fill in the missing JavaScript code to display a Google Map with the user's current location.
  4. Write JavaScript code to set locations for at least two sample nearby games; use the same strategy as above: add or subtract a few decimal places' worth of latitude and longitude to the user's current location.
  5. Place these sample nearby games on the map.

Challenge

Explore the various Google Map display options and display the user's current location in the info window:

iphone screenshot - nearby games, challenge

  1. Change the map type from ROADMAP to some other option - see the Map Options section of the Google Maps "Getting Started Guide" for possible values and more information.
  2. Display the user's current location in the info window, as shown above.
  3. Change the zoom level to display a wider area.

Solution:

GeoLocationAPI/Solutions/findgames/index.html
<!DOCTYPE html>
<html>
<head>
	<title>Soccer Pickup</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<!-- include the Google Maps Javascript file -->
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<meta name="viewport" content="initial-scale=1.0, 
		width=device-width" />
</head>

<body>
	<div id="container">
	<header>
	<a href="index.html"><img src="images/logo.png" alt="Soccer Pickup" id="logo" /></a>
	<nav id="mainnav">
		<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="find-a-game.html">Find a Game</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
	</header>
	<div id="maincontent">
		<h1>Nearby Games</h1>
		<div id="mapcontainer"></div>
		<script type="text/javascript">

			//test whether the user's device supports the GeoLocation API; call getCurrentPosition if so
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
			}

			function locateSuccess(loc) {
				//create variables to represent the user's lat and long position
				var latitude = loc.coords.latitude;
				var longitude = loc.coords.longitude;
				var coords = new google.maps.LatLng(latitude, longitude);

				//create two fake pickup game locations, near to the user's current location:
				var fakegame1_coords = new google.maps.LatLng(latitude - 0.001, longitude + 0.002);
				var fakegame2_coords = new google.maps.LatLng(latitude - 0.003, longitude - 0.002);

				//set options for the Google Map:
				var options = {
					zoom: 15,
					center: coords,
					mapTypeId: google.maps.MapTypeId.ROADMAP

				};

				//create the Google Map:
				var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

				//create display text for the map popup window and the popup window
				var infoWindowText = "<p>You are here!</p>";
				var infowindow = new google.maps.InfoWindow({
					content: infoWindowText
				});

				//create a marker for the user's current position
				var marker = new google.maps.Marker({
					position: coords,
					map: map
				});

				//create markers for the two games
				var fakegame1_marker = new google.maps.Marker({
					position: fakegame1_coords,
					map: map
				});
				var fakegame2_marker = new google.maps.Marker({
					position: fakegame2_coords,
					map: map
				});

				//enable clicking on the current-location marker
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map,marker);
				});

				//popup the current-location window when the page loads
				google.maps.event.trigger(marker, 'click');

			}
			function locateFail(geoPositionError) {
				//create an alert message when locating the user fails
				alert('An unknown error occurred, sorry');
			}
</script>
	</div>
	<aside id="sidebar">
		<h3>About Us</h3>
		<p>Soccer Pickup is your source for finding local recreational soccer games for adults. Leagues are great - but sometimes you just want to lace up your boots and find an informal game. Check back often to find a game near you!</p>
	</aside>
	<footer id="footerinfo">
	  <p>Soccer Pickup: Your guide to finding a game.</p>
	</footer>
  </div>
</body>
</html>

We include the Google Maps JavaScript file in the head of the document. We create an empty div (with id mapcontainer), in the body of the page, to hold our map.

We write JavaScript to test whether we can find their location (if (navigator.geolocation)) on their current device. If so, we call if (navigator.geolocation.getCurrentPosition()) to get the location.

Function locateSuccess handles the success case, where we have found their location. We create a new Google LatLng object from their location; two more LatLng objects represent the nearby games.

We set options for and create the map, set up the text for and add the InfoWindow, and create markers for the user's position and the two games. Last, we enable clicking on the InfoWindow and ensure (with google.maps.event.trigger(marker, 'click')) that the InfoWindow pops up when the page loads.

Challenge Solution:

GeoLocationAPI/Solutions/findgames/challenge.html
<!DOCTYPE html>
<html>
<head>
	<title>Soccer Pickup</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>

<body>
	<div id="container">
	<header>
	<a href="index.html"><img src="images/logo.png" alt="Soccer Pickup" id="logo" /></a>
	<nav id="mainnav">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="find-a-game.html">Find a Game</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
	</header>
	<div id="maincontent">
		<h1>Nearby Games</h1>
		<div id="mapcontainer"></div>
		<script type="text/javascript">

			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
			}

			function locateSuccess(loc) {
				var latitude = loc.coords.latitude;
				var longitude = loc.coords.longitude;
				var coords = new google.maps.LatLng(latitude, longitude);

				//create two fake pickup game locations, near to the user's current location:
				var fakegame1_coords = new google.maps.LatLng(latitude + (Math.random()/100), longitude - (Math.random()/100));
				var fakegame2_coords = new google.maps.LatLng(latitude - (Math.random()/100), longitude + (Math.random()/100));

				//set options for the Google Map:
				var options = {
					zoom: 8,
					center: coords,
					mapTypeId: google.maps.MapTypeId.HYBRID
				};

				//create the Google Map:
				var map = 
						new google.maps.Map(document.getElementById("mapcontainer"), options);

				//create display text for the map popup window and the popup window
				var infoWindowText = "<p>You are at "+latitude+","+longitude+"</p>";
				var infowindow = new google.maps.InfoWindow({
					content: infoWindowText
				});

				//create a marker for the user's current position
				var marker = new google.maps.Marker({
					position: coords,
					map: map
				});

				//create markers for the two games
				var fakegame1_marker = new google.maps.Marker({
					position: fakegame1_coords,
					map: map
				});
				var fakegame2_marker = new google.maps.Marker({
					position: fakegame2_coords,
					map: map
				});

				//enable clicking on the current-location marker
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map,marker);
				});

				//popup the current-location window when the page loads
				google.maps.event.trigger(marker, 'click');

			}
			function locateFail(geoPositionError) {
				alert('An unknown error occurred, sorry');
			}
</script>
	</div>
	<aside id="sidebar">
		<h3>About Us</h3>
		<p>Soccer Pickup is your source for finding local recreational soccer games for adults. Leagues are great - but sometimes you just want to lace up your boots and find an informal game. Check back often to find a game near you!</p>
	</aside>
	<footer id="footerinfo">
	  <p>Soccer Pickup: Your guide to finding a game.</p>
	</footer>
  </div>
</body>
</html>

We change the zoom level to a lower number, to show a wider geographic area. Setting mapTypeId: google.maps.MapTypeId.HYBRID presents the map as a hybrid roadmap, with both aerial photography and road features. Last, infoWindowText = "You are at "+latitude+","+longitude+"" shows the user's latitude/longitude location in the InfoWindow, using JavaScript's + string concatenation operator.

Next