Here is a step by step demo of how to use Topofusion to create a interactive Google map with the GPX track for displaying on the web.
This assumes:
1) You know how to use Topofusion.
2) You know how to create websites using HTML and how to send the files to a web server.
3) You recognize JavaScript. You don't need to know JavaScript, but just the ability to know what it is within the HTML. You also will be making changes within the JavaScript.
We'll be doing this in Google Maps V3. For reference, the complete rundown can be found here.
http://code.google.com/apis/maps/documentation/javascript/basics.html but you don't need this just yet.
Let's get started with the Google maps version of "Hello World" from the Google site. Open this link:
http://code.google.com/apis/maps/documentation/javascript/tutorial.html#HelloWorldNow create a new web page in you favorite html editor. I use Notepad.
1) Copy and paste the sample code (from below or the google link) into blank website.
2) On line 11, change where it says
sensor=set_to_true_or_false to
sensor=false. (This isn't necessary if you used the code from below).
3) Save this file as mapv3.html
4) Upload it to you web server.
5) Open in a browser. It should show a map of Sydney Australia, like it does here.
http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.htmlIf it doesn't work, check your code. It should look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>To know what's going on here, read through the Google website where we grabbed this code. But we'll just keep making changes to what we have.
Instead of Sydney, let's make a map of an area we want to see. In the website we're creating, change the latitude and longitude (line 15) to an area with which you're familiar or follow me. I'm changing it to 33.5782 and -112.0389, which will show the Phoenix Mountain Preserve in Arizona.
I also want to have it zoomed in some more, so I will change the zoom level on line 17 from 8 to 14. Smaller numbers zoom out, larger numbers zoom in.
Make these changes, and upload to the web server. Your map should now look similar to the first attachment below which is showing the lat/long I used. This is using Firefox and the image below has the buttons on the right cropped off.
So now let's shrink the map up some, add a heading and change the map to a terrain view.
1) on line 19, change ROADMAP to TERRAIN
2) on or around line 29 that reads
id="map_canvas" style="width:100%; height:100%">, change both percentages to 50%
3) right after the body tag, add a descriptive H1 heading.
My code now looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(33.5782, -112.0389);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<h1>Map of Phoenix Mountain Preserve</h1>
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>
And your map web page should look something the second attachment.
Now lets add a track. This is easily done using a KML file.
Open Topofusion and load a gpx track you want to display. Right click on it in the active maps window and Save As a KML file. Take this KML file and upload it to your web server.
Now, within your HTML add the following two lines on or about line 24. They should be right after the line that reads
myOptions); in my example above:
var kmlfile = new google.maps.KmlLayer('http://(your domain)/(your kml file)');
kmlfile.setMap(map);
You need to replace (your domain) with your domain, and (your kmlfile) with your full kml file name. The file names on some web servers are case sensitive. If you're not sure, make the file names match exactly.
Save the file and upload it. You should see your gpx track mapped in the google map. Mine looks like the third attachment
The code looks like this (after wiping out my domain name, too much non-working stuff there I would rather not share at this point
":
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(33.5782, -112.0389);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var kmlfile = new google.maps.KmlLayer('http://www.xxxxxxxxxxxxxxxxx.org/2010-12-12T100map.kml');
kmlfile.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<h1>Map of Phoenix Mountain Preserve</h1>
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>
That's all for now. Later I will show how to add a topo option to the map selector. I did my original work with Google maps V2. They have made some significant changes in v3, so I have to do some more research.
