Help fixing javascript to calculate distance between two points

[gibsongk55]

Hi,

I don't know javascript. Though I have a tpl file that displays a google map which works.

I added the code to calculate the distance between two points... lat1, lon1, lat2, lon2.

But the map no longer shows up on the site. So something is not working.

Appreciate any help.

Thanks,

Gibs


//<![CDATA[

function initialize() {

// Google Map Custom Marker Maker 2011
// Please include the following credit in your code

// Sample custom marker code created with Google Map Custom Marker Maker
// http://www.powerhut.co.uk/googlemaps/custom_markers.php

var point = new google.maps.LatLng([xfvalue_koordx], [xfvalue_koordy]);

var myMapOptions = {
zoom: 9,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"),myMapOptions);

var image = new google.maps.MarkerImage(
'marker-images/football.png',
new google.maps.Size(52,51),
new google.maps.Point(0,0),
new google.maps.Point(26,51)
);

var shadow = new google.maps.MarkerImage(
'marker-images/fshadow.png',
new google.maps.Size(82,51),
new google.maps.Point(0,0),
new google.maps.Point(26,51)
);

var shape = {
coord: [26,9,28,10,29,11,29,12,30,13,30,14,31,15,32,16,32,17,33,18,33,19,33,20,34,21,35,22,35,23,35,24,35,25,35,26,35,27,34,28,33,29,33,30,33,31,33,32,32,33,32,34,31,35 ,31,36,30,37,29,38,28,39,27,40,26,41,26,42,23,42,22,41,21,40,21,39,20,38,19,37,18,36,18,35,17,34,17,33,16,32,16,31,15,30,15,29,15,28,15,27,15,26,15,25,15,24,15, 23,16,22,16,21,16,20,17,19,17,18,18,17,18,16,18,15,19,14,20,13,21,12,22,11,23,10,25,9,26,9],
type: 'poly'
};

var marker = new google.maps.Marker({
draggable: true,
raiseOnDrag: false,
icon: image,
shadow: shadow,
shape: shape,
map: map,
title: "Place",
position: new google.maps.LatLng(39.759709, -86.164644)
});

var image2 = new google.maps.MarkerImage(
'marker-images/house.png',
new google.maps.Size(32,32),
new google.maps.Point(0,0),
new google.maps.Point(16,32)
);

var shadow2 = new google.maps.MarkerImage(
'marker-images/hshadow.png',
new google.maps.Size(52,32),
new google.maps.Point(0,0),
new google.maps.Point(16,32)
);

var shape2 = {
coord: [16,0,16,1,17,2,18,3,20,4,21,5,22,6,23,7,24,8,25,9,26,10,27,11,28,12,29,13,30,14,31,15,31,16,29,17,29,18,29,19,29,20,29,21,29,22,29,23,29,24,29,25,29,26,29,27,30 ,28,30,29,28,30,7,30,2,29,1,28,1,27,1,26,2,25,2,24,2,23,2,22,2,21,2,20,2,19,2,18,2,17,0,16,0,15,1,14,2,13,3,12,4,11,5,10,6,9,7,8,8,7,9,6,10,5,11,4,12,3,13,2,14, 1,15,0,16,0],
type: 'poly'
};

var marker2 = new google.maps.Marker({
draggable: true,
raiseOnDrag: false,
icon: image2,
shadow: shadow2,
shape: shape2,
map: map,
title: ("[xfvalue_Address]"),
position: new google.maps.LatLng([xfvalue_koordx], [xfvalue_koordy])
});

var lat1 = ([xfvalue_koordx]);
var lon1 = ([xfvalue_koordy]);
var lat2 = (39.759709);
var lon2 = (-86.164644);
var unit = 'M';

var radlat1 = Math.PI * lat1/180
var radlat2 = Math.PI * lat2/180
var radlon1 = Math.PI * lon1/180
var radlon2 = Math.PI * lon2/180
var theta = lon1-lon2
var radtheta = Math.PI * theta/180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); dist = Math.acos(dist) dist = dist * 180/Math.PI dist = dist * 60 * 1.1515 if (unit=="K") { dist = dist * 1.609344 } if (unit=="N") { dist = dist * 0.8684 }

myInfoWindowOptions = {
content: '<div class="info-window-content">'
+ '<h4>{title}</h4><p>[xfvalue_Address]</p>'
+ '<p>[xfvalue_City], [xfvalue_State] [xfvalue_Zip Code]</p>'
+ '<p>Distance to Event: ' + dist.toFixed(2) + 'miles</div>',
maxWidth: 200
}

infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);

google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,marker);
});

google.maps.event.addListener(marker, 'dragstart', function(){
infoWindow.close();
});

infoWindow.open(map,marker2);

function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

//]]>

</script>

[jscheuer1]

There were a number of missing semi-colons in this line:



var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); dist = Math.acos(dist) dist = dist * 180/Math.PI dist = dist * 60 * 1.1515 if (unit=="K") { dist = dist * 1.609344 } if (unit=="N") { dist = dist * 0.8684 }

some of those were perhaps originally on separate lines.

Fixed that and then got an error that there was no closing } at the end of the function body, which turned out to be the initialize function. I figured that probably belonged here:


. . . google.maps.event.addListener(marker, 'dragstart', function(){
infoWindow.close();
});

infoWindow.open(map,marker2);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = " . . .

So I got this far:


<script type="text/javascript">

//<![CDATA[

function initialize() {

// Google Map Custom Marker Maker 2011
// Please include the following credit in your code

// Sample custom marker code created with Google Map Custom Marker Maker
// http://www.powerhut.co.uk/googlemaps/custom_markers.php

var point = new google.maps.LatLng([xfvalue_koordx], [xfvalue_koordy]);

var myMapOptions = {
zoom: 9,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"),myMapOptions);

var image = new google.maps.MarkerImage(
'marker-images/football.png',
new google.maps.Size(52,51),
new google.maps.Point(0,0),
new google.maps.Point(26,51)
);

var shadow = new google.maps.MarkerImage(
'marker-images/fshadow.png',
new google.maps.Size(82,51),
new google.maps.Point(0,0),
new google.maps.Point(26,51)
);

var shape = {
coord: [26,9,28,10,29,11,29,12,30,13,30,14,31,15,32,16,32,17,33,18,33,19,33,20,34,21,35,22,35,23,35,24,35,25,35,26,35,27,34,28,33,29,33,30,33,31,33,32,32,33,32,34,31,35 ,31,36,30,37,29,38,28,39,27,40,26,41,26,42,23,42,22,41,21,40,21,39,20,38,19,37,18,36,18,35,17,34,17,33,16,32,16,31,15,30,15,29,15,28,15,27,15,26,15,25,15,24,15, 23,16,22,16,21,16,20,17,19,17,18,18,17,18,16,18,15,19,14,20,13,21,12,22,11,23,10,25,9,26,9],
type: 'poly'
};

var marker = new google.maps.Marker({
draggable: true,
raiseOnDrag: false,
icon: image,
shadow: shadow,
shape: shape,
map: map,
title: "Place",
position: new google.maps.LatLng(39.759709, -86.164644)
});

var image2 = new google.maps.MarkerImage(
'marker-images/house.png',
new google.maps.Size(32,32),
new google.maps.Point(0,0),
new google.maps.Point(16,32)
);

var shadow2 = new google.maps.MarkerImage(
'marker-images/hshadow.png',
new google.maps.Size(52,32),
new google.maps.Point(0,0),
new google.maps.Point(16,32)
);

var shape2 = {
coord: [16,0,16,1,17,2,18,3,20,4,21,5,22,6,23,7,24,8,25,9,26,10,27,11,28,12,29,13,30,14,31,15,31,16,29,17,29,18,29,19,29,20,29,21,29,22,29,23,29,24,29,25,29,26,29,27,30 ,28,30,29,28,30,7,30,2,29,1,28,1,27,1,26,2,25,2,24,2,23,2,22,2,21,2,20,2,19,2,18,2,17,0,16,0,15,1,14,2,13,3,12,4,11,5,10,6,9,7,8,8,7,9,6,10,5,11,4,12,3,13,2,14, 1,15,0,16,0],
type: 'poly'
};

var marker2 = new google.maps.Marker({
draggable: true,
raiseOnDrag: false,
icon: image2,
shadow: shadow2,
shape: shape2,
map: map,
title: ("[xfvalue_Address]"),
position: new google.maps.LatLng([xfvalue_koordx], [xfvalue_koordy])
});

var lat1 = ([xfvalue_koordx]);
var lon1 = ([xfvalue_koordy]);
var lat2 = (39.759709);
var lon2 = (-86.164644);
var unit = 'M';

var radlat1 = Math.PI * lat1/180
var radlat2 = Math.PI * lat2/180
var radlon1 = Math.PI * lon1/180
var radlon2 = Math.PI * lon2/180
var theta = lon1-lon2
var radtheta = Math.PI * theta/180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); dist = Math.acos(dist); dist = dist * 180/Math.PI; dist = dist * 60 * 1.1515; if (unit=="K") { dist = dist * 1.609344 }; if (unit=="N") { dist = dist * 0.8684 };

myInfoWindowOptions = {
content: '<div class="info-window-content">'
+ '<h4>{title}</h4><p>[xfvalue_Address]</p>'
+ '<p>[xfvalue_City], [xfvalue_State] [xfvalue_Zip Code]</p>'
+ '<p>Distance to Event: ' + dist.toFixed(2) + 'miles</div>',
maxWidth: 200
}

infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);

google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,marker);
});

google.maps.event.addListener(marker, 'dragstart', function(){
infoWindow.close();
});

infoWindow.open(map,marker2);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

//]]>

</script>

But the script then errored (according to Firefox) on:


Error: xfvalue_koordx is not defined

Line: 13

It's not of course, and neither is xfvalue_koordy. Perhaps those were defined elsewhere that you're not showing. If not, they need to be. If I define them as:


xfvalue_koordx = 50;
xfvalue_koordy = -72;

which seem plausible, I then get this error:


Error: a is null
Source File: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/6/8/main.js
Line: 30

at which point, at least for the moment, I'm stumped.

Hope this has helped some.

[gibsongk55]

John,

Thanks so much for the solution. The two variables xfvalue_koordx and xfvalue_koordy are actually defined elsewhere and wrapped in [ ] brackets to populate inside the template from the engine.

Mind boggling this code. Could you tell me what the difference between the
} closing bracket and
}; closing bracket with a semi-colon ?

Thanks again so much,

Gibs

[jscheuer1]

Often nothing. In fact I may have overdone it. Hmm let me see, there are two things going on with } vs }; and the semi-colon in general.

Technically you need a semi-colon at the end of a variable definition unless it's followed by another, in which case a comma can do:


var obj = {};

or:


var obj = {}, obj2 = {};

And should be a comma, unless the var keyword is used again. I'm not sure about a case like where you're redefining the same variable as is the case with that line, but the semi-colon is fine there.

Now, if you have a conditional:


if(whatever){doSomthing();}

That doesn't and technically shouldn't have a semi-colon after it, but it wouldn't hurt. The semi-colon inside is technically required, but unless there are more commands in there, it's OK to skip it, the script parser will understand.

You can also do:


var obj = {}
var obj2 = {}

But technically that should be:


var obj = {};
var obj2 = {};

If you have it the first way and skip the line break, the parser will barf on it.

So that long line should actually be:


var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); dist = Math.acos(dist); dist = dist * 180/Math.PI; dist = dist * 60 * 1.1515; if (unit=="K") { dist = dist * 1.609344; } if (unit=="N") { dist = dist * 0.8684; }

Put in more human readable form:


var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist);
dist = dist * 180/Math.PI;
dist = dist * 60 * 1.1515;
if (unit=="K") {
dist = dist * 1.609344;
}
if (unit=="N") {
dist = dist * 0.8684;
}

At which point all of the semi-colons could be skipped, but to be technically correct, they need to be there. They could be skipped because the script parser often and in all of these particular cases sees the end of the line as a terminus. This is not always the case though, and you or others may want to compact the code later, so it's safest to include the semi-colon wherever there is command terminus.

[gibsongk55]

Thank you again John.

I appreciate the time you took to explain that. Hopefully it will help me understand javascript a little more next time I need to fix something.

All appreciated.


Gibs