1. Originally Posted by Nile
There has to be a simpler way. Give me some time and I'll get it for you.

@bluewalrus - Just to be clear, when we see for example (as a typical output for my most recent version from post #3):

0. 13.112796264776 Miles
1. 106.622946948856 Miles
2. 106.386204524704 Miles
3. 110.120645388624 Miles
4. 42.324077371888 Miles
5. 40.950225666376 Miles
6. 9999999
7. 0 Miles
8. 35.868030687008 Miles
9. 27.780884623128 Miles
10. 27.724961215848 Miles
11. 47.561615149256 Miles
We want that pared down to:

Code:
```7. 0 Miles
0. 13.112796264776 Miles
10. 27.724961215848 Miles```
Or, do we want to see instead more like:

Boston, Massachusetts, US - 0 Miles
Ithaca, New York, United States - 13 Miles
Detroit, Michigan, us - 28 Miles
I'm pretty sure it's this last. But just let me know for clarity's sake.

And though it shouldn't affect the code required to get that far, bear in mind the other points about possibly needing to save these values somewhere and/or pass them on to another function. Let me know if either of those will be the case, and if so tell me as much as you can about that as you conceive it.

2. ## The Following User Says Thank You to jscheuer1 For This Useful Post:

bluewalrus (12-14-2010)

3. Elite Coders
Join Date
May 2007
Location
Boston,ma
Posts
2,127
Thanks
173
Thanked 207 Times in 205 Posts
We will just need the 3 closest points.

So your

7. 0 Miles
0. 13 Miles
10. 28 Miles
is correct. EDIT: I'd prefer the decimals be rounded up.

I figure with the keys there (7, 0, 10) I can just pull the address from the videographer array with that, right? Thanks.

4. Yes, sort of. But what do you want the user to see?

Also the videographer array:

Code:
```	var videographer = [
['One', 42.4433333, -76.5, 1],
['Two', 33.7091847, -117.9536697, 2],
['Three', 34.0522342, -118.2436849, 3],
['FOur', 37.7749295, -122.4194155, 4],
['Five', 34.7303688, -86.5861037, 5],
['Six', 33.7489954, -84.3879824, 6],
['Seven', 52.5234051, 13.4113999, 7],
['eight', 42.3584308, -71.0597732, 8],
['Nine', 41.850033, -87.6500523, 9],
['ten', 39.9611755, -82.9987942, 10],
['eleven', 42.331427, -83.0457538, 11],
['twelve', 41.6005448, -93.6091064, 12]
];```
contains no addresses. Looks like Long/Lat to me. I guess those could be considered addresses. If that's what your after, what for? What're the strings for? Why is the upper and lower case of those strings inconsistent?

Most importantly though, again:

1. What do you want the user to see?

2. What if anything do you want saved?

3. What if anything do you want passed to another function?

5. Elite Coders
Join Date
May 2007
Location
Boston,ma
Posts
2,127
Thanks
173
Thanked 207 Times in 205 Posts
The videographer array is used for the initial points on the map they are plotted via the lat/lng. The String in the first column(?) of the videographer array will contain the videographers name and the fourth doesnt have a use yet I was just playing around with that one. The values in the first column(?) are just place holders right now so I figured anything was fine there.

I'd want the user to see the mileage (distanceArray[]), the location (end[]), and the name (videographer[]) of the shortest 3 distances.

Do you mean saved in JS variables or for later, I don't need any of the displayed data saved for later. For JS variables I think just the 3 of the 3 above .

After the calculations are complete and the outcome is displayed nothing needs to pass, not sure if that answers your question about passing from the functions.

6. I think I get it now. That fourth column (value may be the best term) in each videographer array (videographer is a multidimensional array) may come in handy as a sort of index once we cut it up, if we do.

Now you haven't said it yet that I can tell, but I'm thinking the map could then be updated to show only the three closest points. And I believe the map API may allow for the addition of some goodies - tooltips and extra features when clicked to those points. Also the starting point could maybe be marked with an X or something. But let's leave all that aside for now.

I'll play with getting the output into the desired format and get back to you on that when I have something viable.
Last edited by jscheuer1; 12-14-2010 at 05:17 PM. Reason: English usage

7. Take this one out for a spin:

Code:
```<!DOCTYPE html>
<html>
<title>Google Maps JavaScript API v3 Example: Event Closure</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- <link rel="stylesheet" type="text/css" media="screen" href="videomap.css" />
-->
<base href="http://174.120.151.156/~crazychr/" />
<script type="text/javascript">
var map, directionDisplay, directionsService, stepDisplay, markerArray = [], distanceArray = [], TimeArray = [], end = [];
end[0] = "Ithaca, New York, US";
end[1] = "Fountain Valley, California, US";
end[2] = "Los Angeles, California, US";
end[3] = "San Francisco, California, US";
end[4] = "Huntsville, Alabama, US";
end[5] = "Atlanta, Georgia, US";
end[6] = "Berlin, Germany";
end[7] = "Boston, Massachusetts, US";
end[8] = "Chicago, Illinois, US";
end[9] = "Columbus, Ohio, US";
end[10] = "Detroit, Michigan, US";
end[11] = "Des Moines, Iowa, US";
function initialize() {
var myOptions = {
zoom: 10,
}
document.getElementById("map_canvas"), myOptions);
setMarkers(map, videographer);
var rendererOptions = {
map: map
}
// Instantiate an info window to hold step text.
var opt = document.createElement('option'), topt;
/*     for(var i = 0; i < end.length; ++i){
topt = opt.cloneNode(false);
topt.value = end[i];
topt.appendChild(document.createTextNode(end[i]));
} */
}
var videographer = [
['One', 42.4433333, -76.5, 1],
['Two', 33.7091847, -117.9536697, 2],
['Three', 34.0522342, -118.2436849, 3],
['FOur', 37.7749295, -122.4194155, 4],
['Five', 34.7303688, -86.5861037, 5],
['Six', 33.7489954, -84.3879824, 6],
['Seven', 52.5234051, 13.4113999, 7],
['eight', 42.3584308, -71.0597732, 8],
['Nine', 41.850033, -87.6500523, 9],
['ten', 39.9611755, -82.9987942, 10],
['eleven', 42.331427, -83.0457538, 11],
['twelve', 41.6005448, -93.6091064, 12]
];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var videographer = locations[i], myLatLng = new google.maps.LatLng(videographer[1], videographer[2]), marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: videographer[0]
});
bounds.extend(myLatLng);
map.fitBounds(bounds);
}
}
function calcRoute(a) {
var request = {
destination: end[a],
}, output = document.getElementById('output'), r = [];
if(a === 0){
output.innerHTML = '&nbsp;';
distanceArray = [];
}
directionsService.route(request, function(response, status){
if (response.status === 'OK'){
distanceArray[a] = [a, (response.routes[0].legs[0].distance.value * .000621371192)];
TimeArray[a] = response.routes[0].legs[0].duration.text;
} else {
distanceArray[a] = [a, 9999999];
TimeArray[a] = 'Never';
}
if(++a < end.length){
calcRoute(a);
} else {
distanceArray.sort(function(a, b){var x = +a[1], y = +b[1]; return x < y? -1 : x > y? 1 : 0;});
for (a = 0; a < 3; ++a) {
if (distanceArray[a]){
r .push([videographer[distanceArray[a][0]][0], '. ',
end[distanceArray[a][0]], ': ',
Math.ceil(distanceArray[a][1]), ' Miles'].join(''));
}
}
output.innerHTML = r.join('<br />\n');
}
});
}
function showSteps(directionResult) {
// For each step, place a marker, and add the text to the marker's
// info window. Also attach the marker to an array so we
// can keep track of it and remove it when calculating new
// routes.
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
position: myRoute.steps[i].start_point,
map: map
});
markerArray[i] = marker;
}
}
</script>
<form style="width:300px; float:left; height:50px;" onsubmit="calcRoute(0); return false;">
<input type="submit" value="Find Videographer" />
</form>
<div id="output" style="background:#f77; width:300px; padding:0.5em; float:left;">&nbsp;</div>
<div id="map_canvas" style="width: 500px; height: 500px; float:left; border:3px #000000 solid; margin-left:20px;"></div>
<div id="warnings_panel"></div>
</body>
</html>```
Note: No Math.min() required - I used a numerical sort.
Last edited by jscheuer1; 12-14-2010 at 09:00 AM. Reason: fix miles and formatting of location names

8. ## The Following User Says Thank You to jscheuer1 For This Useful Post:

bluewalrus (12-14-2010)

9. Elite Coders
Join Date
May 2007
Location
Boston,ma
Posts
2,127
Thanks
173
Thanked 207 Times in 205 Posts
Yup, that did it. Thanks, did you rewrite the mileage calculation as well I noticed it is correct now.

10. Originally Posted by bluewalrus
Yup, that did it. Thanks, did you rewrite the mileage calculation as well I noticed it is correct now.
Yes (changed duration to distance):

Code:
```	directionsService.route(request, function(response, status){
if (response.status === 'OK'){
`			distanceArray[a] = [a, (response.routes[0].legs[0].distance.value * .000621371192)];`
TimeArray[a] = response.routes[0].legs[0].duration.text;
} else {
distanceArray[a] = [a, 9999999];
TimeArray[a] = 'Never';
}
if(++a < end.len . . .```
You already had the correct multiplier for converting meters to miles. And I reformatted some of the entries in the end array so it would yield more consistent results layout and appearance wise as far as the place names in the output go.

11. ## The Following User Says Thank You to jscheuer1 For This Useful Post:

bluewalrus (12-17-2010)

12. New Comer (less than 5 posts)
Join Date
Feb 2011
Posts
1
Thanks
0
Thanked 0 Times in 0 Posts
Hello Friends,

I am working on show direction using Google map API, There is a thing
for which I need help of you guys.

Let suppose there is a route between Point A and Point B displaying
using getdirection() method of Google Map API. which is generating
successfully.

Now there is a point / marker at particular location (lang/lat) and my
user want to check,is that point belongs to suggested route
direction ?
On map its showing it belongs or not , but I need to check this thing
using programing to use result in other method.

Please can any expert help in this?
Thanks & regards
Vinaykant

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•