Google Maps API 3

CHAPTER 8 ■ CREATING POLYLINES AND POLYGONS
var map = new google.maps.Map(document.getElementById('map'), options);
};
})();
There’s nothing new in this code at all. All it does is create a blank Google map that is centered
somewhere on the West Coast of the United States.
Preparing the Coordinates
As you now know, a polyline consists of several coordinates (points on the map). In this case, you’re
going to create a very small polyline with just two points. To get started, you need to find out what these
coordinates are.
Fortunately, I have already found out the correct coordinates (see Table 8-1).
Table 8-1. The Coordinates for San Francisco and Los Angeles
City Latitude Longitude
San Francisco 37.7671 -122.4206
Los Angeles 34.0485 -118.2568
To use these coordinates, you need to convert them to objects of the type google.maps.LatLng and
add them to an array. Create an array called route to store them in:
var route = [
new google.maps.LatLng(37.7671, -122.4206),
new google.maps.LatLng(34.0485, -118.2568)
];
That’s really all the information you need to create a polyline. Now all you have to do is call the
constructor for the Polyline class, add the route arrays to it, and then add the polyline to the map. Let’s
take it step-by-step and start with creating the Polyline object (see Table 8-2).
Table 8-2. Definition of the Polyline Constructor
Constructor
Polyline(options?:PolylineOptions)
Description
Creates a Polyline object
The Polyline object takes one argument, and that is an object of type PolylineOptions.
PolylineOptions has several properties, but only one is required. That’s the property path. The path
property takes an array of google.maps.LatLng objects. That’s exactly what you have in the route array
that you just prepared.
159