Go travel planning based on google maps api

Recently I wrote one application for my own convenience, and at first I did not want to talk about it. Then I thought that it might come in handy to someone else. In essence, this is a service for planning car routes, assembled from ready-made google maps api components. This is a clone of the Google Maps Engine , but without the annoying limitations of the latter. Free, open source, clean frontend without a server, the code is posted on github .

Demo

Idea

Every summer I try to go on some kind of road trip around Europe. I like to travel to small towns, spend the night at campsites and not splurge on hotels. Naturally, the anticipation and planning of each trip begins in a few months - I climb on the map and Wikipedia, mark interesting places, and then plan how to get through all this successfully. I compile a table disaggregated by day, main distances and time calculation. Until recently, I had to use the service myplaces.google.com, however, the old version disappointed with its glitches (pieces of routes disappeared), and the new one was offensively cut. And even in the pro version my voluminous journey in 20+ transfers does not fit. At the same time, there is an excellent google maps api with inaccurate search by name, autocomplete and routing. So I took the available components, added layers, editing, export, and got my service for travel planning.

What do we have

About 20 hours were spent on development, and a prototype was obtained that suits me. There are no 100 types of icons there, like Google, bike routes and polygons. But there is an export of the created map to an ordinary json-object and an unlimited number of layers and objects. The code is a clean frontend (+ a small optional php to save routes on the server), to get started, just copy the files and open index.html locally. Your domain / server and hosting are not needed, you only need access to Google api. Kasheftin.github.io/RoutePlanner/ - here is a working demo on github pages hosting (everything works, except for saving / loading routes to the server).

Technical points

Development using any api implies that you need to write a layer between it and the rest of the code. Was used by knockout , respectively, the majority of my code - communication knockout observable-mechanism with the objects and events of google maps.

The biggest problems were the google.maps.InfoWindow window , which does not work well with dynamic content. There are two options for working with infoWindow - through specifying the dom node as content, and through html-string. In the first case - once we connect the model with html, and then set the desired node as the infoWindow content (see example ). In the second, we set the html string as content, and each time after opening the window we update the binding with the model (see example) The first option mercilessly deals with node, and easily removes it when opening several different windows. The second incorrectly calculates the height of the content, since the data is inserted into the markup after. Both options are buggy when the size of the content changes, because infoWindow cannot resize.

There is another successfully resolved problem with infoWindow. There are so-called google maps on the map POIs (points of interest) - various businesses and other interesting places, when clicked on, a window with available information pops up (description, phone numbers, photos, street view, etc.). At the same time, there are no methods for working with POI in api - i.e. You can either turn them on or off, but you can neither control their opening, nor change the design, or pull out the data. But this is javascript! We insert a simple debug-layer into the prototype (before the card is initialized), and we learn much more than what is written in the documentation:

for (var i in google.maps.InfoWindow.prototype) {
	if (typeof google.maps.InfoWindow.prototype[i] == "function") {
	    (function(i) {
	    	var origMethod = google.maps.InfoWindow.prototype[i];
	    	google.maps.InfoWindow.prototype[i] = function() {
	    		console.log("InfoWindow debug",i,this.arguments);
	    		return origMethod.apply(this.arguments);
	    	}
	    })(i);
	}
}

Using this code, it turns out that the POI uses the usual infoWindow window, and all that is needed is to change the last method (when the internal content has already been generated) - insert everything that is needed there. jsfiddle.net/kasheftin/935Km/ - in this example, I added an “add to map” link to each POI window, by clicking on which I pull out the position and all the data.

Future plans

This development has a standard development path - we add users, comments, ratings, and we get a certain social service where people discuss their routes. However, I strongly do not know how to profit from such a project. To make a paid version and limit opportunities - it will turn out the same google maps engine. Cutting off a piece of the editor for advertising is very inefficient. If they start using the service, the limit of free requests to Google api will immediately end. Therefore, instead of a single system, I decided to create a portable code that anyone could write and run at least locally, at least on their server. Between servers, routes can be passed in json arrays.

As for the further development of the system, this is my first attempt to donate. If there is at least one donation, I promise to spend another 10 hours and:

• completely rewrite the code, insert the normal infoWindow instead of the built-in;
• insert draggable directions and walking routes;
• add a drawing of polylines and polygons;
• add different marker icons;
• allow adding pictures to marker descriptions, pulling photos from poi and street view;
• export to excel with distances and travel times.

Link to the project on github: github.com/Kasheftin/RoutePlanner .