upload d'un fichier gpx pour visualiser dans google map

**ggive** · 21/11/2011, 14h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**xillibit** · 22/11/2011, 15h10

Bonjour,

Est-ce que quand tu soumet le formulaire, tu arrive à récupérer le bon nom du fichier ?

**ggive** · 23/11/2011, 14h12

Bonjour,

Merci d'avoir répondu,
En effet lorsque je soumet le formulaire, j'arrive a récupérer le nom du fichier.

J'ai finalement résolu mon problème de cette manière:
1) Le js ne pouvant pas uploader un fichier, je suis passé par par un script côté serveur (php) pour l'upload voir ce tuto http://antoine-herault.developpez.co...ls/php/upload/

2) Ensuite pour le passage du php vers js, j'ai suivi ce post http://www.developpez.net/forums/d10...cript-methode/

En parcourant les forums, je n'ai pas trouvé une meilleure façon de faire mais ça fonctionne très bien.

@+

upload d'un fichier gpx pour visualiser dans google map [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager