HTML and CSS Reference
Calculating the Position between Two
When you start building games with geolocation, one of the first difficulties you'll face is the problem to calcu-
late the distance between two latitudes and longitudes. Whether this is to detect the proximity between players
or distance to a goal, this is something that you definitely must do.
On the client side, Google's Map v3 API provides a static method under
google.maps.geometry.spherical called computeDistanceBetween , which takes two
LatLng objects and returns the distance in meters.
If you don't have an API readily handy to do the calculation for you, your can use the Haversine distance
formula ( http://en.wikipedia.org/wiki/Haversine_formula ) to calculate the distance on a sphere between two
in lat1 , lon1 lat2 , and lon2 and outputs the distance between the two in kilometers:
var R = 6371; // km
var dLat = (lat2-lat1).toRad();
var dLon = (lon2-lon1).toRad();
var lat1 = lat1.toRad();
var lat2 = lat2.toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) *
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
You can plug this formula directly into a method in your code to calculate the distance between two points.
This chapter showed you how to use geolocation in the browser to generate a position that can be used to display
an interactive map. With the ability to track a position and display and update interactive maps, a number of
augmented-reality games can be built in the browser. This includes scavenger hunts, geocaching, proximity-
based games, and more. The hope is that putting geolocation tools in your arsenal can open up a new world of
HTML5 games that breaks gaming outside of its normal confines.