Hacking Google Maps and Google Earth (ExtremeTech)

116 Part II — Instant Gratification

Using a single polyline, you can map a distance or length, or show the relationship between two

points. With multiple polylines, you can draw a variety of different shapes, routes, and paths.

The GPolylineclass creates a line or series of lines from a supplied list of GPoints.

Obviously, you need a minimum of two points (the start and end points), and lines are drawn

in the order of the points stored in the array. If you supply three points, a line is drawn from

Point 1 to Point 2, and then from Point 2 to Point 3. It follows that you will get one line less

than the number of points provided. So to draw a box, you need to supply five points: the top

left, top right, bottom right, bottom left, and the top left again to complete the box.

Adding a Bounding Box

Listing 7-7 shows how to use polylines to add a bounding box to your display. The goal is to

show the key areas that are covered by the map of Grantham restaurants. To achieve this, you

need to add five points to an array and then supply this array to create a new GPolyline

object and add this as an overlay to the map.

Listing 7-7:Adding a Bounding Box to the Map

<script type=”text/javascript”>

//<![CDATA[

var map;

function onLoad() {

if (GBrowserIsCompatible()) {

map = new GMap(document.getElementById(“map”));

map.centerAndZoom(new GPoint(-0.64,52.909444), 2);

addmarker(-0.6394,52.9114);

addmarker(-0.64,52.909444);

addmarker(-0.6376,52.9073);

boundingbox(-0.6488,52.9157,-0.6292,52.9027);

}

}

function boundingbox(tlx,tly,brx,bry) {

var box = [];

box.push(new GPoint(tlx,tly));

box.push(new GPoint(brx,tly));

box.push(new GPoint(brx,bry));

box.push(new GPoint(tlx,bry));

box.push(new GPoint(tlx,tly));

map.addOverlay(new GPolyline(box));

}

function addmarker(x,y) {

var point = new GPoint(parseFloat(x),parseFloat(y));