264 Part III — Google Map Hacks
var routepoints = xmlsource.documentElement.getElementsByTagName(“point”);
for (var i=0;i < routepoints.length;i++) {
var point = new GPoint(parseFloat(routepoints[i].getAttribute(“lat”)),
parseFloat(routepoints[i].getAttribute(“lng”)));
points.push(point);
}Once there is an array of points, a GPolylineobject can be created and added as an overlay
to the map. For convenience, start and end markers are also added to the map:
route = new GPolyline(points);
map.addOverlay(route);
addmarker(points[0],’Start here’);
addmarker(points[points.length-1],’Finish here’);
recenterandzoom(points);
}
}
request.send(null);
}As when generating a list of routes, the map is also recentered. The difference is that the map
will now be recentered and zoomed according to all of the points in the route, rather than all
the start points of the available routes.Adding Markers
A simple function adds a marker at a given point and includes the supplied info window text.
The function also accepts an icon so that custom icons can be used for the marker.
Conveniently, if the icon is undefined, Google Maps will use the standard icon. The function
doesn’t even need to take into account a missing icon reference.
function addmarker(point,message,icon)
{
var marker = new GMarker(point,icon);
GEvent.addListener(marker,
‘click’,
function() {
marker.openInfoWindowHtml(‘<b>’ + message + ‘</b>’);
}
);
map.addOverlay(marker);
}The application is almost finished.Initializing the Application
With all the other functions in place, the final stage is to initialize all of the different variables,
and particularly the document elements, that are required for the application to operate:
function onLoad() {
if (GBrowserIsCompatible()) {
infopanel = document.getElementById(“infopanel”);