Question

I have a three dropdownlists country, city and district with and initial blank selected value and a google map on one html page. I am trying to center and zoom-in the map as the user select location values from the dropdownlists.

So here is a scenario where I face an issue:

1. user select a country form the country dropdownlist.
2. I have to retrieve the value selected after the dropdownlist has changed.
3. fire an event to update the google map

I tried to use the onchange and change javascript events but both caused the value of the text retrieved from the dropdownlist to be the value of the text BEFORE the event which sends an empty text (the initial blank text) to google map.

So, how can I fire an event AFTER the dropdownlist has changed?

And here is my code:

  <asp:DropDownList ID="DropDownList_Country" runat="server" Height="29px" Width="209px"
                            Font-Size="18px" CausesValidation="false" onchange="MapLocationUpdater();">


function MapLocationUpdater() {

                var address = getDropdownListAddress();
                geocoder.geocode({ 'address': address },
                function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        map.setZoom(11);
                        var marker = new google.maps.Marker({
                            map: map,

                            position: results[0].geometry.location
                        });

                    }
                    else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                }
                );
            }

            function getDropdownListAddress() {

                var ddlCountry = document.getElementById("<%=DropDownList_Country.ClientID%>");
                var ddlCity = document.getElementById("<%=DropDownList_City.ClientID%>");
                var ddlDistrict = document.getElementById("<%=DropDownList_District.ClientID%>");

                var CountryTxt = ddlCountry.options[ddlCountry.selectedIndex].text;
                var CityTxt = ddlCity.options[ddlCity.selectedIndex].text;
                var DistrictTxt = ddlDistrict.options[ddlDistrict.selectedIndex].text;

                return CountryTxt + " " + CityTxt + " " + DistrictTxt;

            }

Answer 1

try this one:

<asp:DropDownList ID="DropDownList_Country" runat="server" Height="29px" Width="209px"
                        Font-Size="18px" CausesValidation="false" onchange="setTimeout('MapLocationUpdater();',1000);">