j'ai trouvé une page qui fait presque ce que je veux.
mon problème réside dans l'affichage des coordonnées dans un champ texte de formulaire, au lieu de l'afficher dans la cellule du tableau comme le fait le code.
dans ma page, la donnée est inscrite
<span id="idLatitude"> </span><input type="text" name="Latitude" id="Latitude" value=""><value="<span id="idLatitude"> </span>">
<value='<span id="idLatitude"> </span>'>
<value=<span id="idLatitude"> </span>>je vous met mon code complet au cas où :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Coordonnées GPS - Géolocalisation </title>
<META NAME="Description" CONTENT="Obtenir la coordonnée GPS d’une adresse ">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#map_canvas { height: 500px }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var lat = 45.20390114354702;
var lng = 5.725131097094959;
var monZoom = 5;
var mapDefault = google.maps.MapTypeId.ROADMAP;
// Position boutons de control
var posControl = google.maps.ControlPosition.TOP_RIGHT;
// Position btn Zoom
var posZoom = google.maps.ControlPosition.LEFT;
// Position echelle
var posEchelle = google.maps.ControlPosition.TOP_LEFT;
//
var contentString = '<div id="content">'+
'<h3>Point de depart</h3>'+
'<div>'+
'<p align="center"><b></b><br>cercle a partir de ce point<br>' +
'</div>'+
'</div>';
var geocoder;
var map;
var marker;
var infowindow;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: monZoom,
center: latlng,
mapTypeId: mapDefault,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: posControl
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: posZoom
},
scaleControl: true,
scaleControlOptions: {
position: posEchelle
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true,
title: "Déplacer votre curseur pour obtenir ses coordonées"
});
AfficheGPS(marker);
infowindow = new google.maps.InfoWindow({
content: contentString
});
//infowindow.open(map,marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker, 'drag', function() {
AfficheGPS(marker);
});
google.maps.event.addListener(marker, 'dragend', function() {
AfficheGPS(marker);
//recentrerCarte();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
AfficheGPS(marker);
});
google.maps.event.addListener(map, 'center_changed', function() {
AfficheGPS(marker);
});
}
function dec2dms(l) {
sign =1;
if (l<0) {sign = -1;}
l = Math.abs( Math.round(l * 1000000.))
d = Math.floor(l/ 1000000)*sign;
m = Math.floor(((l/1000000) - Math.floor(l/1000000)) * 60);
s = Math.floor(((((l/1000000) - Math.floor(l/1000000)) * 60)-Math.floor(((l/1000000) - Math.floor(l/1000000)) * 60)) * 100000) *60/100000;
return d+"° "+m+"' "+s+"''";
}
function AfficheGPS(marker){
center = marker.getPosition();
LatitudeCarteClick = center.lat();
LongitudeCarteClick = center.lng();
document.getElementById('idLatitude').innerHTML = LatitudeCarteClick;
document.getElementById('idLongitude').innerHTML = LongitudeCarteClick;
if (LatitudeCarteClick>=0) {
document.getElementById('idLatitudeDeg').innerHTML = "N " + dec2dms(LatitudeCarteClick) + " (+" + dec2dms(LatitudeCarteClick) + ')';
} else {
document.getElementById('idLatitudeDeg').innerHTML = dec2dms(LatitudeCarteClick).replace('-','S ') + ' (' + dec2dms(LatitudeCarteClick) + ')';
}
if (LongitudeCarteClick>=0) {
document.getElementById('idLongitudeDeg').innerHTML = "E " + dec2dms(LongitudeCarteClick) + " (+" + dec2dms(LongitudeCarteClick) + ')';
} else {
document.getElementById('idLongitudeDeg').innerHTML = dec2dms(LongitudeCarteClick).replace('-','W ') + ' (' + dec2dms(LongitudeCarteClick) + ')';
}
var typecarte = map.getMapTypeId() != 'roadmap' ? 'type=' + map.getMapTypeId() +';' : '' ;
document.getElementById('baliseWSB').value = '[map]lat=' + LatitudeCarteClick + ';lng=' + LongitudeCarteClick + ';zoom=' + map.getZoom() + ';' + typecarte + '[/map]';
}
function codeAddress(marker) {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(16);
marker.setPosition(results[0].geometry.location);
center = marker.getPosition();
LatitudeCarteClick = center.lat();
LongitudeCarteClick = center.lng();
document.getElementById("lat").value = LatitudeCarteClick;
document.getElementById("lng").value = LongitudeCarteClick;
AfficheGPS(marker);
contentString = '<div id=\"content\">'+
'<h3>'+address+'</h3>'+
'<div>'+
'<p align=\"center\"><b>Latitude : </b>'+LatitudeCarteClick+'<br>' +
'<b>Longitude : </b>'+LongitudeCarteClick+'</p>'+
'</div>'+
'</div>';
infowindow.setContent(contentString);
infowindow.open(map,marker);
} else {
alert("L'adresse n'a pas pu être géolocalisée pour la raison suivante : " + status);
}
});
}
function codeLatLng() {
var lat = document.getElementById("lat").value;
var lng = document.getElementById("lng").value;
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setCenter(latlng);
map.setZoom(16);
AfficheGPS(marker);
contentString = '<div id=\"content\">'+
'<h3>'+results[0].formatted_address.replace(/,/gi,'<br>')+'</h3>'+
'<div>'+
'<p align=\"center\"><b>Latitude : </b>'+lat+'<br>' +
'<b>Longitude : </b>'+lng+'</p>'+
'</div>'+
'</div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
document.getElementById('address').value = results[0].formatted_address;
}
} else {
alert("Les coordonnée n'ont pas pu être géolocalisées pour la raison suivante : " + status);
}
});
}
function dms2dec() {
var latDeg = parseInt( document.getElementById('latDeg').value );
if (isNaN(latDeg)) {
latDeg = 0;
}
var latMin = parseInt( document.getElementById('latMin').value );
if (isNaN(latMin)) {
latMin = 0;
}
var latSec = parseInt( document.getElementById('latSec').value );
if (isNaN( latSec)) {
latSec = 0;
}
var lngDeg = parseInt( document.getElementById('lngDeg').value );
if (isNaN( lngDeg)) {
lngDeg = 0;
}
var lngMin = parseInt( document.getElementById('lngMin').value );
if (isNaN( lngMin)) {
lngMin = 0;
}
var lngSec = parseInt( document.getElementById('lngSec').value );
if (isNaN(lngSec)) {
lngSec = 0;
}
lat = latDeg + latMin/60 + latSec/3600;
lng = lngDeg + lngMin/60 + lngSec/3600;
if ( document.getElementById('sud').checked ) {
lat *= -1;
}
if ( document.getElementById('ouest').checked ) {
lon *= -1;
}
document.getElementById('lat').value = Math.round(lat*1000000)/1000000;
document.getElementById('lng').value = Math.round(lon*1000000)/1000000;
codeLatLng();
}
</script>
<link rel="StyleSheet" type="text/css" href="http://www.torop.net/style-torop.css">
<style type="text/css">
A:VISITED,A:LINK,A:ACTIVE {
font-family:arial;
text-decoration:none;
color:#FF3300;
}
A:HOVER {
font-family:arial;
text-decoration:underline;
color:#FF3300;
}
</style>
</head>
<body onLoad="initialize()" bgcolor="#3D499D" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="590" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="590" valign="top"></td>
</tr>
<tr>
<td valign="top"><table width="62%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="550" valign="top"><div class="contenu">
<p>
<div align="center"><br/>
<div id="map_canvas" style="width:560px; height:500px"></div>
</div>
<br>
<br>
<div align="left" style="width:560px;text-align:center;">
<table width="560px" border="0px" cellpadding="0px" cellspacing="1px" bgcolor="#000000" >
<tr>
<th colspan="2" style="text-align: center; background-color: #ccc;">Coordonnees GPS du marqueur</th>
</tr>
<tr>
<td width="35%" style="text-align: right; background-color: #ccc;"><b>Latitude <font size=1>(Décimal)</font></b> </td>
<td width="65%" style="text-align: left; background-color: #fff;"> <span id="idLatitude"> </span></td>
</tr>
<tr>
<td style="text-align: right; background-color: #ccc;"><b>Longitude <font size=1>(Décimal)</font></b> </td>
<td style="text-align: left; background-color: #fff;"> <span id="idLongitude"> </span></td>
</tr>
<tr>
<td colspan=2 style="text-align: right; background-color: #ccc;"> </td>
</tr>
<tr>
<td width="35%" style="text-align: right; background-color: #ccc;"><b>Latitude <font size=1>(Sexagésimal)</font></b> </td>
<td width="65%" style="text-align: left; background-color: #fff;"> <span id="idLatitudeDeg"> </span></td>
</tr>
<tr>
<td style="text-align: right; background-color: #ccc;"><b>Longitude <font size=1>(Sexagésimal)</font></b> </td>
<td style="text-align: left; background-color: #fff;"> <span id="idLongitudeDeg"> </span></td>
</tr>
</table>
<table width="560px" border="0px" cellpadding="0px" cellspacing="1px" bgcolor="#000000" >
<tr>
<td style="background-color: #fff;"><input type="text" id="baliseWSB" style="width:556px;text-align:center" onClick="select();"></td>
</tr>
</table>
<form name="form1" method="post" action="">
<label>Longitude :
<input type="text" name="longitude" id="longitude" value="">
</label>
<label>
<input type="submit" name="button" id="button" value="Envoyer">
</label>
</form>
<?php if(isset($_POST['longitude'])){
echo $_POST['longitude'];
}
?>
<br>
</div>
</p>
</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
