Javascript : Intégrer une variable javascript dans un champ de formulaire html

invitea1400dd5 · 02/08/2014, 16h49

Bonjour à tous,
Etant très mauvais en javascript, je n'arrive pas a faire une opération simple :

Intégrer une valeur du fonction javascript dans un champ input d'un formulaire.

En image :
En suivant voici mon code source qui me permet de récupérer la latitude/longitude d'une adresse modifiable en déplaçant le curseur.
Les coordonnées gps s'affichent dans le tableau, mais je voudrais les récupérer également dans un champ input du formulaire (champ input qui seront par la suite invisibles).
Impossible, je n'y arrive pas ...

Si certains d'entres vous ont la solution je suis preneur ...
Merci d'avance,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
      	<title>Latitude et longitude avec Google Maps</title>
    
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp" type="text/javascript"></script>
    
<script type="text/javascript">

 function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var center = new GLatLng(43.6046, 1.4442);
        map.setCenter(center, 12);
        geocoder = new GClientGeocoder();
        var marker = new GMarker(center, {draggable: true});  
        map.addOverlay(marker);
        document.getElementById("lat").innerHTML = center.lat().toFixed(7);
        document.getElementById("lng").innerHTML = center.lng().toFixed(7);

	  GEvent.addListener(marker, "dragend", function() {
       var point = marker.getPoint();
	      map.panTo(point);
       document.getElementById("lat").innerHTML = point.lat().toFixed(7);
       document.getElementById("lng").innerHTML = point.lng().toFixed(7);
	   
        });


	 GEvent.addListener(map, "moveend", function() {
		  map.clearOverlays();
    var center = map.getCenter();
		  var marker = new GMarker(center, {draggable: true});
		  map.addOverlay(marker);
		  document.getElementById("lat").innerHTML = center.lat().toFixed(7);
	   document.getElementById("lng").innerHTML = center.lng().toFixed(7);


	 GEvent.addListener(marker, "dragend", function() {
      var point =marker.getPoint();
	     map.panTo(point);
      document.getElementById("lat").innerHTML = point.lat().toFixed(7);
	     document.getElementById("lng").innerHTML = point.lng().toFixed(7);

        });
 
        });

      }
    }

	   function showAddress(address) {
	   var map = new GMap2(document.getElementById("map"));
       map.addControl(new GSmallMapControl());
       map.addControl(new GMapTypeControl());
       if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
		  document.getElementById("lat").innerHTML = point.lat().toFixed(7);
	   document.getElementById("lng").innerHTML = point.lng().toFixed(7);
		 map.clearOverlays()
			map.setCenter(point, 14);
   var marker = new GMarker(point, {draggable: true});  
		 map.addOverlay(marker);

		GEvent.addListener(marker, "dragend", function() {
      var pt = marker.getPoint();
	     map.panTo(pt);
      document.getElementById("lat").innerHTML = pt.lat().toFixed(7);
	     document.getElementById("lng").innerHTML = pt.lng().toFixed(7);
		 
		 
        });


	 GEvent.addListener(map, "moveend", function() {
		  map.clearOverlays();
    var center = map.getCenter();
		  var marker = new GMarker(center, {draggable: true});
		  map.addOverlay(marker);
		  document.getElementById("lat").innerHTML = center.lat().toFixed(7);
	   document.getElementById("lng").innerHTML = center.lng().toFixed(7);

	 GEvent.addListener(marker, "dragend", function() {
     var pt = marker.getPoint();
	    map.panTo(pt);
    document.getElementById("lat").innerHTML = pt.lat().toFixed(7);
	   document.getElementById("lng").innerHTML = pt.lng().toFixed(7);
	   
        });
 
        });

            }
          }
        );
      }
    }
</script>


</head>
  
<body onload="load()" onunload="GUnload()" >

<p>
   <b>Indiquer le lieu du spot</b>
</p>
<p>
	1. Indiquer une adresse connue (exemple : Toulouse)<br />
    2. Zoomer et se déplacer sur la carte<br /> 
    3. Affiner la position du spot en déplacant le curseur : pour cela cliquer sur le curseur puis le déplacer
</p>

  
<form name="formulaire" action="#" onsubmit="showAddress(this.address.value); return false">
    <p>        
    <input type="submit" value="Chercher autour de" />
    <input type="text" size="60" name="address" value="Toulouse" />
    </p>

 
  <table  bgcolor="#FFFFCC" width="300">
    
    <tr>
      <td><b>Latitude</b></td>
      <td><b>Longitude</b></td>
    </tr>
    
    <tr>
      <td id="lat"></td>
      <td id="lng"></td>
    </tr>
    
  </table>
  
  <br /><br />
  
  Latitude : <input type="text" name="lat" id="lat" size="30" value="" />
  <br />
  Longitude : <input type="text" name="lng" id="lng" size="30" value="" />
  
</form>
  
  <br /><br />

<div align="center" id="map" style="width: 900px; height: 450px"><br/></div>
  

</body>
</html>

invitea1400dd5 · 03/08/2014, 12h15

Re,

Après plusieurs heures de recherches et de tests voici une solution (certainement pas la meilleure mais elle fonctionne) :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
      	<title>Latitude et longitude avec Google Maps</title>
    
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp" type="text/javascript"></script>
    
<script type="text/javascript">

function load() {
	if (GBrowserIsCompatible()) {
    	
		var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var center = new GLatLng(43.6046, 1.4442);
        map.setCenter(center, 12);
        geocoder = new GClientGeocoder();
        var marker = new GMarker(center, {draggable: true});  
        map.addOverlay(marker);
        document.getElementById("lat").innerHTML = center.lat().toFixed(5);
        document.getElementById("lng").innerHTML = center.lng().toFixed(5);
		document.getElementById("latitude").value = center.lat().toFixed(5);
		document.getElementById("longitude").value = center.lng().toFixed(5);

	  	GEvent.addListener(marker, "dragend", function() {
       		var point = marker.getPoint();
	      	map.panTo(point);
       		document.getElementById("lat").innerHTML = point.lat().toFixed(5);
       		document.getElementById("lng").innerHTML = point.lng().toFixed(5);
			document.getElementById("latitude").value = point.lat().toFixed(5);
			document.getElementById("longitude").value = point.lng().toFixed(5);
	   	});

		GEvent.addListener(map, "moveend", function() {
			map.clearOverlays();
    		var center = map.getCenter();
		  	var marker = new GMarker(center, {draggable: true});
		  	map.addOverlay(marker);
		  	document.getElementById("lat").innerHTML = center.lat().toFixed(5);
	   		document.getElementById("lng").innerHTML = center.lng().toFixed(5);
			document.getElementById("latitude").value = center.lat().toFixed(5);
			document.getElementById("longitude").value = center.lng().toFixed(5);

			GEvent.addListener(marker, "dragend", function() {
      			var point =marker.getPoint();
	     		map.panTo(point);
      			document.getElementById("lat").innerHTML = point.lat().toFixed(5);
	     		document.getElementById("lng").innerHTML = point.lng().toFixed(5);
				document.getElementById("latitude").value = point.lat().toFixed(5);
				document.getElementById("longitude").value = point.lng().toFixed(5);
			});
 
        });

	}
}

function showAddress(address) {
	var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    if (geocoder) {
    	geocoder.getLatLng(
        address,
        function(point) {
        	if (!point) {
              	alert(address + " not found");
            } 
			else {
		 		document.getElementById("lat").innerHTML = point.lat().toFixed(5);
	   			document.getElementById("lng").innerHTML = point.lng().toFixed(5);
				document.getElementById("latitude").value = point.lat().toFixed(5);
				document.getElementById("longitude").value = point.lng().toFixed(5);
		 		map.clearOverlays()
				map.setCenter(point, 14);
   				var marker = new GMarker(point, {draggable: true});  
		 		map.addOverlay(marker);

				GEvent.addListener(marker, "dragend", function() {
					var pt = marker.getPoint();
					map.panTo(pt);
					document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
					document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
					document.getElementById("latitude").value = pt.lat().toFixed(5);
					document.getElementById("longitude").value = pt.lng().toFixed(5);
				});

				GEvent.addListener(map, "moveend", function() {
					map.clearOverlays();
					var center = map.getCenter();
					var marker = new GMarker(center, {draggable: true});
					map.addOverlay(marker);
					document.getElementById("lat").innerHTML = center.lat().toFixed(5);
					document.getElementById("lng").innerHTML = center.lng().toFixed(5);
					document.getElementById("latitude").value = center.lat().toFixed(5);
					document.getElementById("longitude").value = center.lng().toFixed(5);

					GEvent.addListener(marker, "dragend", function() {
						var pt = marker.getPoint();
						map.panTo(pt);
						document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
						document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
						document.getElementById("latitude").value = pt.lat().toFixed(5);
						document.getElementById("longitude").value = pt.lng().toFixed(5);
	   				});
 
				});

			}
		});
	}
}
</script>


</head>
  
<body onload="load()" onunload="GUnload()" >

<p>
   <b>Indiquer le lieu du spot</b>
</p>
<p>
	1. Indiquer une adresse connue (exemple : Toulouse)<br />
    2. Zoomer et se déplacer sur la carte<br /> 
    3. Affiner la position du spot en déplacant le curseur : pour cela cliquer sur le curseur puis le déplacer
</p>

  
<form name="formulaire" action="#" onsubmit="showAddress(this.address.value); return false">
    <p>        
    <input type="submit" value="Chercher autour de" />
    <input type="text" size="60" name="address" value="Toulouse" />
    </p>

 
  <table  bgcolor="#FFFFCC" width="300">
    
    <tr>
      <td><b>Latitude</b></td>
      <td><b>Longitude</b></td>
    </tr>
    
    <tr>
      <td id="lat"></td>
      <td id="lng"></td>
    </tr>
    
  </table>
  
  <br /><br />
  
  Latitude : <input type="text" name="latitude" id="latitude" size="30" value=''/>
  <br />
  Longitude : <input type="text" name="longitude" id="longitude" size="30" value=''/>
  
</form>
  
<br /><br />

<div align="center" id="map" style="width: 900px; height: 450px"></div>
  

</body>
</html>

Javascript : Intégrer une variable javascript dans un champ de formulaire html

Javascript : Intégrer une variable javascript dans un champ de formulaire html

Re : Javascript : Intégrer une variable javascript dans un champ de formulaire html

Discussions similaires

Site de rencontre HTML + CSS + Javascript

CSS + JavaScript ; Changer la couleur des champs d'un formulaire

javascript : inserer du html dans un noeud ?

[javascript] rapeller une variable