{source}
<h1>GPX-Viewer - ohne Upload</h1>
<p>GPX-Datei: <input type="file" multiple id="fi" onchange="fn='';show()">
<button type="button" onclick="show_parametereingabe()">Parameter ändern</button>
<span id="filename_out"></span></p>
<div id="mapdiv_outer"><div id="mapdiv"><noscript><p>Zum Anzeigen der Karte wird Javascript benötigt.</p></noscript></div></div>
<div id="mapdiv_profiles">
<div id="mapdiv_hp" class="pltx first"></div>
<div id="mapdiv_sp" class="pltx"></div>
<div id="mapdiv_vp" class="pltx"></div>
<div id="mapdiv_hrp" class="pltx"></div>
<div id="mapdiv_cadp" class="pltx"></div>
<div id="mapdiv_hpt" class="pltt first"></div>
<div id="mapdiv_spt" class="pltt"></div>
<div id="mapdiv_vpt" class="pltt"></div>
<div id="mapdiv_hrpt" class="pltt"></div>
<div id="mapdiv_cadpt" class="pltt"></div>
</div>
<div id="parametereingabe" class="overlay_hidden">
<div><div>
<p>
<input type="checkbox" value="Tracks_verbinden">Tracks_verbinden<br>
<input type="checkbox" value="Tracks_dateiuebergreifend_verbinden">Tracks_dateiuebergreifend_verbinden<br>
<input type="checkbox" value="Fullscreenbutton" style="margin-top:.5em">Fullscreenbutton<br>
<input type="checkbox" value="Largemapcontrol">Largemapcontrol<br>
<input type="checkbox" value="Scrollwheelzoom" checked>Scrollwheelzoom<br>
<input type="checkbox" value="Overviewmapcontrol">Overviewmapcontrol<br>
<input type="checkbox" value="Legende" checked style="margin-top:.5em">Legende<br>
<input type="checkbox" value="Legende_fnm">Legende_fnm<br>
<input type="checkbox" value="Legende_rr" checked>Legende_rr<br>
<input type="checkbox" value="Legende_trk" checked>Legende_trk<br>
<input type="checkbox" value="Legende_rte" checked>Legende_rte<br>
<input type="checkbox" value="Legende_wpt" checked>Legende_wpt<br>
<input type="checkbox" value="Readspeed" checked style="margin-top:.5em">Readspeed<br>
<input type="checkbox" value="Usegpxbounds">Usegpxbounds<br>
<input type="checkbox" value="Trackover" checked>Trackover<br>
</p>
<p>
<input type="checkbox" value="Shwpname" checked>Shwpname<br>
<input type="checkbox" value="Shwpcmt" checked>Shwpcmt<br>
<input type="checkbox" value="Shwpdesc">Shwpdesc<br>
<input type="checkbox" value="Shwptime">Shwptime<br>
<input type="checkbox" value="Shwpshadow" checked>Shwpshadow<br>
<input type="checkbox" value="Wpcluster">Wpcluster<br>
<input type="checkbox" value="Shtrcmt" style="margin-top:.5em">Shtrcmt<br>
<input type="checkbox" value="Shtrdesc">Shtrdesc<br>
<input type="checkbox" value="Shtrx" checked>Shtrx<br>
<input type="checkbox" value="Shtrt" checked>Shtrt<br>
<input type="checkbox" value="Shtrtabs">Shtrtabs<br>
<input type="checkbox" value="Shtrh" checked>Shtrh<br>
<input type="checkbox" value="Shtrhr" checked>Shtrhr<br>
<input type="checkbox" value="Shtrcad" checked>Shtrcad<br>
<input type="checkbox" value="Shtrs" checked>Shtrs<br>
<input type="checkbox" value="Shtrv" checked>Shtrv<br>
<input type="checkbox" value="Shtrvmitt">Shtrvmitt<br>
<input type="checkbox" value="Shrtcmt" style="margin-top:.5em">Shrtcmt<br>
<input type="checkbox" value="Shrtdesc">Shrtdesc<br>
</p>
<p>
<input type="checkbox" value="Displaycolor">Displaycolor<br>
<input type="checkbox" value="Laengen3d">Laengen3d<br>
<input type="checkbox" value="Shtrstart" style="margin-top:.5em">Shtrstart<br>
<input type="checkbox" value="Shtrziel">Shtrziel<br>
<input type="checkbox" value="Shrtstart">Shrtstart<br>
<input type="checkbox" value="Shrtziel">Shrtziel<br>
<input type="checkbox" value="Vglatt" style="margin-top:.5em">Vglatt<br>
<input type="checkbox" value="wp" checked style="margin-top:1em">Wegprofil<br>
<input type="checkbox" value="tp">Zeitprofil<br>
</p>
<p>
Plotframecol: <input type="text" name="Plotframecol" value="black"><br>
Plotgridcol: <input type="text" name="Plotgridcol" value="gray"><br>
Plotlabelcol: <input type="text" name="Plotlabelcol" value="black"><br>
Profilfillopac: <input type="text" name="Profilfillopac" value="0"><br>
Hglattlaen: <input type="text" name="Hglattlaen" value="500" style="margin-top:.5em"><br>
Vglattlaen: <input type="text" name="Vglattlaen" value="100"><br>
Maxzoomemove: <input type="text" name="Maxzoomemove" value="30" style="margin-top:.5em"><br>
Tdiff: <input type="text" name="Tdiff" value="0"><br>
Speedfaktor: <input type="text" name="Speedfaktor" value="1"><br>
Pfad zu den Bildern: <input type="text" name="Bildpfad" value=""><br>
<button type="button" style="margin-top:1.5em" onclick="getpar()">Übernehmen</button><br>
<button type="button" style="margin-top:.5em" onclick="savepar()">Speichern & übernehmen</button><br>
<button type="button" style="margin-top:.5em" onclick="clearpar()">Gespeicherte Werte löschen</button>
</p>

</div></div>
</div>
<script>
var parstring="";
function getpar() {
var inps = document.getElementsByTagName("input");
parstring ="";
for(var i=0;i<inps.length;i++) {
if(inps[i].type=="checkbox") {
window[inps[i].value] = inps[i].checked;
parstring += inps[i].value+"="+inps[i].checked+";";
}
else if(inps[i].type=="text") {
window[inps[i].name] = inps[i].value;
parstring += inps[i].name+"="+inps[i].value+";";
}
}
parstring = parstring.substr(0,parstring.length-1);
document.getElementById("parametereingabe").className="overlay_hidden";
show();
}
function show_parametereingabe() {
document.getElementById("parametereingabe").className="overlay";
}
function savepar() {
getpar();
if(localStorage) localStorage.setItem("GPXView",parstring);
}
function clearpar() {
if(localStorage) localStorage.clear();
document.getElementById("parametereingabe").className="overlay_hidden";
}
function loadpar() {
if(localStorage) parstring = localStorage.getItem("GPXView");
if(!parstring || !parstring.length) { getpar(); return; }
var pars = parstring.split(";");
for(var i=0;i<pars.length;i++) {
var par = pars[i].split("=");
if(par.length==2) window[par[0]] = par[1]=="true"?true:par[1]=="false"?false:par[1];
}
var inps = document.getElementsByTagName("input");
for(var i=0;i<inps.length;i++) {
if(inps[i].type=="checkbox") if(typeof(window[inps[i].value])!="undefined") inps[i].checked = window[inps[i].value];
else if(inps[i].type=="text") if(typeof(window[inps[i].name])!="undefined") inps[i].value = window[inps[i].name];
}
}
</script>
<script type="text/javascript" src="http://gpx.webkreation-online.de/gpx2/GM_Utils/GPX2GM.js"></script>
<script type="text/javascript">
var map,wp=true,tp=false,fn="";
JB.Debug_Info("","GPXViewer "+JB.GPX2GM.ver+" vom "+JB.GPX2GM.dat,false);
JB.LoadScript("http://maps.google.com/maps/api/js?sensor=false&amp;callback=JB.gmcb", function() {});
JB.LoadCSS(JB.GPX2GM.Path+"GPX2GM.css");
JB.LoadScript(JB.GPX2GM.Path+"GPX2GM_Defs.js", function() {
loadpar();
JB.Scripte.GPX2GM_Defs = 2;
JB.icons = new JB.Icons(JB.GPX2GM.Path);
JB.Debug_Info("Start","Icons vorbereitet",false);
fn = location.search;
if(fn.indexOf("gpx=")>-1) {
fn = fn.substring(fn.indexOf("gpx=")+4);
if(fn.indexOf(";")>1) fn = fn.substring(0,fn.indexOf(";"));
show();
}
else
fn = "";
});
var show = function() {
var filelist = "Datei: ";
JB.setgc();
if(map) {
map.Clear();
}
map = null;
map = new JB.makeMap("mapdiv");
if(fn.length) {
document.getElementById("fi").value = "";
map.ShowGPX(fn.split(","),"Karte");
filelist += fn;
}
else {
var fin = document.getElementById("fi").files;
if(fin) {
if(fin.length) {
map.ShowGPX(fin,"Karte");
for(var i=0;i<fin.length-1;i++) filelist += fin[i].name + ", ";
filelist += fin[i].name;
}
}
else JB.Debug_Info("Start","Die File API wird von ihrem Browser leider nicht unterstützt!",true);
}
document.getElementById("filename_out").innerHTML = filelist;
}
JB.GPX2GM.callback = function(pars) {
JB.Debug_Info("callback",pars.id+" "+pars.type,false);
var pltx = document.getElementById("mapdiv_profiles").getElementsByClassName("pltx");
var pltt = document.getElementById("mapdiv_profiles").getElementsByClassName("pltt");
var p;
switch(pars.type) {
case "Profile_v":
document.getElementById("mapdiv_profiles").style.display = "inline-block";
for(var i=0;i<pltx.length;i++) {
pltx[i].style.display = "";
JB.addClass("no_x",pltx[i]);
}
for(var i=0;i<pltt.length;i++) {
pltt[i].style.display = "";
JB.addClass("no_x",pltt[i]);
}
for(var i=pltx.length-1;i>=0;i--) {
var ptype = pltx[i].id.substr(pltx[i].id.indexOf("_")+1);
if(pars.profil && pars.profil[ptype] && pars.profil[ptype].pflag) {
JB.removeClass("no_x",pltx[i]);
break;
}
}
for(var i=pltt.length-1;i>=0;i--) {
var ptype = pltt[i].id.substr(pltx[i].id.indexOf("_")+1);
if(pars.profil && pars.profil[ptype] && pars.profil[ptype].pflag) {
JB.removeClass("no_x",pltt[i]);
break;
}
}
break;
case "Profile_n":
document.getElementById("mapdiv_profiles").style.display = "inline-block";
if(!wp) for(var i=0;i<pltx.length;i++) pltx[i].style.display = "none";
if(!tp) for(var i=0;i<pltt.length;i++) pltt[i].style.display = "none";
for(p in pars.profil) if(!pars.profil[p].pflag && pars.profil[p].ele) pars.profil[p].ele.style.display = "none";
break;
}
return true;
} // JB.GPX2GM.callback

var mapdiv = document.getElementById("mapdiv");
var mapdivTop = ( mapdiv.offsetTop || mapdiv.y || 0 ) + 20;
window.onscroll = function(e) {
e = e || event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > mapdivTop) {
mapdiv.style.position = "fixed";
mapdiv.style.width = "calc(49.5% - 28px)";
mapdiv.style.top = 0;
}
else {
mapdiv.style.position = "";
mapdiv.style.width = "100%";
mapdiv.style.top = "";
}
}

var start_to = window.setTimeout(function() {
document.getElementById('beschreibung').className='overlay';
document.body.onmouseclick = window.onmousemove = null;
},5000);
document.body.onmousedown = window.onmousemove = function() {
window.clearTimeout(start_to);
document.body.onmouseclick = window.onmousemove = null;
}
</script>
{/source}