upload d'un fichier gpx pour visualiser dans google map
Bonjour,
J'aimerais faire un upload des fichiers du type gpx/tcx et ensuite le visualiser dans la goolge map v3. Je suis en localhost pour l'instant.
La fonction loadGPXFileIntoGoogleMap(map, "nom_fichier.gpx"); fonctionne très bien avec le nom de fichier en dur.
Mais lorsque, j'essaie d'uploader le fichier à partir du formulaire (évènement onsubmit appelle la fonction get_file()) qui passe une variable contenant le nom du fichier, un cadre gris s'affiche à la place de la map durant 1 seconde et disparaît. voir mon code ci-dessous.
1) Une idée de pourquoi ca ne fonctionne pas ?
2) Es-ce la bonne manière de faire pour uploader un fichier?
3) Quelqu'un aurait-il une meilleure piste ou un code équivalent de ce que je voudrais faire ?
Un grand merci d'avance!
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="loadgpx.js" type="text/javascript"></script>
<script type="text/javascript">
function get_file() {
var fileInput = document.getElementById("file_upload");
var uploadedFile = fileInput.value;
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
loadGPXFileIntoGoogleMap(map, uploadedFile);
}
function loadGPXFileIntoGoogleMap(map, filename) {
$.ajax({url: filename,
dataType: "xml",
success: function(data) {
var parser = new GPXParser(data, map);
parser.setTrackColour("#ff0000"); // Set the track line colour
parser.setTrackWidth(5); // Set the track line width
parser.setMinTrackPointDelta(0.001); // Set the minimum distance between track points
parser.centerAndZoom(data);
parser.addTrackpointsToMap(); // Add the trackpoints
parser.addWaypointsToMap(); // Add the waypoints
}
});
}
</script>
<style>
body {
font-family: sans-serif
}
#map_canvas {
margin: 5px 0px 5px 0px;
border: 1px solid #D7DFEC;
width:512px;
height:400px;
}
#cardio_map fieldset {
margin: 5px 0px 5px 0px;
border: 1px solid #D7DFEC;
width:512px;
}
</style>
</head>
<body>
<div id="cardio_map">
<form name="formFileUpload" method="post" enctype="multipart/form-data" action="cardio_map.html" onsubmit="return get_file();">
<fieldset>
<legend>upload un fichier pour le visualiser dans la map</legend>
<label>fichier</label>
<input type="file" id="file_upload" name="file_upload" size="20" />
<input type="submit" name="file_submit" value="Visualiser la map" />
</fieldset>
</form>
</div>
<div id="map_canvas">
</div>
</body>
</html> |
