Google maps api. Building routes. Part II
As I found out for myself last time google and he can build routes between two points. There is a Gdirections class for this. 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. Everyone considers and builds for us.
In the beginning, as usual, create a map, set the controls:
We set the starting points (you can specify both directly addresses and geographical coordinates):
And we call the construction function, passing in it the start and end points:
In it, we create an instance of the route class:
We hang up a handler that will notify us of errors:
We set the handler to be called upon successful construction of the route (about it a little later)
And we form a route:
That's it, the route is formed, it remains only to display it on the map after the final load (processing the load event).
We get a broken line from the route and add to the map:
We create two markers, put them at the beginning and end of the route, make the markers draggable, at the end of the drag, we call the change_position function (in it we will rebuild the route according to the new coordinates of the beginning and end):
Google not only builds a route for us, but also provides us with textual comments in the direction of movement, we will receive and output them (and at the same time the length of the route):
That's all, an example can be viewed at http://gdirections.webservis.ru/
Everything is quite simple, but there is one very unpleasant moment. For our country, Google gives routes only to the Moscow region. The region is clearly visible on the map , the green color without white spots (approximate borders, Tver-Vladimir-Ryazan-Kaluga). It remains to wait for the expansion.
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. Everyone considers and builds for us.
In the beginning, as usual, create a map, set the controls:
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(55.758611, 37.616638), 10);
map.setUIToDefault();We set the starting points (you can specify both directly addresses and geographical coordinates):
var startpoint = "55.75585, 37.62036";
var endpoint = "Россия Реутов";And we call the construction function, passing in it the start and end 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 a handler that will notify us of 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 a little later)
GEvent.addListener(direct,"load", function(){…}And we form a route:
direct.loadFromWaypoints([startpoint,endpoint],{getPolyline:true,getSteps:true});
}That's it, the route is formed, it remains only to display it on the map after the final load (processing the load event).
We get a broken line from the route and add to the map:
poly = direct.getPolyline();
map.addOverlay(poly);We create two markers, put them at the beginning and end of the route, make the markers draggable, at the end of the drag, we call the change_position function (in it we will rebuild the route according to the new coordinates of the beginning and end):
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 movement, we will receive and output them (and at the same time the length of the route):
var descr = "";
for(i=0;i
descr = descr + '
' + (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 viewed at http://gdirections.webservis.ru/
Everything is quite simple, but there is one very unpleasant moment. For our country, Google gives routes only to the Moscow region. The region is clearly visible on the map , the green color without white spots (approximate borders, Tver-Vladimir-Ryazan-Kaluga). It remains to wait for the expansion.