Google Route Map Creator 2.0 alpha Documentation
What is this about?
The Google Route Map Creator serves two purposes.
Originally, it was developed to allow people integrating Google Maps, primarily maps showing travel routes,
into their websites without forcing them to deal with the Google Maps API and program Javascript.
Basically, it allows to create a map with routes and markers graphically and generates the necessary
Javascript code
to include the created map on any website.
At some point I found it would be very convenient to support the export of the created routes to the GPX format
in order to be able loading them onto my GPS device which, currently, does not support routing on its own.
The 2.0 version added this feature.
This proved to be very useful when traveling to areas for which I did not possess good maps myself and where
local road signs were very scarce or barely readable to people not capable of the local language
(in Greece, for instance).
I also used the Google Route Map Creator, for instance, to plan a hiking trip up to Mt. Dikti on Crete based upon
Google's satellite images. It worked suprisingly well... :-)
Tutorial
In case the program is not self-explanatory, here is a short introduction to the main features of
the Google Route Map Creator.
Basic Concepts
The Route Map Creator knows three basic concepts:
- Markers
- mark a position on a map with some icon. When the marker icon is clicked,
a blow up window appears that can show arbitrary text or html.
- Routes
- denote a driving route on the map, i.e. a street connection along
an arbitrary number of waypoints.
Such waypoints may be markers, or may not be directly visible on the map.
Routes are built using Google's driving directions API.
- Tracks
- are similar to routes. The main difference is that the single track points are
connected by a straight line, rather than following the street network. This is useful in areas where
Google does not support routing, or to denote hiking trails etc.
The picture to the right shows the northern part of Yellowstone National Park. The turquoise line marks a
driving route from Gardiner, MT, to a trailhead parking just behind the park boundary (denoted by a very tine red
marker). The red line marks a track from the trailhead to the Boiling River swimming place. The yellow marker's
blow up window is currently displayed. Btw, one of the neat features of the Route Map Creator is that it also
tells you that the route from Gardiner takes 4 minutes (which, however, is certainly understimated - Google's fault)
and the trail to the boiling river is 852 metres long...
Editing Maps
Adding waypoints
Waypoints are usually added using the context menu on the map (at the location, where the context menu was invoked):
- "Add default waypoint" will directly add a waypoint.
- "Add custom waypoint" shows a dialog to customize the waypoint before it is added.
- "Geocode waypoint" (also accessible via the main menu) displays a dialog that allows
adding a waypoint at a geocoded location.
Type the name of a location into the dialog and press "Return" or click "Geocode".
Select one of the alternatives and press
"Add waypoint" to add the waypoint or alter your input and press "Geocode" again to repeat your search.
- "Add default route waypoint", "Add custom route waypoint" and "Geocode route waypoint" work like
described above but will insert a waypoint into a route instead of
just marking an isolated location on the map. You will be able to select the route to insert the
new waypoint into as well as the stop after which the new stop should be inserted.
Additionally, waypoints (and route waypoints) may be added by providing geographic coordinates of a well
known landmark for instance. This functionality is available through the main menu:
"Waypoint" -> "Input waypoint via coordinates" respectively "Route" -> "Input route waypoint via coordinates".
Adding routes
A route will automatically created once you add the first route waypoint (see above). If you
need a map with multiple routes, use the "Route" menu on the main menu bar and click "Add new route".
Adding tracks
Click the "Draw new track" command from the "Track" menu on the main menu bar. The mouse cursor will
change. Click on the map repeatedly to draw your track by adding one track point after another. Finish drawing
with a double click. You can edit your track by hovering over it. The track points will show up as will a ghost
track point between each two track points. Track points are draggable. If you drag a ghost track point, a new
track point will be inserted into your track at the corresponding location. Unfortunately, track points can not
be deleted once they are added. However, you may move them on top of each other.
Geodesic tracks
Tracks can be rendered straight or geodesic. Straight tracks are rendered as a straight line on the map
between the various track points.
Geodesic tracks are rendered according to a straight line on the surface of the globe between the various
track points. The difference becomes visible for longer tracks north or south of the equator. The feature
can be used to display flight routes, for instance, see this example.
The image to the right shows two tracks between Frankfurt, Germany and San Francisco, CA, USA. The red one
is rendered geodesic, the green one straight. The difference is, well, obvious.
To draw a geodesic track, choose "Draw new geodesic track" instead of "Draw new track". You can also toggle a track
between geodesic and normal using the edit track dialog. Please note that there is a bug in the Google-API
related to editing of geodesic tracks. To edit a track, you need to hoover your mouse over the track and drag the
appearing track points or ghost track points. However, with geodesic tracks, the ghost track points appear along the
line of the straight track. If you try to drag such a ghost point, the mouse will leave the track and editing will
be disabled. To circumvent this issue, please change a geodesic track to normal, edit the track, finish editing
and only then toggle the geodesic property again. The image to the left illustrates the issue of ghost points
far of the actual track line.
Editing Routes, Tracks and Waypoints
Use the little icons in the tree on the right side to edit or delete existing routes, tracks and waypoints or to
change the order of waypoints within a route.
The edit dialog of tracks and routes allows to change the name of the track or route and to set the color,
weight and opacity of the line denoting the route or track on the map.
The edit dialog of waypoints allows changing the name of the waypoint, choosing a marker icon and changing
the text (html) that is displayed in the markers blow up window. Route waypoints may additionally be made
invisible by unticking the "Display marker on map" checkbox. This allows to influence the course of a driving
route without having visible markers on the map.
Saving and Loading Data
Use the data menu on the main menu bar to store and load your map to and from XML. Beginning from version 2.0
the Route Map Creator uses the GPX format to store the data of a map. This allows to import such data into
other programs or GPS devices. To load GPX data, chose "Load from GPX", paste the XML/GPX data
into the text area and
click "Load". The loaded data will be added to the existing data. If you want to start from scratch, perform
a reload of the Google Route Map Creator in your browser (attention, this will delete all data in the memory).
The "Load from legacy XML" command allows loading maps that have been saved with version of the
Route Map Creator prior to Version 2.0.
Use the "Export to GPX" command to save your map data. When saving, you can optionally compress your tracks to
a certain number of track points. This is useful if you want to load your tracks into older GPS devices.
Garmin GPSMap 60CSX, for instance, does not support more than 500 track points per track.
Furthermore, you have different options how to save your routes:
- Save as provided
- stores the routes with the waypoints you provided to define the route.
Use this option if you want to save your data to continue editing your map later.
- Save according to Google directions
- stores the routes with the waypoints that Google uses
when computing the directions for the route (i.e., those waypoints where you have to turn). This is a
good option if you want to upload the route to a GPS device.
- Save as tracks
- stores the routes as tracks, i.e. as a sequence of many points accurately
defining the precise path of your driving route. Use this option if you plan to upload your route to a
GPS device as a track. Note that the optional track compression applies to tracks resulting from routes, too.
Generating HTML/Javascript Code of a Map
Use the "Generate Webpage HTML" command to generate the HTML/Javascript code that is necessary to embedd
the created map on a personal website. You will have to provide your Google API Key or adapt the code later
if you don't. If you tick the "Output combo box with links to markers" checkbox, the generated
page will contain a combo box with direct links to the markers (see examples below).
You may also configure the type of the map that is active when your map is loaded (normal map, satellite, hybrid
or physical). Finally, you can choose whether a fully functional HTML page should be generated or just the
script code for the map. If you are unfamiliar with the Google Maps API I strongly recommend to generate
a fully functional map.
Push the generate button to create the necessary HTML/Javascript code. Note that this may take up to several
minutes if you compress large tracks or long routes. Copy the generated code to an HTML file.
If you chose to generate a fully functional HTML page, simply copy the generated HTML/javascript, paste it
in some text editor and store the resulting web site. If you chose to generate the script code only, copy the
generated script code in the head-section of your HTML page and place a div-element with id "map"
somewhere on your page. The map will be loaded into this div-element. Please don't forget to set the size of
the div! For more information please read on here.
Quick basic example
- Open the Route Map Creator.
- Choose "Data" -> "Import from GPX", paste the XML code shown below and click "Load"
- Play with the map if you want...
- Choose "Data" -> "Generate Webpage HTML", leave the settings unchanged and click "Generate".
- Copy the generated code to the clip board, open a text editor, paste the code from the clip board
and save the file as an html page, e.g. "map.html".
- Open the file with your web browser, it should look like this one.
If you like the tool, have problems, questios or any kind of feedback please drop me a mail
at "Ulrich at Kuester.mobi". I also appreciate if you send me links to pages that you created with the
Route Map Creator. :-)
FAQ
Google-Maps API Key
Google requires you to register for Google Maps and
obtain an API Key.
Note that each key is limited to a certain server and directory on that server. E.g., a key
registered for http://ulrichkuester.de/tools will only work for maps on pages within
the tools directory on the server ulrichkuester.de.
You can locally test your files without providing an API key, but as soon as you upload them to a server
you need to provide your API key.
If you need Google maps in different directories or on different servers, you can register multiple keys
with your Google account.
How to include a map in an existing web page
When you generate the html code of the map (Data -> Generate Webpage HTML), choose "Script code only" instead of "Complete HTML page".
Open your webpage with a text editor or the HTML editor of your choice.
Copy the generated script code into the head-section of your webpage (i.e. somewhere between "<head>" and
"</head>".
Now place a div element at the location of your web page where you want the map to appear.
This div element will serve as the container that holds the map.
The div element can be formatted by setting its height, width, border etc. In order for the map to be loaded into the
div, all you need to do is give it an id "map".
How to include multiple maps in a single existing web page
Create several maps and generate the script code for each of these maps.
In order to include several maps in a single web page you will have to make some adaptations to the generated code.
The code up to and including the line "addLoadEvent(initializeData);" needs
to be copied into the head section only once!
Several div elements with different ids like "map1", "map2",
... need to be created similar to the instructions for a single map above.
The initializeData function (everything starting from and including the line
"function initializeData() {" till the line with the closing curly bracket "}"
needs to be copied several times, once for every map.
The name of the functions has to be changed such that they are unique
(initializeData1() {, initializeData2() {, ...).
Similarly, the id of the map in the function has to be adapted
(e.g., "var map = new GMap2(document.getElementById("map1"));").
Finally, the line "addLoadEvent(initializeData);" needs to be adapted and
duplicated, e.g.:
addLoadEvent(initializeData1);
addLoadEvent(initializeData2);
addLoadEvent(initializeData3);
Adapt initial zoom level
The generated maps are automatically zoomed such that, independently from the size of the browser window,
all waypoints and routes are visible. It's cool, but it doesn't always work properly. If you want to
adjust the initial zoom level, search at the end of the generate code for the following line:
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
If you want the map to be zoomed out by one level when loaded, change the line to:
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds) -1);
Zooming in or zooming out more works accordingly (+1, -2, ...)
The marker blow up windows are sized incorrectly
That usually happens, if you embedd images in the blow up windows.
A workaround is to set the width and height of the embedded image in the img-tag explicitly, e.g.:
<a href="02/bericht.html">26.02.: Über Marib in die Rub al Khali<br>
<img src="fotoalben/Album2.jpg" width="250" height="166" />
</a>
The key point is the explicit setting of the width and height attributes of the img tag.
Versions, Bug Fixes
- 21.11.2009: First fully functional 2.0 version.
- 17.02.2010: Bugfix: Distances were not updated properly in routes with only two stops.
Bugfix: Compression of tracks did not work properly.
Changed internal coding such that adding several maps to a single web page becomes easier.
- 10.02.2010: New Feature: Geodesic tracks/polylines.
Links
About Google Maps (API)
The official Google Maps Tutorial and API documentation is available
here.
Useful Links
Examples
A collection of pages (most in German) that used the Google-Route-Map-Creator. If you know another one, I appreciate if
you drop me a mail.