Google maps api. Build routes. Part II

As I found out for myself last time google and myself can build routes between two points. For this there is a class Gdirections. Well, let's see how to realize this opportunity.

In fact, the task is much simpler than in the first example. It is enough to initialize the class, hang a couple of handlers, and display the result. All are considered and built for us.


At the beginning, as usual, we create a map, set the controls:

map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(55.758611, 37.616638), 10);
map.setUIToDefault();

Set the starting points (you can specify both directly addresses and geographic coordinates):

var startpoint = "55.75585, 37.62036";
var endpoint = " ";

And we call the build function, passing into it the starting and ending points:

add_direction(startpoint, endpoint);

In it we create an instance of the route class:

function add_direction(startpoint, endpoint)
{
direct = new Gdirections();
…

We hang up the handler, which will tell us about errors:

GEvent.addListener(direct,"error", function() {
alert("Location(s) not recognised. Code: "+direct.getStatus().code);
});

We set the handler to be called upon successful construction of the route (about it just below)

GEvent.addListener(direct,"load", function(){…}

And form the route:

direct.loadFromWaypoints([startpoint,endpoint],{getPolyline:true,getSteps:true});
}

Everything, the route has been formed, it remains only to display it on the map after the final load (handling of the load event).
We get a broken line from the route and add it to the map:

poly = direct.getPolyline();
map.addOverlay(poly);

We create two markers, put them at the beginning and end of the route, mark the markers by dragging, at the end of dragging, we will call the function change_position (in it we will rebuild the route using the new beginning and end coordinates):

ms = new GMarker(poly.getVertex(0),{'draggable': true, 'icon': G_START_ICON});
me = new GMarker(poly.getVertex(poly.getVertexCount()-1),{'draggable': true, 'icon': G_END_ICON});
GEvent.addListener(ms, "dragend", change_position);
GEvent.addListener(me, "dragend", change_position);
map.addOverlay(ms);
map.addOverlay(me);

Google not only builds a route for us, but also provides us with textual comments in the direction of travel, we’ll get them and derive them (along with the length of the route):

var descr = "";
for(i=0;i<direct.getRoute(0).getNumSteps();i++)
descr = descr + '<br>' + (i+1)+'. ' + direct.getRoute(0).getStep(i).getDescriptionHtml();
descr += ' : ' + direct.getDistance().html;
document.getElementById('route_descr').innerHTML = descr;

That's all, an example can be found at http://gdirections.webservis.ru/
Everything is quite simple, but there is one very unpleasant moment. For our country, Google gives routes only for the Moscow region. The region is clearly visible on the map , green without white spots (approximate boundaries, Tver-Vladimir-Ryazan-Kaluga). It remains to wait for expansion.