I have a google maps application which has an address text box. When we type in the postal address, it gives the corresponding latitude and longitude as a pop up info window on a google map. All i want to do is to be able to get the latitude and longitude info into two text boxes on the html page. I am trying to modify the code but for some reason, I am unable to do it. Any help is appreciated. Here is my code.
HTML page
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chapter 10 - Example 10-1</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/10-1.js"></script>
</head>
<body>
<form id="addressForm" action="/">
<div>
<label for="address">Address:</label>
<input type="text" name="address" id="address" />
<input type="submit" id="addressButton" value="Get Coordinates" /><br>
<input type="text" name=lat" id="lat" />
<input type="text" name=long" id="long" />
</div>
</form>
<div id="map"></div>
</body>
</html>Javascript code
(function() {
// Defining some global variables
var map, geocoder, marker, infowindow;
window.onload = function() {
// Creating a new map
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Getting a reference to the HTML form
var form = document.getElementById('addressForm');
// Catching the forms submit event
form.onsubmit = function() {
// Getting the address from the text input
var address = document.getElementById('address').value;
// Making the Geocoder call
getCoordinates(address);
// Preventing the form from doing a page submit
return false;
}
}
// Create a function the will return the coordinates for the address
function getCoordinates(address) {
// Check to see if we already have a geocoded object. If not we create one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// Making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
map.setCenter(results[0].geometry.location);
// Check to see if we've already got a Marker object
if (!marker) {
// Creating a new marker and adding it to the map
marker = new google.maps.Marker({
map: map
});
}
// Setting the position of the marker to the returned location
marker.setPosition(results[0].geometry.location);
// Check to see if we've already got an InfoWindow object
if (!infowindow) {
// Creating a new InfoWindow
infowindow = new google.maps.InfoWindow();
}
// Creating the content of the InfoWindow to the address
// and the returned position
var content = '<strong>' + results[0].formatted_address + '</strong><br />';
content += 'Lat: ' + results[0].geometry.location.lat() + '<br />';
content += 'Lng: ' + results[0].geometry.location.lng();
// Adding the content to the InfoWindow
infowindow.setContent(content);
// Opening the InfoWindow
infowindow.open(map, marker);
document.getElementBy('lat').value= results[0].geometry.location.lat();
document.getElementBy('long').value= results[0].geometry.location.lat();
}
});
}
})();