Google Maps Calculate Distance
HTML
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<input id="address" type="textbox" value="cm1 2qe">
<input id="postCodeSearch" type="button" value="Geocode" >
<div id="places">
<div class="item" data-postcode="cm12qe">
waterhouse lane
<span class='miles'></span>
</div>
<div class="item" data-postcode="cm26hx">
navigation road
<span class='miles'></span>
</div>
<div class="item" data-postcode="cm34dl">
main road danbury
<span class='miles'></span>
</div>
<div class="item" data-postcode="cm29bl">
new london road
<span class='miles'></span>
</div>
</div>
CSS
.item {
width: 100px;
height: 100px;
margin: 3px;
float: left;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
JavaScript
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var $container = $('#places'),
$items = $('.item')
$("#postCodeSearch").click(function() {
var address = $("#address").val();
$('.item').each(function() {
var $this = $(this)
var thispostCode = $this.data("postcode");
var directionsRequest = {};
directionsRequest.origin = address;
directionsRequest.destination = thispostCode;
directionsRequest.travelMode = "WALKING";
directionsService.route(directionsRequest, function(directionsResult, directionsStatus) {
var totalDistance = 0;
var legs = directionsResult.routes[0].legs;
$.each(legs, function(i) {
totalDistance += legs[i].distance.value;
});
totalDistance = totalDistance * 0.000621371192;
$this.data("miles", totalDistance);
$this.find(".miles").text(totalDistance.toFixed(2) + " miles");
$container.isotope( 'updateSortData', $items ).isotope({ sortBy : 'miles' });
});
});
});
$container.isotope({
itemSelector: '.item',
getSortData: {
miles: function($elem) {
return parseInt($elem.data('miles'), 10);
// return $elem.data('postcode');
}
}
});