I have put together some code to use Google Maps, to determine distance, bearing and draw a arc circle. The script runs fine in IE and chrome, but Firefox gives a not defined error for the mYname function. Any suggestions/ideas will be appreciated. Ronnie
<script type="text/javascript" src="qra.js"></script>
<style type="text/css">
/*<![CDATA[*/
.wText {
/* border: 1px solid gray; */
padding: 5px;
margin: 2px;
font: normal 10px verdana;
width: 200px;
text-align:left;
}
#columnone {
float:left;
width:60%;
padding-top: 1em;
padding-left: 2em;
}
h1{
margin: auto;
}
#columntwoM {
float:right;
width:17%;
margin: 5em 2em 0em 0em;
background:#FAFAD2;
font-size:.75em;
font-weight: bold;
/* border: none; */
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var myKey="ABQIAAAAUxEBJiX63_pXX2fnMEor4xRFIRMrpc9EWllWM8M16K73MRtkPhS6TwEQxJ63KNjSOtwPT4CHnGP5bg";
var scriptTag = '<' + 'script src=" + myKey + '" type="text/javascript">'+'<'+'/script>';
document.write(scriptTag);
//]]>
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function init(){
if (GBrowserIsCompatible()){
var lat1 = 0;
var long1= 0;
var lat2= 0;
var long2= 0;
var message = "k4";
var map = new GMap2(document.getElementById("map"));
var latlng = [2];
document.form1.call_1.value = "";
document.form1.lat1.value = "";
document.form1.long1.value = "";
document.form1.call_2.value = "";
document.form1.lat2.value = "";
document.form1.long2.value = "";
latlng[0] = new GLatLng(lat1,long1);
latlng[1] = new GLatLng(lat2,long2);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// map.setMapType(G_HYBRID_MAP);
// google maps api requires call setCenter first
map.setCenter( new GLatLng( 0, 0 ), 0 );
// for ( var i = 0; i < latlng.length; i++ ) {
// var marker = new GMarker( latlng[ i ] );
// map.addOverlay( marker );
// }
var latlngbounds = new GLatLngBounds( );
for ( var i = 0; i < latlng.length; i++ ){
latlngbounds.extend( latlng[ i ] );
}
map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );
map.setZoom(2);
}
}
/*]]>*/
</script>
<script type="text/javascript">
//<![CDATA[
var distanceK;
var distanceM;
var unit = "K";
function load(){
if (GBrowserIsCompatible()){
var call_1 = document.form1.call_1.value;
var lat1 = document.form1.lat1.value;
var long1 = document.form1.long1.value;
var call_2 = document.form1.call_2.value;
var lat2 = parseFloat(document.form1.lat2.value);
var long2 = parseFloat(document.form1.long2.value);
var lat1 = 28.48805;
var long1= -82.515564;
var message1;
var message2;
var map = new GMap2(document.getElementById("map"));
var latlng = [2];
latlng[0] = new GLatLng(lat1,long1);
latlng[1] = new GLatLng(lat2,long2);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// google maps api requires call setCenter first
map.setCenter( new GLatLng( 0, 0 ), 0 );
// var greenIcon = new GIcon(G_DEFAULT_ICON);
// greenIcon.image = "redant4.png";
// var markerOptions = { icon:greenIcon };
for ( var i = 0; i < latlng.length; i++ ) {
var marker = new GMarker( latlng[ i ]);
map.addOverlay( marker );
}
var latlngbounds = new GLatLngBounds( );
for ( var i = 0; i < latlng.length; i++ ){
latlngbounds.extend( latlng[ i ] );
}
map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );
map.setZoom(2);
mYname(lat1, long1, lat2, long2, 'K');
var bearing = Math.atan2(Math.sin(long1-long2)*Math.cos(lat2), Math.cos(lat1)*Math.sin(lat2)-Math.sin(lat1)*Math.cos(lat2)*Math.cos(long1-long2)) / -(Math.PI/180);
bearing = bearing < 0 ? 360 + bearing : bearing;
message2 = "<div style=\"height: 7em\">" ;
message2 += "<tr><td><b><u><center>Your Qth</center></u></b></td></tr>";
message2 += "<table cellspacing = 4px>";
message2 += "<tr><td>Call Sign:</td>";
message2 += "<td>"+ call_1 + "<td>";
message2 += "<td><td>";
message2 += "<td><td></tr>";
message2 += "<tr><td>Lat(deg):</td>";
message2 += "<td align=right>"+lat1.toFixed(2)+"<td>";
message2 += "<td>Long (deg):</td>";
message2 += "<td align=right>"+long1.toFixed(2)+"<td></tr>";
message2 += "<tr><td>Distance (K):</td>";
message2 += "<td align=right>"+addCommas(distanceK.toFixed(0))+"<td>";
message2 += "<td>Distance (Mi):</td>";
message2 += "<td align=right>"+addCommas(distanceM.toFixed(0))+"<td></tr>";
message2 += "<tr><td>Grid:</td>";
message2 += "<td>"+qra(lat1,long1)+"<td>";
message2 += "<td></td>";
message2 += "<td><td></tr>";
message2 += "</table>";
message2 += "<div>";
var marker = new GMarker( latlng[ 0 ] );
marker.html = message2;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(message2);}
);
map.addOverlay(marker1);
marker1.openInfoWindowHtml(message2);
message1 = "<div style=\"height: 7em\">" ;
message1 += "<tr><td><b><u><center>Contact</center></u></b></td></tr>";
message1 += "<table cellspacing = 4px>";
message1 += "<tr><td>Call Sign:</td>";
message1 += "<td>"+ call_2 + "<td>";
message1 += "<td><td>";
message1 += "<td><td></tr>";
message1 += "<tr><td>Lat(deg):</td>";
message1 += "<td align=right>"+lat2.toFixed(2)+"<td>";
message1 += "<td>Long (deg):</td>";
message1 += "<td align=right>"+long2.toFixed(2)+"<td></tr>";
message1 += "<tr><td>Distance (K):</td>";
message1 += "<td align=right>"+addCommas(distanceK.toFixed(0))+"<td>";
message1 += "<td>Distance (Mi):</td>";
message1 += "<td align=right>"+addCommas(distanceM.toFixed(0))+"<td></tr>";
message1 += "<tr><td>Bearing :</td>";
message1 += "<td align=right>"+bearing.toFixed(2)+"<td>";
message1 += "<td>"+"Grid:"+"</td>";
message1 += "<td>"+qra(lat2,long2)+"<td></tr>";
message1 += "</table>";
message1 += "<div>";
marker.html = message1;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(marker.html); }
);
map.addOverlay(marker);
marker.openInfoWindowHtml(marker.html);
var polyOptions = {geodesic:true};
var polyline = new GPolyline([
new GLatLng(lat1,long1),
new GLatLng(lat2, long2)
], "#ff0000", 10, 1, polyOptions);
map.addOverlay(polyline); alert("distance");
function mYname(lat1, long1, lat2, long2, unit) {
var radlat1 = Math.PI * lat1/180 ;
var radlat2 = Math.PI * lat2/180 ;
var radlon1 = Math.PI * long1/180 ;
var radlon2 = Math.PI * long2/180;
var theta = long1-long2;
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 = parseFloat(dist * 1.609344 )};
if (unit=="N") { dist = dist * 0.8684 };
distanceK = parseFloat(dist * 1.609344 );
distanceM = dist * 0.8684;
return;
}
// return;
function addCommas(nStr){
nStr += ';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : ';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
}
}
//]]>
</script>
<link rel="stylesheet" type="text/css" href="k4ghg.css" />
</head>
<body onload="init()" onunload="GUnload()">
<div id="wrap">
<div id="header">
<p align="center">
<img src="header_2.png" alt="k4ghg Logo" class ="img" />
<br /><br />
</p>
<div id="mainmenu" class="mainmenu" >
<div class="menu"><a href="" title="home"> Home </a></div>
<div class="menu"><a href="" title="products">Ham Radio Resources</a>
<div class="popup">
<a href=" title="Software" >Hamfest & Events Calendar</a>
</div>
</div>
<div class="menu"><a href="" title="Software">Software</a>
<div class="popup">
<a href=" target="_blank" title="Mom 'N' Pop's Software" >Mom 'N' Pop's Software</a>
<a href=" target="_blank" title="Catalog">Download Catalog</a>
</div>
</div>
<div class="menu"><a href="" title="Tools">Tools</a></div>
<div class="menu"><a href="" title="Weather">Weather</a></div>
<div class="menu"><a href=" title="Links">Links </a></div>
<div class="menu"><a href=" title="products">Contact Us</a></div>
</div><!--mainmenu --> <br /><br />
<h1>Maidenhead Great Arc Circle Map, with QRA Grid, Distance and Bearing.</h1>
</div><!--header -->
<div id="columnone">
<table>
<tr>
<td>
<div id="map" style="width:800px;height:600px;margin-left:2px">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<p>
//Maidenhead script is (C) Nov 2005 by Laurent Haas F6FVY
//You can copy or use this script by naming the author.
//Upgraded to Google Maps API Version 2 in October 2006
//by Jari Perkiömäki OH6BG,
//Kudos to F6FVY for the original code.
</p>
</div> <!--columnone -->
<div id="columntwoM" class="wText">
<!--<div class="wText" id="route"> -->
<form name="form1">
<label>Your Call Sign:</label>
<input name="Call_1" type="text" id="call_1" size="23" maxlength="100" /> <br />
<label>Your Latitude (Deg):</label>
<input name="lat1" type="text" id="lat1" size="23" maxlength="100" /> <br />
<label>Your Longitude (Deg):</label>
<input name="long1" type="text" id="long1" size="23" maxlength="100" /> <br />
<label>Contact Call Sign:</label>
<input name="Call_2" type="text" id="call_2" size="23" maxlength="100" /> <br />
<label>Contact Latitude (Deg):<br /></label>
<input name="lat2" type="text" id="lat2" size="23" maxlength="100" /> <br />
<label>Contact Longitude (Deg):<br /></label>
<input name="long2" type="text" id="long2" size="23" maxlength="100" /> <br /> <br />
<input type="button" value="Send" onClick= "load()" />
<!--<input type="reset" value="Clear" > -->
<input type="button" value="Clear" onClick= "init()" >
</form>
</div> <!--columntwo -->
<div id="footer">
<a><img border=0 src="mapcall.gif" /></a>
</div> <!--Footer -->
</div> <!--Wrapper -->
</body>
</html>
<script type="text/javascript" src="qra.js"></script>
<style type="text/css">
/*<![CDATA[*/
.wText {
/* border: 1px solid gray; */
padding: 5px;
margin: 2px;
font: normal 10px verdana;
width: 200px;
text-align:left;
}
#columnone {
float:left;
width:60%;
padding-top: 1em;
padding-left: 2em;
}
h1{
margin: auto;
}
#columntwoM {
float:right;
width:17%;
margin: 5em 2em 0em 0em;
background:#FAFAD2;
font-size:.75em;
font-weight: bold;
/* border: none; */
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var myKey="ABQIAAAAUxEBJiX63_pXX2fnMEor4xRFIRMrpc9EWllWM8M16K73MRtkPhS6TwEQxJ63KNjSOtwPT4CHnGP5bg";
var scriptTag = '<' + 'script src=" + myKey + '" type="text/javascript">'+'<'+'/script>';
document.write(scriptTag);
//]]>
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function init(){
if (GBrowserIsCompatible()){
var lat1 = 0;
var long1= 0;
var lat2= 0;
var long2= 0;
var message = "k4";
var map = new GMap2(document.getElementById("map"));
var latlng = [2];
document.form1.call_1.value = "";
document.form1.lat1.value = "";
document.form1.long1.value = "";
document.form1.call_2.value = "";
document.form1.lat2.value = "";
document.form1.long2.value = "";
latlng[0] = new GLatLng(lat1,long1);
latlng[1] = new GLatLng(lat2,long2);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// map.setMapType(G_HYBRID_MAP);
// google maps api requires call setCenter first
map.setCenter( new GLatLng( 0, 0 ), 0 );
// for ( var i = 0; i < latlng.length; i++ ) {
// var marker = new GMarker( latlng[ i ] );
// map.addOverlay( marker );
// }
var latlngbounds = new GLatLngBounds( );
for ( var i = 0; i < latlng.length; i++ ){
latlngbounds.extend( latlng[ i ] );
}
map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );
map.setZoom(2);
}
}
/*]]>*/
</script>
<script type="text/javascript">
//<![CDATA[
var distanceK;
var distanceM;
var unit = "K";
function load(){
if (GBrowserIsCompatible()){
var call_1 = document.form1.call_1.value;
var lat1 = document.form1.lat1.value;
var long1 = document.form1.long1.value;
var call_2 = document.form1.call_2.value;
var lat2 = parseFloat(document.form1.lat2.value);
var long2 = parseFloat(document.form1.long2.value);
var lat1 = 28.48805;
var long1= -82.515564;
var message1;
var message2;
var map = new GMap2(document.getElementById("map"));
var latlng = [2];
latlng[0] = new GLatLng(lat1,long1);
latlng[1] = new GLatLng(lat2,long2);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// google maps api requires call setCenter first
map.setCenter( new GLatLng( 0, 0 ), 0 );
// var greenIcon = new GIcon(G_DEFAULT_ICON);
// greenIcon.image = "redant4.png";
// var markerOptions = { icon:greenIcon };
for ( var i = 0; i < latlng.length; i++ ) {
var marker = new GMarker( latlng[ i ]);
map.addOverlay( marker );
}
var latlngbounds = new GLatLngBounds( );
for ( var i = 0; i < latlng.length; i++ ){
latlngbounds.extend( latlng[ i ] );
}
map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );
map.setZoom(2);
mYname(lat1, long1, lat2, long2, 'K');
var bearing = Math.atan2(Math.sin(long1-long2)*Math.cos(lat2), Math.cos(lat1)*Math.sin(lat2)-Math.sin(lat1)*Math.cos(lat2)*Math.cos(long1-long2)) / -(Math.PI/180);
bearing = bearing < 0 ? 360 + bearing : bearing;
message2 = "<div style=\"height: 7em\">" ;
message2 += "<tr><td><b><u><center>Your Qth</center></u></b></td></tr>";
message2 += "<table cellspacing = 4px>";
message2 += "<tr><td>Call Sign:</td>";
message2 += "<td>"+ call_1 + "<td>";
message2 += "<td><td>";
message2 += "<td><td></tr>";
message2 += "<tr><td>Lat(deg):</td>";
message2 += "<td align=right>"+lat1.toFixed(2)+"<td>";
message2 += "<td>Long (deg):</td>";
message2 += "<td align=right>"+long1.toFixed(2)+"<td></tr>";
message2 += "<tr><td>Distance (K):</td>";
message2 += "<td align=right>"+addCommas(distanceK.toFixed(0))+"<td>";
message2 += "<td>Distance (Mi):</td>";
message2 += "<td align=right>"+addCommas(distanceM.toFixed(0))+"<td></tr>";
message2 += "<tr><td>Grid:</td>";
message2 += "<td>"+qra(lat1,long1)+"<td>";
message2 += "<td></td>";
message2 += "<td><td></tr>";
message2 += "</table>";
message2 += "<div>";
var marker = new GMarker( latlng[ 0 ] );
marker.html = message2;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(message2);}
);
map.addOverlay(marker1);
marker1.openInfoWindowHtml(message2);
message1 = "<div style=\"height: 7em\">" ;
message1 += "<tr><td><b><u><center>Contact</center></u></b></td></tr>";
message1 += "<table cellspacing = 4px>";
message1 += "<tr><td>Call Sign:</td>";
message1 += "<td>"+ call_2 + "<td>";
message1 += "<td><td>";
message1 += "<td><td></tr>";
message1 += "<tr><td>Lat(deg):</td>";
message1 += "<td align=right>"+lat2.toFixed(2)+"<td>";
message1 += "<td>Long (deg):</td>";
message1 += "<td align=right>"+long2.toFixed(2)+"<td></tr>";
message1 += "<tr><td>Distance (K):</td>";
message1 += "<td align=right>"+addCommas(distanceK.toFixed(0))+"<td>";
message1 += "<td>Distance (Mi):</td>";
message1 += "<td align=right>"+addCommas(distanceM.toFixed(0))+"<td></tr>";
message1 += "<tr><td>Bearing :</td>";
message1 += "<td align=right>"+bearing.toFixed(2)+"<td>";
message1 += "<td>"+"Grid:"+"</td>";
message1 += "<td>"+qra(lat2,long2)+"<td></tr>";
message1 += "</table>";
message1 += "<div>";
marker.html = message1;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(marker.html); }
);
map.addOverlay(marker);
marker.openInfoWindowHtml(marker.html);
var polyOptions = {geodesic:true};
var polyline = new GPolyline([
new GLatLng(lat1,long1),
new GLatLng(lat2, long2)
], "#ff0000", 10, 1, polyOptions);
map.addOverlay(polyline); alert("distance");
function mYname(lat1, long1, lat2, long2, unit) {
var radlat1 = Math.PI * lat1/180 ;
var radlat2 = Math.PI * lat2/180 ;
var radlon1 = Math.PI * long1/180 ;
var radlon2 = Math.PI * long2/180;
var theta = long1-long2;
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 = parseFloat(dist * 1.609344 )};
if (unit=="N") { dist = dist * 0.8684 };
distanceK = parseFloat(dist * 1.609344 );
distanceM = dist * 0.8684;
return;
}
// return;
function addCommas(nStr){
nStr += ';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : ';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
}
}
//]]>
</script>
<link rel="stylesheet" type="text/css" href="k4ghg.css" />
</head>
<body onload="init()" onunload="GUnload()">
<div id="wrap">
<div id="header">
<p align="center">
<img src="header_2.png" alt="k4ghg Logo" class ="img" />
<br /><br />
</p>
<div id="mainmenu" class="mainmenu" >
<div class="menu"><a href="" title="home"> Home </a></div>
<div class="menu"><a href="" title="products">Ham Radio Resources</a>
<div class="popup">
<a href=" title="Software" >Hamfest & Events Calendar</a>
</div>
</div>
<div class="menu"><a href="" title="Software">Software</a>
<div class="popup">
<a href=" target="_blank" title="Mom 'N' Pop's Software" >Mom 'N' Pop's Software</a>
<a href=" target="_blank" title="Catalog">Download Catalog</a>
</div>
</div>
<div class="menu"><a href="" title="Tools">Tools</a></div>
<div class="menu"><a href="" title="Weather">Weather</a></div>
<div class="menu"><a href=" title="Links">Links </a></div>
<div class="menu"><a href=" title="products">Contact Us</a></div>
</div><!--mainmenu --> <br /><br />
<h1>Maidenhead Great Arc Circle Map, with QRA Grid, Distance and Bearing.</h1>
</div><!--header -->
<div id="columnone">
<table>
<tr>
<td>
<div id="map" style="width:800px;height:600px;margin-left:2px">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<p>
//Maidenhead script is (C) Nov 2005 by Laurent Haas F6FVY
//You can copy or use this script by naming the author.
//Upgraded to Google Maps API Version 2 in October 2006
//by Jari Perkiömäki OH6BG,
//Kudos to F6FVY for the original code.
</p>
</div> <!--columnone -->
<div id="columntwoM" class="wText">
<!--<div class="wText" id="route"> -->
<form name="form1">
<label>Your Call Sign:</label>
<input name="Call_1" type="text" id="call_1" size="23" maxlength="100" /> <br />
<label>Your Latitude (Deg):</label>
<input name="lat1" type="text" id="lat1" size="23" maxlength="100" /> <br />
<label>Your Longitude (Deg):</label>
<input name="long1" type="text" id="long1" size="23" maxlength="100" /> <br />
<label>Contact Call Sign:</label>
<input name="Call_2" type="text" id="call_2" size="23" maxlength="100" /> <br />
<label>Contact Latitude (Deg):<br /></label>
<input name="lat2" type="text" id="lat2" size="23" maxlength="100" /> <br />
<label>Contact Longitude (Deg):<br /></label>
<input name="long2" type="text" id="long2" size="23" maxlength="100" /> <br /> <br />
<input type="button" value="Send" onClick= "load()" />
<!--<input type="reset" value="Clear" > -->
<input type="button" value="Clear" onClick= "init()" >
</form>
</div> <!--columntwo -->
<div id="footer">
<a><img border=0 src="mapcall.gif" /></a>
</div> <!--Footer -->
</div> <!--Wrapper -->
</body>
</html>