| How to show google maps on your website with tracks from your GPS and pictures taken on the way. |
| Friday, 06 July 2007 | |
|
This howto
is made for documenting how to create
GoogleMaps on your own webpage, with tracklogs from your gps and
clikcable markers for foto's, made on the way. This all
with free software
available on the net It can btw allso be done with relatively cheap commercial available software. (I Use JetPhotoStudio) , see here for wat sort ouf output that can generate) To do it with free available stuff on the net Follow this; To convert the track datafrom your gps receiver to gpx format Gpsbabel To geocode the exifdata in you pictures with the data from the trackfile GpicSync To generate the code for displaying the foto's and tracks in a google Map on your own website I use the javascript code provided by Avi.Alkalay found here Our trip "From fjord till fjell" Juni 2007 Kinsarvik Hardanggervidda Norway.
The tutorial
My explanation will be with a trackfile from a magellan explorist 210. The magellan produces .log files in an own specific format. 1. Convert Tracklog to GPX format. So first convert my track.log to track.gpx Start GpsBabelGui.exe and give the tracklog as your input and as output GPX XML. Select that you want to convert a track and press Lets Go.
You have now a track log fil in GPX format.
Start GpicSync and create a kml file from the foto's in your folder. The GPS file (gpx) is the GPX file you just created. Tag the option Google Maps export folder (a folder can be put in but makes the whole thing kind of static.)
Press Synchronise. Put the following into the head section of the index.php of your Theme. <!-- ********************* Script for googlemapsPlugin *************** --> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=YourGoogleMapsApiKeyHere"> </script> <!--Google Maps Plugin logic--> <script type="text/javascript" src="PathOfTheScript/googlemapsPlugin.js"> </script><!--Google Maps Plugin Initialization--> <script type="text/javascript"> //<![CDATA[ MapPluginInit( /* Default maps width */ 300, /* Default maps height */ 1900, /* Use rel instad of title? */ true); //]]> </script> <!-- ********************* END Script for googlemapsPlugin *************** --> Then just insert this in your story <dl title="googlemap;w:60%;h:400;t:k" id="Title of Map"> <dt><a href="http://maps.google.com/?z=11&ll=60.3217,6.85219&om=0&t=k">Center of map</a> </dt> <dt><a href="Path_of_KML_File/doc-webk.kml" title="kml">more markers</a></dt> </dl> For puttting a standalone index.html file on your website, that calls google maps and the javascript from Avi Alkaly. create a html file on your website with the following; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <!-- ********************* Script for googlemapsPlugin *************** --> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=YourGoogleMapsApiKeyHere"> </script> <!--Google Maps Plugin logic--> <script type="text/javascript" src="PathOfTheScript/googlemapsPlugin.js"> </script><!--Google Maps Plugin Initialization--> <script type="text/javascript"> //<![CDATA[ MapPluginInit( /* Default maps width */ 300, /* Default maps height */ 1900, /* Use rel instad of title? */ true); //]]> </script> <!-- ********************* END Script for googlemapsPlugin *************** --> </head> <body> Your text here <center> <dl title="googlemap;w:60%;h:400;t:k" id="Title of Map"> <dt><a href="http://maps.google.com/?z=11&ll=60.3217,6.85219&om=0&t=k">Center of map</a> </dt> <dt><a href="Path_of_KML_File/doc-webk.kml" title="kml">more markers</a></dt> </dl> </center> </body> </html> |
|
| Last Updated ( Saturday, 21 July 2007 ) |
| < Prev | Next > |
|---|