Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    problems with variables

    Hi,

    What should I do that variable "d1" shows in a filed "Distance" in the form?

    Code:
    <!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">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <meta name="robots" content="noindex,follow" />
        <title>Calculate driving distance with Google Maps API</title>
        <script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyDtR4SBY1CQIRQtvgAL-n3y0MHI9WHCicM" type="text/javascript"></script>
        <!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html -->
        <script type="text/javascript">
    
        var geocoder, location1, location2, gDir;
    
        function initialize() {
            geocoder = new GClientGeocoder();
            gDir = new GDirections();
            GEvent.addListener(gDir, "load", function() {
                var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
                var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
                document.getElementById('d1').innerHTML =+drivingDistanceKilometers;
    
                
    
            });
        }
    
        function showLocation() {
            geocoder.getLocations(document.forms[0].address1.value, function (response) {
                if (!response || response.Status.code != 200)
                {
                    alert("Przykro nam, ale wpisałeś niepoprawny adres. Spróbuj ponownie!");
                }
                else
                {
                    location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                    geocoder.getLocations(document.forms[0].address2.value, function (response) {
                        if (!response || response.Status.code != 200)
                        {
                            alert("Sorry, we were unable to geocode the second address");
                        }
                        else
                        {
                            location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                            gDir.load('from: ' + location1.address + ' to: ' + location2.address);
                        }
                    });
                }
            });
        }
    
        </script>
    </head>
    
    <body onload="initialize()">
    
        <form action="#" onsubmit="showLocation(); return false;">
            <p>
                <input type="text" name="address1" value="Warszawa" />
                <input type="text" name="address2" value="Radom" />
                <input type="submit" value="Search" />
            </p>
        </form>
    
        <p id="d1"></p>
        distance:
        <input name="distance" id="d1">
    
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,170
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    As d1 is the id of a form field you need

    document.getElementById('d1').value =+drivingDistanceKilometers;

    You may not assign the same id to two elements -

    <p id="d1" ></p>
    distance:
    <input name="distance" id="d1" >
    and you must close your form after the input textbox:-

    Code:
    <form action="#" onsubmit="showLocation(); return false;">
            <p>
                <input type="text" name="address1" value="Warszawa" />
                <input type="text" name="address2" value="Radom" />
                <input type="submit" value="Search" />
            </p>
       
        <p id="d1"></p>
        distance:
        <input type = "text" name="distance" id="d2"> 
    </form>
    
    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 06-26-2012 at 12:25 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •