pass data with javascript, php, google maps

[teknojunkey]

Hi

 

I have glued a script together that will get the latitude and longetude values from google

 

there are two options to do this 1st from a php form and 2nd from javascript.

 

I would like to be able to enter the postcode in the field and have the map display the location, pass the returned coordinated to javascript

 

here is a demo: http://dev.crocodile-communication.com/superglass/test-live/admin/getlat.php

 

here is the script:

<p>This tool will retrieve a latitude and longitude value.</p>

<form action="#" method="post">
Enter Postcode:<input type="text" name="get_postcode"><input type="Submit">
</form>

<?
//vars
$get_postcode=$_POST['get_postcode'];
$myKey = 'ABQIAAAAAo5DJKafF5Wqy7iJIHvekxQDw6SbLitDXGRuCV60uhGEd-71JRQNyJ8twHQdwm4taRRWFLYUClMi7g';
$URL = "http://maps.google.co.uk/maps/geo?q=" . urlencode($get_postcode) . "&output=json&key=".$myKey;
//decode returned file - echo $URL;
$data = json_decode(file_get_contents($URL));
//get latitude and longetude coordinates
$lng = $data->Placemark[0]->Point->coordinates[0];
$lat = $data->Placemark[0]->Point->coordinates[1];
?>
<p><b>
Latitude <?=$lat?> <br> Longitude <?=$lng?>
</b></p>


<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAo5DJKafF5Wqy7iJIHvekxQDw6SbLitDXGRuCV60uhGEd-71JRQNyJ8twHQdwm4taRRWFLYUClMi7g" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function loadMap(){
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(54.80068486732233,-3.779296875), 5);
GEvent.addListener(map, "click", function(overlay, point){
map.clearOverlays();
if (point) {
map.addOverlay(new GMarker(point));
map.panTo(point);
msg = "Latitude: "+point.lat()+"<br />"+"Longitude: "+point.lng();
document.getElementById("mypoint").innerHTML = msg;
}
});
}
// arrange for our onload handler to 'listen' for onload events
if (window.attachEvent) {
window.attachEvent("onload", function() {
loadMap();	// Internet Explorer
});
} else {
window.addEventListener("load", function() {
loadMap(); // Firefox and standard browsers
}, false);
}
//]]>
</script>

<div onLoad="loadMap()">
<div id="map" style="width: 400px; height: 400px"></div><br/>
<div id="mypoint">Click on map to get Lat/Lon Values<br/></div>
</div>
</div>

 

thanks for any advice

[infiniteacuity]

The API key for google maps is being rejected on the example.