Mapping GPS Coordinates using Google Maps


Google Map, introduced in 2005, allows the mapping of latitute/longitude coordinates using its Application Program Interface (API). The API allows programmers to access the functionality of a pre-built software module. It includes a set of routines that can be called by the programmer to perform certain functions. The following is a list of all Google Maps class, types, and functions:

GMap2
GMapOptions
GInfoWindow
GInfoWindowTab
GInfoWindowOptions
GMarker
GMarkerOptions
GPolyline
GPolygon
GIcon
GPoint

GSize
GBounds
GLatLng
GLatLngBounds
GControl
GEvent
GEventListener
GXmlHttp
GXml
GXslt
GLog
GDraggableObject
GGeoStatusCode
GGeoAddressAccuracy
GClientGeocoder
GGeocodeCache
GFactualGeocodeCache
GMarkerManager
GMarkerManagerOptions
GDownloadUrl
GBrowserIsCompatible

The programming language that we will be using is called ECMAScript/JavaScript. It is an interpreted programming language that can reside within an HTML file. It is executed by the browser. Most interactive elements on web pages have been implemented through this programming language.

To use Google Map's API, you must request a key from:

Sign Up for Google Maps API

You will need to provide the web address where the HTML file that calls Google Maps will reside. For most of you, this address will be something like: http://myweb.unomaha.edu/~username/

After you agree to the terms of use, Google will supply you with a code that looks something like this:

ABQIAAAAPI4wou--an7ZjU7fKLQYuxS0RxRP7CMh6pLWx2ONXFqzrBhWlhRskzuOhkrZp7zdul_1OmuqEfNCq

This is my code. Your code will be different. Save your code. Your code will only work for your web address.

The Code

The following code maps out a series for latitude/longitude points from a "marker" file called "data.xml". Copy and paste this file into a text or html editor. Replace the Google API key with your own key. Recenter the map and use a different initial scale. Save to your website.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPI4wou--an7ZjU7fKLQYuxS0RxRP7CMh6pLWx2ONXFqzrBhWlhRskzuOhkrZp7zdul_1OmuqEfNCqg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// The following defines the mid-point for the map and the initial scale. The "11" can be replaced
// with numbers between 1-16
map.setCenter(new GLatLng(41.258531,-96.012599), 11);

// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
// <marker lat="37.441" lng="-122.141"/>
// <marker lat="37.322" lng="-121.213"/>
// </markers>
GDownloadUrl("data.xml", function(data) {

var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {

var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point));

}
});
}
}

//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 750px; height: 900px"></div>
</body>

</html>


The data.xml file

The data.xml file has this format:

<markers>
<marker lat="37.441" lng="-122.141"/>
<marker lat="37.322" lng="-121.213"/>
</markers>

To get from degrees, minutes and seconds to decimal degrees, you need to divide the minutes by 60. For example, for 96 0.926' - the longitude for the alumni building - you divide .926 by 60 to get .01543. This makes a decimal longitude of 96.01543.