On a single HTML page, I have incorporated three dropdown lists for country, city, and district with an initial blank selected value, along with a Google map. The aim is to automatically center and zoom in on the map whenever users make selections from these dropdown lists.
An issue arises in the following scenario:
- The user selects a country from the country dropdown list.
- I need to fetch the newly selected value once the dropdown list has been altered.
- An event should be triggered to update the Google map accordingly.
I attempted to utilize both the onchange and change JavaScript events, but encountered an obstacle where the text retrieved from the dropdown list was the text BEFORE the selection event took place.
Hence, the main question remains: How can I trigger an event AFTER the dropdown list has been changed?
Below is the snippet of code being used:
<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;
}