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:
Set the starting points (you can specify both directly addresses and geographic coordinates):
And we call the build function, passing into it the starting and ending points:
In it we create an instance of the route class:
We hang up the handler, which will tell us about errors:
We set the handler to be called upon successful construction of the route (about it just below)
And form the route:
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:
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):
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):
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.
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.
')
Source: https://habr.com/ru/post/80777/
All Articles