...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum