Skip to content

Instantly share code, notes, and snippets.

@suzker

suzker/demo2.html

Created October 5, 2012 16:30
Show Gist options
  • Save suzker/3840849 to your computer and use it in GitHub Desktop.
Save suzker/3840849 to your computer and use it in GitHub Desktop.
Download ZIP
Distance from calling the Distance Matrix Service
Raw
demo2.html
<!-- Suzker -->
<!DOCTYPE html>
<html>
<head>
<title>Compute Distance by the Routing Service</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
// function to filter the mediate points
// inputs:
// mPoints, an array of 'google.maps.LatLng' objects. should including the starting and ending points;
// n, the number of reversed points after the filtering process. n >= 2;
// unitSys, int value indicates the unit system, 0 for METRIC and others for IMPERIAL;
// callback, a call back function for receiving the points filtered;
// callback(Array<google.maps.LatLng> mPoints, Array<google.maps.LatLng> fmPoints)
// returns:
// fmPoints, filtered coord points including the starting and the ending points.
function interMediatePointFilter(mPoints, n, unisys, callback){
if (n < 2) {n=2;}
var endPos = 24;
if (mPoints.length < 25) {
endPos = mPoints.length - 1;
}
var unitSystemOpt = google.maps.UnitSystem.METRIC;
if (unisys != 0){
unitSystemOpt = google.maps.UnitSystem.IMPERIAL;
}
// compute the total distances of that trip
var totalDistance = 0;
var distanceMatrixServ = new google.maps.DistanceMatrixService();
distanceMatrixServ.getDistanceMatrix(
{
origins: [mPoints[0]],
destinations: mPoints.slice(1, endPos),
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: unitSystemOpt
},
function (response, status){
if (status!=google.maps.DistanceMatrixStatus.OK){
console.log('Distance Service Error: ' + status);
} else {
filterLogicCallBack(response, n, mPoints, callback);
}
}
);
}
// a call back function to handle the response from distance matrix service
function filterLogicCallBack(response, n, mPoints, callback){
var totalDistance = 0;
for (i=0; i<response.rows[0].elements.length; ++i){
totalDistance += response.rows[0].elements[i].distance.value;
}
console.log('Total Distance: '+totalDistance);
// compute the split point of the trip according to the total distance
var splitDistance = totalDistance / (n-1);
// select the points that is nearest to the split points
var fmPoints = new Array();
var intermediaDist = 0;
fmPoints.push(mPoints[0]); //add the starting point
totalDistance = 0;
for (i=0; i<response.rows[0].elements.length; ++i){
intermediaDist = response.rows[0].elements[i].distance.value
totalDistance += intermediaDist;
if (totalDistance > (fmPoints.length)*splitDistance){
if (totalDistance - (fmPoints.length)*splitDistance > (fmPoints.length)*splitDistance - (totalDistance - intermediaDist)){
if (i > 0) {
fmPoints.push(mPoints[i-1]);
}
} else {
fmPoints.push(mPoints[i]);
}
}
if (fmPoints.length-1 == n){break;}
}
fmPoints.push(mPoints[mPoints.length-1]); //add the ending point
// call the call back function
callback(mPoints, fmPoints);
}
</script>
<script>
var themap;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(37.29966666666667, -121.94883333333334),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
themap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// demo of filtering coords
var mPoints = [new google.maps.LatLng(37.29966666666667, -121.94883333333334)
,new google.maps.LatLng(37.29416666666667, -121.94083333333333)
,new google.maps.LatLng(37.29416666666667, -121.94033333333333)
,new google.maps.LatLng(37.288666666666664, -121.93466666666667)
,new google.maps.LatLng(37.1, -121.14333333333333)
,new google.maps.LatLng(37.102833333333336, -121.13616666666667)
,new google.maps.LatLng(37.10033333333333, -121.12833333333333)
,new google.maps.LatLng(37.086666666666666, -121.11166666666666)
,new google.maps.LatLng(37.025166666666664, -120.9395)
,new google.maps.LatLng(37.02333333333333, -120.93783333333333)
,new google.maps.LatLng(37.019666666666666, -120.93416666666667)
,new google.maps.LatLng(36.63883333333333, -120.6265)
,new google.maps.LatLng(36.638666666666666, -120.62616666666666)
,new google.maps.LatLng(34.66116666666667, -118.757)
,new google.maps.LatLng(34.65983333333333, -118.756)
,new google.maps.LatLng(34.657, -118.755)
,new google.maps.LatLng(34.1015, -118.34116666666667)
,new google.maps.LatLng(34.1015, -118.34116666666667)
,new google.maps.LatLng(34.1015, -118.341)
,new google.maps.LatLng(34.10216666666667, -118.33966666666667)
,new google.maps.LatLng(34.05466666666667, -118.23333333333333)
,new google.maps.LatLng(34.05466666666667, -118.23333333333333)
,new google.maps.LatLng(34.054833333333335, -118.23316666666666)
,new google.maps.LatLng(33.943, -118.28)
,new google.maps.LatLng(33.943, -118.28)
,new google.maps.LatLng(33.9315, -118.2805)
,new google.maps.LatLng(33.9315, -118.2805)
,new google.maps.LatLng(33.94, -118.402)];
interMediatePointFilter(mPoints, 7, 0, updateMarkers);
}
google.maps.event.addDomListener(window, 'load', initialize);
function updateMarkers(mPoints, fmPoints){
// put markers
for (i=0; i<mPoints.length; ++i){ // putting the original un-filtered markers
var marker = new google.maps.Marker({
map : themap,
position : mPoints[i],
clickable: false
});
}
blueIconImg = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
for (i=0; i<fmPoints.length; ++i){ // putting the filtered markers in blue?
var marker = new google.maps.Marker({
map : themap,
position : fmPoints[i],
clickable: false,
icon: blueIconImg
});
}
}
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment