Blog on hold: This blog is currently on hold. Please visit thoughts.keranmckenzie.com for new blog posts

Watch Keran's YouTube Channel #theRandomnessProject


Post Pic

Google Maps V3 – distanceFrom()

Google Maps API v3 is awesome, but missing some of key functions that were in Google Maps API v2 that made it super easy to do some things. This post shows you how to quickly add that missing functionality back in.

I’ve been tinkering lately with Google Maps API. I love that Google have created so many really solid API’s that folks like myself can leverage, to simply learn with, play with – or launch some great new site with.

For those in the know, there are two formats of the Google Maps API:

V2 has been around for a while, but as of May this year is deprecated (no longer recommended), which is great because there are some awesome wins you can get by moving to V3 (like full support for all mobile devices).

However, there are some (okay a LOT) of changes between V2 and V3. For example in V2 to add a listener to an element you did:

GEvent.addListener();

However in V3 you do the more full reference of:

google.maps.event.addListener();

That’s fine, those are really just syntax changes and you soon pick up on those. However there are other changes

No more ‘distanceFrom()’

One of the more annoying things is some functions that were in V2 are gone completely from V3 and there is no reference in the Google documentation as to why or what to use instead.

As I said, I’ve been playing around and one of the things I wanted to do was find out the distance between two markers on the map. In V2 you simply say

var distance = markerOne.distanceFrom(markerTwo);

This fails completely in V3 – turns out there IS no support at all for any distance calculation in V3 (note: apparently it’s in beta, it was known as wh() for a while, but that’s no longer supported either).

Prototype extensions to the rescue

Now I’m not that much of a Javascript person. I tinker around, hack around – but don’t live and breathe the language like some of my friends. But one thing I did learn is that ‘prototype’ languages (like javascript) allow you to append or create functions and slot them back into a model (forgive me if my terminology is wrong!).

Basically – you can quickly add your own distanceFrom() function back into the Google Maps LatLng functions.

Okay, lets slot it in

If you are playing with Google Maps, you’ll have a bunch of javascript either in your HTML file, or in a separate JS file. Pop the following into your Javascript – I’ve got it as the last thing (just before the closing </script> ┬átag)

/**
* @param {google.maps.LatLng} newLatLng
* @returns {number}
*/
google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
   // setup our variables
   var lat1 = this.lat();
   var radianLat1 = lat1 * ( Math.PI  / 180 );
   var lng1 = this.lng();
   var radianLng1 = lng1 * ( Math.PI  / 180 );
   var lat2 = newLatLng.lat();
   var radianLat2 = lat2 * ( Math.PI  / 180 );
   var lng2 = newLatLng.lng();
   var radianLng2 = lng2 * ( Math.PI  / 180 );
   // sort out the radius, MILES or KM?
   var earth_radius = 3959; // (km = 6378.1) OR (miles = 3959) - radius of the earth
 
   // sort our the differences
   var diffLat =  ( radianLat1 - radianLat2 );
   var diffLng =  ( radianLng1 - radianLng2 );
   // put on a wave (hey the earth is round after all)
   var sinLat = Math.sin( diffLat / 2  );
   var sinLng = Math.sin( diffLng / 2  ); 
 
   // maths - borrowed from http://www.opensourceconnections.com/wp-content/uploads/2009/02/clientsidehaversinecalculation.html
   var a = Math.pow(sinLat, 2.0) + Math.cos(radianLat1) * Math.cos(radianLat2) * Math.pow(sinLng, 2.0);
 
   // work out the distance
   var distance = earth_radius * 2 * Math.asin(Math.min(1, Math.sqrt(a)));
 
   // return the distance
   return distance;
}

Now your markerOne.distanceFrom(markerTwo) will work as expected and return an integer for you to carry on using in the rest of your script.

I’m not saying this is the most amazing script – it’s not, and it could probably be written more succinctly – however it works, and it’s showing the idea.

This distanceFrom() function uses the Haversine Calculation to figure out distance.

Summary

So yes, Google Maps API v3 rocks, it’s really powerful & pretty easy to work with. However there are some missing functions, but by adding the function back in via prototype you can restore some of the simple to use functionality.

Just be careful – Google may well reactivate the distanceFrom() function in the future, so use with caution.

Support Studiowhiz.com