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


      } 
      
    });
  
  }

})();

raghujosh,

Finger trouble ....

//	document.getElementBy('lat').value=  results[0].geometry.location.lat();
	document.getElementById('lat').value=  results[0].geometry.location.lat();
//	document.getElementBy('long').value=  results[0].geometry.location.lat();
	document.getElementById('long').value=  results[0].geometry.location.lat();

Airshow

HTML line 19...typo or is quote actually missing around name?

<input type="text" name=lat" id="lat" />

should be:

<input type="text" name="lat" id="lat" />

Well spotted Solid, that too.

Airshow

HTML line 19...typo or is quote actually missing around name?

<input type="text" name=lat" id="lat" />

should be:

<input type="text" name="lat" id="lat" />

well spotted..my problem is solved. Thanks all.

You're also calling the latitude method and placing it in the longitude box: document.getElementBy('long').value= results[0].geometry.location.lat();

Line 90, btw

My problem is I'm getting the same value returned from both methods,
loc[0] = results[0].geometry.location.lat();
loc[1] = results[0].geometry.location.lng();
and i have no idea why.

You would stand a better chance with better constructed code.

This is equivalent to the OP's sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type='text/javascript'>
window.onload = function() {
  // find DOM elements
  var latField = document.getElementById('lat');
  var lngField = document.getElementById('long');
  var canvas = document.getElementById('map');
  var form = document.getElementById('addressForm');
  var addressField = form.address;

  // create map, marker, infowindow and geocoder objects
  var options = {
    zoom: 3,  
    center: new google.maps.LatLng(37.09, -95.71),  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };
  var map = new google.maps.Map(canvas, options);
  var marker = new google.maps.Marker({
    map: map
  });
  var infowindow = new google.maps.InfoWindow();
  var geocoder = new google.maps.Geocoder();

  // set handler for form.onsubmit event
  form.onsubmit = function() {
    return showAddressOnMap(addressField.value);
  }
  
  // worker function to display marker on map at address
  function showAddressOnMap(address) {
    try{
      var geocoderRequest = {
        address: address
      }
      geocoder.geocode(geocoderRequest, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var location = results[0].geometry.location;
          map.setCenter(location);
          marker.setPosition(location);
          var content = [];
          content.push('<strong>' + results[0].formatted_address + '</strong>');
          content.push('Lat: ' + location.lat());
          content.push('Lng: ' + location.lng());
          infowindow.setContent(content.join('<br/>'));
          infowindow.open(map, marker);
          latField.value = location.lat();
          lngField.value = location.lng();
        }
      });
      return false;
    }
    catch(e){
      return false;//ensure form does not submit, even if there's an error
    }
  }
};
</script>
</head>

<body>

<div id="map" style="width:500px;height:350px;border:1px solid #999;"></div>
<form id="addressForm" style="margin:10px 0;">
	<input name="address" size="69" value="Whitehouse, Washington DC, USA"><br/>
	<input type="submit" value="Submit"/>
</form>
<div style="font-family:'Lucida Console', Monaco, monospace;">
	Lat: <input id="lat" disabled="disabled" /><br/>
	Lng: <input id="long" disabled="disabled" /><br/>
</div>

</body>
</html>

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.