1

See the code below, I am amateur at javascript so sorry if it is really bad. Basically my function someFunc() is activated upon the press of a button after it has got the eventlocation and the currentlocation through some of forms and the other functions. I assume NaN is an error and I reckon that this has to be a fairly simple fix, I just done have a clue.

The two global variables globalevent and globalcurrent echo the correct coordinates using the doc set value in the someFunc() but the calculate distance isn't working. When I 'POST' the coords and bring them back as php variables it calculates just fine.

UPDATE: The following works @geocodezip put me in the right direction.

var map;
var pos;
var geocoder;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
  }

function getLocation(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);
document.getElementById('distance').value = pos;  
}, function() {
  handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}


function handleNoGeolocation(errorFlag) {
 if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}

function createLine()
{

geocoder = new google.maps.Geocoder();
var address = document.getElementById('distance').value;
var address2 = document.getElementById('address').value;

var temp, temp2;

geocoder.geocode({ 'address': address }, function (results, status) {
temp = results[0].geometry.location;
geocoder.geocode({ 'address': address2 }, function (results, status) {
    temp2 = results[0].geometry.location;

var route = [
  temp,
  temp2
];

var polyline = new google.maps.Polyline({
    path: route,
    strokeColor: "#ff0000",
    strokeOpacity: 0.6,
    strokeWeight: 5
});

var lengthInMeters = google.maps.geometry.spherical.computeLength(polyline.getPath());
var distance = lengthInMeters/1000*0.621371192;

document.getElementById('distance2').value = distance;

polyline.setMap(map);
});
});
}

google.maps.event.addDomListener(window, 'load', initialize);
Dan Mason
  • 2,177
  • 1
  • 16
  • 38
  • The code posted is using the deprecated Google Maps Javascript API v2. – geocodezip Jun 12 '13 at 16:15
  • Offhand, it looks like both globalevent and globalcurrent are both strings as opposed to numbers and that both would contain non-numeric characters. – Terry Jun 12 '13 at 16:24
  • as @geocodezip points out, you're using API v2 code, but also your `someFunc` function is using API v3 code - the two types of syntax aren't compatible – duncan Jun 12 '13 at 16:31
  • @geocodezip I am aware that I am using the two different apis as I have been using various tutorials(I have both linked), I don't understand what needs to be changed between two and three, however, as I probably should have mentioned when I 'POST' the coords and bring them back as php variables it calculates just fine. – Dan Mason Jun 12 '13 at 17:06
  • @terry how do I go about making them numbers then because if i get the longitude and latitude values separately I would have 4 variables to put in the computeDistanceBetween is this simple to do? – Dan Mason Jun 12 '13 at 17:07
  • The two APIs are not compatible unless you know what you are doing (I have seen examples where they were used together put together by very experienced people). I would not suggest mixing them, and support for mixing them is way beyond the scope of StackOverflow. – geocodezip Jun 12 '13 at 17:12
  • @geocodezip I have added my V3 code now still not getting distance, thanks. – Dan Mason Jun 12 '13 at 19:16

1 Answers1

1

There is no computeDistanceBetween method in the Google Maps Javascript API v2, use GLatLng.distanceFrom in that version of the Google Maps Javascript API.

from the documentation

Note: The Google Maps JavaScript API Version 2 was officially deprecated on May 19, 2010. The original deprecation period has been extended from May 19, 2013 until November 19, 2013. As of this date, all applications requesting v2 will be served a special, wrapped version of the v3 API instead. We expect this wrapped version of the API will work for most simple maps, but we strongly encourage you to migrate your code to version 3 of the Maps JavaScript API before this date.

This creates a string:

globalcurrent = position.coords.latitude+","+position.coords.longitude;

This creates a GLatLng with those coordinates:

for v2:

globalcurrent = new GLatLng(position.coords.latitude,position.coords.longitude);

for v3:

globalcurrent = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • Thanks for your response, so how do I go about making them numbers then because if i get the longitude and latitude values separately I would have 4 variables to put in the computeDistanceBetween is this simple to do? – Dan Mason Jun 12 '13 at 17:08
  • Thanks, well I have converted my code to V3 now so have tried to implement your update but to no avail, I'm sure I am close though. See the original post I put it at the bottom. – Dan Mason Jun 12 '13 at 18:51
  • What are the values of coords and coords2? `google.maps.geometry.spherical.computeDistanceBetween(coords,coords2);` (does coords have a value when this code runs?) – geocodezip Jun 12 '13 at 19:27
  • Oh i had vars before theo coords/coords2 in both functions so now the are removed, however coords (from getLocation) is producing: (52.592835, -2.1310212999999294) in an input field, but coords2(codeAddress) is getting (NaN, NaN).. – Dan Mason Jun 12 '13 at 19:42
  • codeAddress can not return the coordinates. Geocoding is asynchronous. Calculate the distance in its callback routine. – geocodezip Jun 12 '13 at 19:49
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31691/discussion-between-purgatory-and-geocodezip) – Dan Mason Jun 12 '13 at 19:55
  • I have created a fiddle its not perfect maybe if you have the time have a play with it? Think it might be easier http://jsfiddle.net/Qn8ab/ – Dan Mason Jun 12 '13 at 20:21
  • I get an error in that fiddle: `Error: codeAddress is not defined Source File: http://fiddle.jshell.net/Qn8ab/show/ Line: 1` – geocodezip Jun 12 '13 at 20:39
  • How about looking at [this example](http://www.geocodezip.com/v3_SO_drawLineFroGeocodedResults.html) from this similar question [how to calculate polyline distance?](http://stackoverflow.com/questions/15796372/how-to-calculate-polyline-distance/15796891#15796891). It computes the distance between two points returned from the asynchronous geocoder. You are trying to do the same from two points, one of which is returned by the asynchronous geocoder, the other from the asynchronous geolocation API. – geocodezip Jun 13 '13 at 04:50
  • That example worked very well and I have got it drawing a line to my current location how do I get it so it zooms out automatically or zooms in automatically to show the line in full. I think using the latrlngbounds but not sure how to implement. – Dan Mason Jun 13 '13 at 12:50
  • To zoom the map to fit the two points, add them both to an empty google.maps.LatLngBounds object (with .extend), then call map.fitBounds on the resulting LatLngBounds object. – geocodezip Jun 13 '13 at 12:59