Google Map Exercises

Google Map, introduced in 2005, allows the mapping of points and lines using latitute/longitude coordinates and its Application Program Interface (API). The API makes it possible for programmers to access the functionality of pre-built software modules. It includes a set of routines that can be called by the programmer to perform certain map-based 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 and is executed by the browser. Most interactive elements on web pages have been implemented through this programming language, developed originally for Netscape in the mid-1990s.

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.

You will also need to open a gmail account.

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.

1

Using your own key.

Specifying the center, size, and initial zoom level of the Google Map:

<!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=ABQIAAAAdq9N9USoPhu58g5IUiYkXRS0RxRP7CMh6pLWx2ONXFqzrBhWlhT9G8c2gjMD0h-DiFLtW44HYBfQnA"
type="text/javascript">
</script>

</head>

<body>

<div id="map" style="width: 700px; height: 600px"></div>
<script type="text/javascript">

var map = new GMap2(document.getElementById("map"));
var pt = new GLatLng(30.609682,-96.340264);
map.setCenter(pt,16);

</script>

</body>
</html>

2

Adding map controls and changing the way the center and zoom level are specified:

<!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=ABQIAAAAdq9N9USoPhu58g5IUiYkXRS0RxRP7CMh6pLWx2ONXFqzrBhWlhT9G8c2gjMD0h-DiFLtW44HYBfQnA"
type="text/javascript">
</script>

</head>

<body>

<div id="map" style="width: 700px; height: 600px"></div>
<script type="text/javascript">

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

map.setCenter(new GLatLng(41.258531,-96.012599),16);

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

</script>

</body>
</html>

3

Adding a marker with "listener". Changing to a hybrid map.

<!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>

</head>

<body>

<div id="map" style="width: 750px; height: 900px"></div>
<script type="text/javascript">

var map = new GMap2(document.getElementById("map"));
var pt = new GLatLng(41.258531,-96.012599);
map.setCenter(pt,17);

var marker = new GMarker(pt);

var html = "Durham Science Center<br>University of Nebraska at Omaha<br>Cartography and GIS Laboratory!";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindow(html);
});

map.addOverlay(marker);

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

map.setMapType(G_HYBRID_MAP);

</script>

</body>
</html>

4

Putting Javascript into a function. Making a smaller marker. Adding a loop.

<!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 GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(41.258531,-96.012599), 13);

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// Add 150 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

for (var i = 0; i < 150; i++) {

var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, icon));

}

}

}
</script>

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

5

Encoding a line.

The GPolyline object within a Google map denotes a line as a series of points, making it easy to use but not necessarily compact. Long and complicated lines require a fair amount of memory, and often may take longer to draw. Also, the individual segments within an unencoded polyline are drawn on a Google Map regardless of their resolution at larger zoom levels.

The Google Maps API also allows you to represent paths using encoded polylines that specify a series of points within a GPolyline using a compressed format of ASCII characters. The encoded polyline also allows you to specify groups of zoom levels that should be ignored when drawing line segments; doing so allows you to specify how detailed a polyline should be at a given zoom level. Although more difficult to set up, encoded polylines can make your overlays draw much more efficiently.

For example, a GPolyline of 3 points (2 line segments) is normally represented as:

var polyline = new GPolyline ([

new GLatLng ( 37 . 4419 , - 122 . 1419 ),
new GLatLng ( 37 . 4519 , - 122 . 1519 ),
new GLatLng ( 37 . 4619 , - 122 . 1819 )

], "#FF0000" , 10 );
map . addOverlay ( polyline );

An encoded GPolyline of these same points appears below (for now, don't worry about particulars of the encoding algorithm).

var encodedPolyline = new GPolyline . fromEncoded ({
    color : "#FF0000" ,
    weight : 10 ,
    points : "yzocFzynhVq}@n}@o}@nzD" ,
    levels : "BBB" ,
    zoomFactor : 32 ,
    numLevels : 4
});
map . addOverlay ( encodedPolyline );

There are two things to notice about this code.

  1. First, the series of points is represented as a series of ASCII characters in the encoded polyline, while familiar latitude and longitudes are used in the basic GPolyline . The algorithm for creating these points as a series of encoded ASCII values is documented here . This algorithm is needed if you wish to calculate encoded polylines on the fly via a server process, for example. However, if you just wish to convert existing points given latitudes and longitudes, you can use our interactive utility .
  2. Second, the encoded polyline also allows you to specify the maximum zoom level for each line segment to draw itself on a Google map. If a point is not shown on a higher zoom level, the path is simply drawn from the previous displayable point to the next displayable point. Note that this feature is not available within non-encoded GPolyline s and is especially useful for allowing fast drawing at high zoom levels, where the details of some line segments may not be relevant. For example, an encoded polyline representing a drive from New York City to Chicago should not care about the line segments representing particular streets in Manhattan when the map is zoomed out to the state level.

Adding a line to the map.

<!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"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<link href="../base.css" rel="stylesheet" type="text/css"/>
<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 GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(41.258531,-96.012599), 14);
// map.setMapType(G_SATELLITE_MAP);

// Add an encoded polyline.
var encodedPoints = "yhyzFvm_iQ}Bh@e@if@lAsHuCFXwQrAiG`FwIx@wIE{ShJF?yFlCOM|A";
var encodedLevels = "BBBBBBBBBBBBBB";

var encodedPolyline = new GPolyline.fromEncoded({

color: "#3333cc",
weight: 10,
points: encodedPoints,
levels: encodedLevels,
zoomFactor: 32,
numLevels: 4});
map.addOverlay(encodedPolyline);

}
}

//]]>
</script>

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

6

GeoCoder example

http://myweb.unomaha.edu/~mpeterson/google/13th.htm

(change the size of the map, the location, and the default address)

7

Using XML and Asynchronous HTTP - reading coordinates from a marker file

http://myweb.unomaha.edu/~mpeterson/google/10th.htm

<!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());
map.setCenter(new GLatLng(41.258531,-96.012599), 16);

// 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>

data.xml

<markers>
<marker lat="41.257085" lng="-96.007312"/>
<marker lat="41.257899" lng="-96.005906"/>
<marker lat="41.258899" lng="-96.009538"/>
<marker lat="41.258534" lng="-96.012588"/>
<marker lat="41.259193" lng="-96.015652"/>
</markers>

 

8

Mapping Crime in Omaha

1) Assault 2001 (100 data values from 1687 total assaults)

Excel file | Tab delimited text file

2) Convert addresses to longitude / latitude with: http://www.batchgeocode.com/

3) Make marker xml file using the concatenate function in Excel. Follow this format exactly:

<markers>
<marker lat="41.257085" lng="-96.007312"/>
<marker lat="41.257899" lng="-96.005906"/>
<marker lat="41.258899" lng="-96.009538"/>
<marker lat="41.258534" lng="-96.012588"/>
<marker lat="41.259193" lng="-96.015652"/>
</markers>

4) Map crime data using code from example #7.