Google maps api. Building routes on the map

In this article I would like to consider another possibility google maps api - adding routes to maps. If there is enough information on the markers on the Internet, then I could not find any sensible examples on this topic, and even in Russian. Of course, everything that will be written below is in Google , but to begin to understand api, at least some minimal ideas about the subject are necessary.

I propose to consider an example in which the user is given the opportunity to add markers and routes. The example is quite functional, can be used as a basis for its own development.

For routes on the map, we can change the position of key points, delete them and add new ones. Add markers to the nodes, set a description for them (markers). All this is seen in the figure .

Information about added routes and markers will be stored in the mysql database. In the example, I used jquery and one plugin for it. In addition to all this, to display information about the marker, I used the ExtInfoWindow class ( see ), extending the ability of standard Google windows. In this article I don’t want to dwell on how to work with markers and how to implement interaction with the database, but all this functionality is implemented in the example, and those who wish can take a look at the source codes in the archive (we link to the end of the article).
')
So, let's begin. The first thing to do is place a card. Create a div c id = map_canvas on the page and write the following code in javascript:

map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(58.12432, 55.0), 4);
map.setUIToDefault();
map.mode = '';

Here we create a map, set the display center and scale, and add a set of controls to it. The map will have a mode variable in which the current mode will be located (four modes are possible, adding a marker, deleting a marker, adding a route, deleting a route).

Place on the page two div elements with id = add_route and id = del_route. These will be the buttons for adding and deleting a route. Assign two handlers to them:

$('#add_route').click(handle_add_route);
$('#del_route').click(handle_del_route);

In the handle_add_route () function, we check the mode in which we are and call the route building function:

if(map.mode !== '') return;
map.mode = 'add_route';
build_route(0,'');

We pass the route id and its coordinates to the build_route function, since we create a new one, we pass a zero and an empty string. Next, set the line color, transparency and its thickness:

var lineColor = "#CF3A34";
var opacity = .70;
var lineWeight = 2;

Point coordinates are a pair of comma separated numbers. The row of coordinates is coordinates separated by a semicolon. If a string with coordinates was passed, then we form an array of points from it. The conversion into a clear map format is performed using the fromUrlValue () function.

var line = [];
if(points)
{
var p = [];
newroute = false;
p = points.match(/([0-9.,\-]*)/g);
for(var i=0;i<p.length;i++)
if(p[i]!='')
line.push(GLatLng.fromUrlValue(p[i]));
}

Now we create a route and start its drawing:

theroute = new GPolyline(line, lineColor, lineWeight, opacity);
start_drawing(theroute, id, update_route);

The third parameter here is the name of the function that will be called when the route changes (the update_route () function reads the vertices, converts them to a string, and sends them to the server).

function start_drawing(poly, id, onUpdate)
{
map.addOverlay(poly);

if(!id)
{
poly.enableDrawing();
editing_route = poly;
}

poly.enableEditing({onEvent: "mouseover"});
poly.disableEditing({onEvent: "mouseout"});
…

Add a route to the map. If this is a new route (just created, and not just added from the database), then set it to the editable state. We hang two handlers on the route so that you can edit the created routes.

Next we add the lineupdated event, which will be triggered when the route is changed, however, we will call the function to save changes only for routes that have already been completed (from the base).

GEvent.addListener(poly, "lineupdated", function()
{
if(id)
update_route();
});

Now we hang up the endline event - the end of the addition (double click on the last point of the route).

GEvent.addListener(poly, "endline", function()
{
GEvent.bind(poly, "lineupdated", this, onUpdate);
save_route(poly);
});

For this event, we hang up the route change handler and arrange it.

The last step is to add a route click handler to set a marker to one of its vertices:

GEvent.addListener(poly, "click", function(latlng, index)
{
if (typeof index == "number")
{
if(map.mode == 'add_marker')
{
point = poly.getVertex(index);
if(point) save_marker(point);
}
}
});
}

The route is saved as follows:

function save_route(poly)
{
var finish = function(resp)
{
if( check_response(resp) )
{
var id = resp.content;
poly.route_id = id;
routes[id] = {};
routes[id] = {'id': id, 'point':points};
map.mode = '';
}
}

var pointsCount = poly.getVertexCount();
var points = [];
for(i = 0; i < pointsCount; i++)
points[i] = poly.getVertex(i).toUrlValue();
points = points.join(';');

var params = 'action=add_route&points='+points;
$.post(this_url, params, finish, 'json');
}

Here we get the vertices, convert them to a string and send to the server ajax request. If everything went well, we add the route to the route array and turn off the edit mode.

At this point you can finish the article, the main functionality we reviewed. I want to say again that in the attached example, a full-fledged work with markers is implemented. Everything is quite transparent and simple even for beginners.

Download an example here http://www.filehoster.ru/files/ee8710

For those who are going to run the example in their own place - do not forget to change the GOOGLE_MAPS_API key.

Lastly - the archive composition:
index.php - processing ajax requests, receiving data from the database
dump.sql - database structure
/css/style.css - styles for the page and for the ExtInfoWindow class
/ img - images for the ExtInfoWindow class
/inc/core.php - script settings, connection settings to the database and a couple of additional functions in php
/js/extinfo.js - ExtInfoWindow class
/js/jquery-1.3.2.min.js - jquery
/js/jquery.editable.js - jquery text editing plugin (onfly)
/js/script.js - the main functionality.
/tpl/template.html - page template with map