• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 618
  • Last Modified:

A google maps api application tiny little problem...

Hi Experts.
I have built this little application using the example I have found online. It works. It does what I need it to do - it displays distance in miles for each location.
Only trouble is - I have to click the Submit button twice for it to show! And I cannot figure out why. Very frustrated...
Can you please paste the below code into your asp.net  visual studio page, and test it for yourself.
GEOCODE.txt
0
vituxa
Asked:
vituxa
  • 2
1 Solution
 
Ray PaseurCommented:
For those who would like to see the code, here it is.  On line 91, why the return false?

<%@ Page Title="Home Page" Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API Example: Extraction of Geocoding Data</title>
    <script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript"></script>

    <script type="text/javascript">
        var geocoder, location1, location2;
        var arrAddresses;
        var arrResults;

        function initialize() {
            geocoder = new GClientGeocoder();
            arrAddresses = new Array();
            arrResults = new Array();
            document.getElementById('results').innerHTML = "";
        }

        function showLocation(sdraddresses) {
            geocoder.getLocations(document.forms[0].customer_address.value, function (response) {
                if (!response || response.Status.code != 200) {
                    alert("Sorry, we were unable to geocode the first address");
                }
                else {
                    location1 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };

                    for (var i = 0; i < sdraddresses.length; i++) {
                        geocoder.getLocations(sdraddresses[i], 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 };
                                calculateDistance();

                            }
                        });
                    }
                }
            });           
        }

        function displayResults2() {
            if (arrResults.length > 0) {
                for (var i = 0; i < arrResults.length; i++) {
                    address = arrResults[i].toString().substring(0, arrResults[i].toString().indexOf('|'));
                    distance = arrResults[i].toString().replace(address + '|', '');
                    document.getElementById('results').innerHTML += '<div style="float: left;">' + address + '</div><div> : ' + distance + '</div><br />';
                }
            }
        }
             

        function calculateDistance() {

            try {
                var glatlng1 = new GLatLng(location1.lat, location1.lon);
                var glatlng2 = new GLatLng(location2.lat, location2.lon);
                var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
                var kmdistance = (miledistance * 1.609344).toFixed(1);

                arrResults.push(location2.address + '|' + miledistance.toString());
            }
            catch (error) {
                alert(error);
            }
        }

        function doPrepare() {
            document.getElementById('results').innerHTML = "";
            var allhidden = document.getElementsByTagName('input');
            var j = 0;

            for (var i = 0; i < allhidden.length; i++) {
                if (allhidden[i].type == "hidden" && allhidden[i].id.toString().indexOf('hdn_') > -1 && allhidden[i].value.toString() != "") {
                    arrAddresses[j] = allhidden[i].value.toString();
                    j++;
                }
            }
            showLocation(arrAddresses);
            displayResults2();            
        }


    </script>
  </head>
  <body onload="initialize()">
    <form onsubmit="doPrepare(); return false;" runat="server">
        <asp:Literal runat="server" ID="litHiddenFields">
            <input type="hidden" id="hdn_1" value="86442" />
            <input type="hidden" id="hdn_2" value="86446" />
            <input type="hidden" id="hdn_3" value="86426" />
        </asp:Literal>
      <p>
        <input type="text" name="customer_address" value="90210" class="address_input" size="40" maxlength="100" />
        <input type="submit" name="find" value="Search" />
      </p>
    </form>
    <div id="results"></div>
  </body>
</html>

Open in new window

0
 
Tom BeckCommented:
The return false on line 91 is necessary to prevent the form from being submitting back to the server.

The problem is that displayResults2() is being called before the arrResults array is allowed to fully populate. It takes time to fetch the geo-coordinates.

What if you check that the arrResults.length is equal to the arrAddresses.length in the try block of the calculateDistance function before displaying the results?

      try {
                var glatlng1 = new GLatLng(location1.lat, location1.lon);
                var glatlng2 = new GLatLng(location2.lat, location2.lon);
                var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
                var kmdistance = (miledistance * 1.609344).toFixed(1);

                arrResults.push(location2.address + '|' + miledistance.toString());      
            if(arrResults.length == arrAddresses.length){
                  displayResults2();
            }

      }

Remove the call to displayResults2() in the doPrepare function.
0
 
vituxaAuthor Commented:
If I could I would give you more points! Thank you so much!!!
0
 
Tom BeckCommented:
You're welcome, glad to help.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now