I finally got my hands on a GPS Track logger device (Holux M-241, a very nice gadget by the way) and thought to myself, it would be nice, if I could take those KML track log files and just upload them somewhere to make them available to be viewed on a web page. This is what came out as a first lazy sample:
It basically looks for KML files in a folder, which you define and puts them in a select box. Here you can select the file you want to have drawn on the Map. Very basic functionality, but its a start at least. Probably I will continue to add new stuff to it (like a description of the track logs or comments etc.)
The main part of this sample is Googles GGeoXml class, which allows to pass a publicly available KML to the Google Maps API:
map = new GMap2(MapElement);
geoXml = new GGeoXml(KMLurl);
In order to preserve the usability on mobile devices (e.g. Android phones), I added some JS to load a different style for devices with screens that are less than 320px wide:
A Webserver capable of running PHP and MySQL (for development I recommend XAMPP)
Lets call the project MapSomeStuff.
In a first step, we take the address of our marker- entry and pass it over to the Google Maps API to translate it to latitudinal and longitudinal (lat and lng) coordinates (wich is essential in the next step).
Now the data, wich is later displayed on the map as a marker is being read from the database and formated as XML- output (look out for the lat and lng attributes):
In my example we still have the address in the XML dataset. This is only additional information for the user. In fact, Google Maps only needs the lat and lng attributes to place the marker on the map.
The XML gets sent to the Google Maps API, wich then places the markers on the correct coordinates.
To avoid ruining the site’s look, I link the code. Just downlad the file, rename accordingly and put them all in the same directory: mapsomestuffphp – containing the PHP class and HTML parts. Rename to mapsomestuff.php mapsomestuffjs – containing the API calls. Rename to mapsomestuff.js mapsomestuffsql – containing the database structure and an initial dataset