UPDATE: I have tried placing the button in the update panel but nothing happens. Firebug shows that the onclick is not fired.
I am working on a website using Google maps apiv3. I have a button through which I execute some logic using code behind of button_click and a javascript function. I am able to execute all the logic well but ultimately at the end the page reloads and I end up with nothing on the map.
<asp:Button ID="Button1" runat="server" style="z-index: 1; left: 573px; top: 146px; position: absolute" Text="Show route" onclick="Button1_Click1"/>
Button_Click1:
protected void Button1_Click1(object sender, EventArgs e) { using (con = new MySqlConnection("server=localhost; uid=root;password=aaa;database=Gmaps")) da = new MySqlDataAdapter("select * from routes where uid='a1'", con); da.Fill(ds, "mroute"); foreach (DataRow r in ds.Tables[0].Rows) { uroute.Add(r["latlng"].ToString()); } croute = new string[uroute.Count]; croute = uroute.ToArray(); hdncroute.Value = string.Join("&", croute); ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:droute();", true); }
Javascript:
function droute() { var route=[]; var temp; temp = document.getElementById('<%= hdncroute.ClientID %>').value; route= temp.split('&'); //Loop to add locations and draw line var path= polyline.getPath(); for(var i=0;i<route.length;i++) { var input= route[i]; var ltln = input.split(",",2); var lat=parseFloat(ltln[0]); var lng=parseFloat(ltln[1]); var pos= new google.maps.LatLng(lat,lng); var marker= new google.maps.Marker({position:pos,map:map}); path.push(route[i]); google.maps.event.addListener(marker,'click',showiwindow); } function showiwindow(event) { iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng()); iwindow.open(map,this); } }
Not much to bother about the logic in the code since its all fine. Only thing is I need to avoid this reload.