Introduction
This is a tool for people that have to work with "Decimal Degrees", "Degrees, Decimal Minutes" and "Degrees, Minutes, Seconds" formats. A co-ordinate can be entered in any format and the other formats are updated to reflect the same location, so this in itself is a conversion tool. Also the same co-ordinates are visualized on a Google map where the location marker can also be changed which is reflected back in the co-ordinates displayed on the left.
Background
I was playing around with the Google API and wanted to see if I could implement it in a VBScript HTA, I came up with this useful tool. I have since found it very useful when obtaining latitude and longitude co-ordinates that I want to visit but are in a format that my GPS does not accept. Further more, the program allows you to visualize the location and make fine adjustments if necessary.
Using the Code
The code simply needs to be copied and pasted into a text file and named DMS.HTA. This is an HTML application. It would also work if saved into an HTML file and accessed from a web server but the VBScript is client side only and as a result it would only work if viewed with Internet Explorer.
Points of Interest
As far as I am aware, this is the first implementation of the GoogleMaps API in an HTA. I am particularly happy with the way the cells on the left work like Excel even though it is just an HTA, i.e., you enter a number and click out of the cell or press enter and the whole page updates.
The key to how the cell input works is this piece of code.
<input type="text" name="TextBox6" value="0" size="9" önFocusOut="VerifyEntryCA">
Basically once you click out of the cell, the cell’s contents are read by the particular sub designed to compute the changes based on that cells contents. In this case, it is the VerifyEntryCA sub.
To also get the enter key to perform the same function as clicking out of the cell, the EnterPressed sub is called because it is in the HTML’s body as an onkeypress event.
<body bgcolor=c0c0c0 önkeypress="EnterPressed">
The EnterPressed sub simply changes the focus to a button on the page, causing an onFocusOut event to launch the VerifyEntryCA sub.
Sub EnterPressed()
If window.event.Keycode = 13 Then
run_button1.focus
End If
end sub
One more thing, you can't have a button that does not have a corresponding sub so the enter button launches a sub that does nothing.
Sub MagicInputButton
End Sub
Remember the act of clicking out of a cell is what triggers the script to read the input so the button does nothing except take the focus when enter is pressed.
Another interesting part of this code is the Google Maps API and that it is JavaScript running in an HTA alongside VBScript.
The API key is for my website - don't worry about that, if you want to run this code locally, you don't need your own API key. If you want to put this code on your own web server, get your own free key from Google.
key=ABQIAAAA3rPk1vKqNxviLFnWIJ-
QrBRZNe1Ex5jIwPa0BHPlbhvVFMJPARQzmUQx7bXa56VyBJbp6ZPdTiarSQ
To tell you the truth, JavaScript is not my forte and after a massive struggle with searching for code samples high and low, I finally got this code to do what I wanted.
Features of this implementation of the API include only three buttons at the top Map, Satellite and Hybrid.
Along the side just a simple + and - for zoom and a start point exactly on Uluru.
These features are really easy to change so I won't even go there.
The bit I had problems with was getting a pointer that I could pickup drag and drop, plenty of code samples there. But I also wanted it to return it’s new co-ordinates to the main script, plenty of examples out there for that too, but I had to combine them. Oh and obviously, it has to get position updates from the main script for when new co-ordinates are entered into the cells. A lot of work for a little block of code.
<script src="http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAA3rPk1vKqNxviLFnWIJ-QrBRZNe1Ex5jIwPa0BHPlbhvVFMJPARQzmUQx7bXa56VyBJbp6ZPdTiarSQ"
type="text/javascript"></script>
<script type="text/javascript">
function Gmapsload()
{
var map = new GMap(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GSmallZoomControl());
map.centerAndZoom(new GPoint(LON, LAT), ZOOM);
var posnString = LAT ;
document.getElementById("posnLat").innerHTML = posnString;
var posnString = LON ;
document.getElementById("posnLon").innerHTML = posnString;
var point = new GLatLng(LAT, LON);
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
var position = marker.getPoint();
map.panTo(new GLatLng(position.lat(), position.lng()));
var posnString = position.lat();
document.getElementById("posnLAT").innerHTML = posnString;
var posnString = position.lng();
document.getElementById("posnLON").innerHTML = posnString;
});
GEvent.addListener(map, "moveend", function() {
var position = marker.getPoint();
var posnString = position.lat();
document.getElementById("posnLAT").innerHTML = posnString;
var posnString = position.lng();
document.getElementById("posnLON").innerHTML = posnString;
LatHTML()
LonHTML()
});
map.addOverlay(marker);
GEvent.addListener(map, "zoomend", function(zoom,Newzoom) {
document.getElementById("posnZOOM").innerHTML=Newzoom;
});
}
</script>
There have been significant updates to the Google Maps API since I wrote this code and there are also many more code samples available, so check it out for yourself.
http://code.google.com/apis/maps/
History
- 13th April, 2010: Initial post
