Passing dropdownlist value to google map javascript

Question

I have a javascript code which when fired gives me the latitude and the longitude depending upon the address that i enter in the text boxes & dropdowns.The problem lies in dropdowns because when i replace the dropdowns(ie ddlState & ddlCity) the code works fine.I guess i am not able to pull out the selected value from the dropdowns.Here is my javascript :

   <td class="unmaintable1">Street Address :&nbsp;&nbsp; </td>
   <td class="mergedunmaintable23" colspan="2"><asp:TextBox ID="txtStreetAddress" runat="server" Width="576px"></asp:TextBox>
   </td>
   <td class="unmaintable1">Landmark :&nbsp;&nbsp; </td>
   <td class="mergedunmaintable23" colspan="2"><asp:TextBox ID="txtLandmark" runat="server" Width="576px">Optional</asp:TextBox>
   </td>
   <td class="unmaintable1">State :&nbsp;&nbsp; </td>
   <td class="mergedunmaintable23" colspan="2">
   <asp:UpdatePanel runat="server">
   <ContentTemplate>
   <table cellpadding="0" cellspacing="0" class="updatepaneltable">
   <tr>
   <td class="unmaintable2"><asp:DropDownList ID="ddlState" runat="server" AutoPostBack="True" DataTextField="StateName" DataValueField="StateId" OnSelectedIndexChanged="ddlState_SelectedIndexChanged" Width="160px">
   </asp:DropDownList></td>
   <td class="unmaintable3"> City : <asp:DropDownList ID="ddlCity" runat="server" Width="160px">
   </asp:DropDownList></td>
   </tr>
   </table>
   </ContentTemplate> 
   </asp:UpdatePanel>
   </td>
   <td class="unmaintable1">Zip Code :&nbsp;&nbsp; </td>
   <td class="unmaintable2">
   <asp:TextBox ID="txtZipCode" runat="server" Width="154px"></asp:TextBox>
   </td>
   <td class="unmaintable3"><span class="auto-style33">Country&nbsp;:</span>
   <asp:DropDownList ID="ddlCountry" runat="server" Width="160px">
   <asp:ListItem>India</asp:ListItem>
   </asp:DropDownList>
   </td>
   <td class="unmaintable2">
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&key=AIzaSyDVk87DSFyZlxmYAM8NPNr8sZPN60FYLNA"></script>
   <script type="text/javascript">
   function calculateCoordinates() {

                    var txtStreetAddress = document.getElementById('<%= txtStreetAddress.ClientID%>');
                    var txtLandmark = document.getElementById('<%= txtLandmark.ClientID%>');
                    var ddlCity = document.getElementById('<%= ddlCity.ClientID%>');
                    var txtzip = document.getElementById('<%= txtZipCode.ClientID%>');
                    var ddlState = document.getElementById('<%= ddlState.ClientID%>');
                    var txtLatitude = document.getElementById('<%= txtLatitude.ClientID%>');
                    var txtLongitude = document.getElementById('<%= txtLongitude.ClientID%>');

                    var address = txtStreetAddress.value + ', ';
                    address += txtLandmark.value + ', ';
                    address += ddlCity.value + ', ';
                    address += txtzip.value + ', ';
                    address += ddlState.value;

                    var geocoder;
                    geocoder = new google.maps.Geocoder();

                    geocoder.geocode({ address: address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var location = results[0].geometry.location;
                            txtLatitude.value = location.lat();
                            txtLongitude.value = location.lng();
                        }
                        else
                            alert(searchString + ' - not found');
                    });
                }
    </script>
              <asp:TextBox ID="txtLatitude" runat="server" Width="154px"></asp:TextBox>
                          </td>
             <td class="unmaintable3"><span class="auto-style33">Longitude :</span>
             <asp:TextBox ID="txtLongitude" runat="server" Width="154px"></asp:TextBox>
                          </td>
             <td class="unmaintable4">
                        <input id="btnCalculateCoordinates" type="button" value="Calculate Coordinates" onclick="calculateCoordinates();" />
                          </td>

Answer 1

My guess would be that, even though you don't enter an address in asp:TextBox txtStreetAddress , the asp:DropDownList for State is using a default which is not empty, eg 'AL' (alphabetically the first state in the list) and you're passing that as part of your address wihtout noticing it.

Your request probably looks something like these:

• maps.googleapis.com/maps/api/geocode/json?address=,,AL,,

which always returns the same results, ie

{
   "results" : [
      {
         "formatted_address" : "Alabama, USA",
         "geometry" : {
            "location" : {
               "lat" : 32.3182314,
               "lng" : -86.902298
            },
         }
      }
   ],
   "status" : "OK"
}

What your request should look like is:

maps.googleapis.com/maps/api/geocode/json?address=,,,,

which would not return results.

Add a default empty list item to you drop down list, like:

<asp:DropDownList 
    ID="ddlState" 
    runat="server" 
    AutoPostBack="True" 
    DataTextField="StateName" 
    DataValueField="StateId"     
    OnSelectedIndexChanged="ddlState_SelectedIndexChanged" 
    Width="160px">
        <asp:ListItem></asp:ListItem>
</asp:DropDownList>

Update:

I looked at your javascript a bit more, and I see a bug that would cause the behavior you described.

If you send a valid address, you'll get back results, and these lines will execute:

var location = results[0].geometry.location;
txtLatitude.value = location.lat();
txtLongitude.value = location.lng();

So now txtLatitude and txtLongitude have values. But, if you then send an invalid address, this line executes:

alert(searchString + ' - not found');

But txtLatitude and txtLongitude still have their original values. You must reset them, so change your code like:

geocoder.geocode({ address: address }, function (results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var location = results[0].geometry.location;
    txtLatitude.value = location.lat();
    txtLongitude.value = location.lng();
  } else {
    txtLatitude.value = '';
    txtLongitude.value = '';
    alert(searchString + ' - not found');
});