PDA

View Full Version : Resolved Google Maps Latitude and Longitude



lostprophetsie
06-17-2009, 12:13 PM
Hi I'm currently using some code that takes the latitude and longitude from a Google map and outputs it in a table when the user drags a marker on the map. I previously had it working that the outputted latitude and longitude appeared in an input box but I can no longer get this to work again.

Any help is greatly appreciated. I have posted the Javascript code below.


<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(55.54555, -3.39634 );
map.setCenter(center, 15);
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);

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);

});


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);


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);

});

});

}
}

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);
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);
});


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);

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);
});

});

}
}
);
}
}
</script>

This is the table I output the latitude and longitude to


<table class="latlontable" style="float:left">
<tr>
<td width="100"><b>Latitude</b></td>
<td id="lat" name="lat"></td>
</tr>
<tr>
<td width="100"><b>Longitude</b></td>
<td id="lng" name="lng"></td>
</tr>
</table>

lostprophetsie
06-17-2009, 08:11 PM
I'm still searching for a solution for this so if anyone has any ideas please let me know.

Old Pedant
06-18-2009, 12:33 AM
If that code works, then I can't see why you can't just do:


<form name="LatLngForm">
Latitude: <input name="lat">
Longitude: <input name="lng">
</form>

and then change


document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);

to


document.LatLngForm.lat.value = point.lat().toFixed(5);
document.LatLngForm.lng.value = point.lng().toFixed(5);

lostprophetsie
06-18-2009, 12:47 AM
Hi Old Pedant,

I tried implementing your solution, changing my javascript but the values are not appearing in the input boxes?

Thanks
Tommy

lostprophetsie
06-18-2009, 01:30 AM
Hi Old Pedant,

Just had another look and your code was perfect thank you so much for the help.

Tommy.

Old Pedant
06-18-2009, 01:32 AM
Phew. Good.

shaggy
06-24-2009, 09:27 AM
If that code works, then I can't see why you can't just do:


<form name="LatLngForm">
Latitude: <input name="lat">
Longitude: <input name="lng">
</form>

and then change


document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);

to


document.LatLngForm.lat.value = point.lat().toFixed(5);
document.LatLngForm.lng.value = point.lng().toFixed(5);




I am having the same problem (Cannot get the form inputs to accept the lat and lng.

Did you change all three occurrances of
document.getElementById("lat").innerHTML = point.lat().toFixed(5); to
document.LatLngForm.lat.value = point.lat().toFixed(5);

as well as the three occurances of the
document.getElementById("lng").innerHTML = point.lng().toFixed(5); to
document.LatLngForm.lng.value = point.lng().toFixed(5);

When I did that the google map disappeared.

Thanks

shaggy
06-24-2009, 10:20 AM
Never mind... I figured it out. All the references to .innerHTML needed to be replaced by the corresponding version of document.LatLngForm.lat.value or document.LatLngForm.lng.value. Once this was done everything works great. Thanks.